diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml index 20710b4..b8c539e 100644 --- a/.gitea/workflows/ci.yml +++ b/.gitea/workflows/ci.yml @@ -86,6 +86,7 @@ jobs: e2e: runs-on: ubuntu-latest needs: [docker-build] + if: github.event_name == 'pull_request' steps: - name: Clone repo run: | diff --git a/static/style.css b/static/style.css index 1d1582b..5ae437b 100644 --- a/static/style.css +++ b/static/style.css @@ -1,58 +1,74 @@ /* Base styles */ :root { - --primary-color: #333; - --secondary-color: #666; - --background-color: #f5f5f5; - --border-color: #ddd; - --accent-color: #0066cc; - --accent-hover: #0055aa; + --primary-color: #1a1a1a; + --secondary-color: #6b7280; + --background-color: #f9fafb; + --surface-color: #ffffff; + --border-color: #e5e7eb; + --accent-color: #2563eb; + --accent-hover: #1d4ed8; + --accent-light: #eff6ff; + --timeline-line: #d1d5db; + --dot-color: #2563eb; } [data-theme="dark"] { - --primary-color: #e0e0e0; - --secondary-color: #a0a0a0; - --background-color: #1a1a1a; - --border-color: #444; - --accent-color: #4dabf7; - --accent-hover: #339af0; + --primary-color: #f3f4f6; + --secondary-color: #9ca3af; + --background-color: #111827; + --surface-color: #1f2937; + --border-color: #374151; + --accent-color: #60a5fa; + --accent-hover: #93c5fd; + --accent-light: #1e3a5f; + --timeline-line: #4b5563; + --dot-color: #60a5fa; +} + +* { + box-sizing: border-box; } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 0; background-color: var(--background-color); color: var(--primary-color); line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; + -webkit-font-smoothing: antialiased; } /* Header */ header { - background-color: #fff; + background-color: var(--surface-color); border-bottom: 1px solid var(--border-color); - padding: 1rem 2rem; + padding: 0.75rem 2rem; display: flex; justify-content: space-between; align-items: center; + position: sticky; + top: 0; + z-index: 100; + backdrop-filter: blur(8px); transition: background-color 0.3s ease; } -[data-theme="dark"] header { - background-color: #2d2d2d; -} - header h1 { margin: 0; - font-size: 1.5rem; - transition: color 0.3s ease; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: -0.025em; } header nav a { - color: var(--primary-color); + color: var(--secondary-color); text-decoration: none; - margin-left: 1rem; - transition: color 0.3s ease; + margin-left: 1.5rem; + font-size: 0.9rem; + font-weight: 500; + transition: color 0.2s ease; } header nav a:hover { @@ -60,39 +76,47 @@ header nav a:hover { } main { - padding: 1rem 2rem; - max-width: 800px; + padding: 2rem; + max-width: 960px; margin: 0 auto; - transition: color 0.3s ease; +} + +/* Page headings */ +main > h1 { + font-size: 1.5rem; + font-weight: 700; + letter-spacing: -0.025em; + margin: 0 0 1.5rem 0; } /* Newspaper list */ .newspaper-list { list-style: none; padding: 0; - margin: 1rem 0; + margin: 0; } .newspaper-item { - background: #fff; + background: var(--surface-color); border: 1px solid var(--border-color); - border-radius: 4px; - padding: 1rem; + border-radius: 8px; + padding: 1rem 1.25rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; - transition: background-color 0.3s ease, border-color 0.3s ease; + transition: all 0.15s ease; } -[data-theme="dark"] .newspaper-item { - background: #2d2d2d; +.newspaper-item:hover { + border-color: var(--accent-color); + box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .newspaper-info h2 { - margin: 0 0 0.5rem 0; - font-size: 1.1rem; - transition: color 0.3s ease; + margin: 0 0 0.25rem 0; + font-size: 1rem; + font-weight: 600; } .newspaper-info h2 a { @@ -105,61 +129,112 @@ main { } .newspaper-info p { - margin: 0.2rem 0; + margin: 0; color: var(--secondary-color); - font-size: 0.9rem; - transition: color 0.3s ease; + font-size: 0.85rem; } -.status-success { - color: #4caf50; - font-weight: bold; -} - -.status-pending { - color: #ff9800; - font-weight: bold; -} +.status-success { color: #16a34a; font-weight: 600; } +.status-pending { color: #f59e0b; font-weight: 600; } .pull-btn { - background-color: var(--accent-color); + background: var(--accent-color); color: white; border: none; - padding: 0.5rem 1rem; - border-radius: 4px; + padding: 0.4rem 0.85rem; + border-radius: 6px; cursor: pointer; - font-size: 0.9rem; - transition: background-color 0.3s ease; + font-size: 0.85rem; + font-weight: 500; + transition: background-color 0.15s ease; } .pull-btn:hover { - background-color: var(--accent-hover); + background: var(--accent-hover); } -/* Article list */ +/* Timeline Layout */ +.timeline { + position: relative; + padding-left: 3rem; +} + +.timeline::before { + content: ''; + position: absolute; + left: 1.25rem; + top: 0; + bottom: 0; + width: 2px; + background: var(--timeline-line); + border-radius: 1px; +} + +.timeline-date { + position: relative; + margin: 2rem 0 0.75rem; +} + +.timeline-date:first-child { + margin-top: 0.5rem; +} + +.timeline-date::before { + content: ''; + position: absolute; + left: -2.15rem; + top: 0.35rem; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--dot-color); + border: 3px solid var(--background-color); + box-shadow: 0 0 0 2px var(--dot-color); + z-index: 2; +} + +.date-label { + font-weight: 700; + font-size: 0.95rem; + color: var(--primary-color); + letter-spacing: -0.01em; +} + +.date-count { + margin-left: 0.6rem; + font-size: 0.8rem; + color: var(--secondary-color); + font-weight: 400; +} + +/* Article cards in timeline */ .article-list { list-style: none; padding: 0; - margin: 0 0 2rem 0; + margin: 0 0 1rem 0; } .article-item { - background: #fff; + background: var(--surface-color); border: 1px solid var(--border-color); - border-radius: 4px; - padding: 1rem; + border-radius: 8px; + padding: 1rem 1.25rem; margin-bottom: 0.5rem; - transition: background-color 0.3s ease, border-color 0.3s ease; + transition: all 0.15s ease; } -[data-theme="dark"] .article-item { - background: #2d2d2d; +.article-item:hover { + border-color: var(--accent-color); + box-shadow: 0 2px 8px rgba(0,0,0,0.06); + transform: translateY(-1px); } .article-item h3 { margin: 0 0 0.5rem 0; font-size: 1rem; - transition: color 0.3s ease; + font-weight: 600; + line-height: 1.4; + letter-spacing: -0.01em; } .article-item h3 a { @@ -171,76 +246,21 @@ main { color: var(--accent-color); } -.article-date { - color: var(--secondary-color); - font-size: 0.85rem; - margin: 0.2rem 0; - transition: color 0.3s ease; -} - .article-summary { - color: var(--primary-color); - font-size: 0.9rem; - margin: 0.5rem 0 0 0; + color: var(--secondary-color); + font-size: 0.875rem; + line-height: 1.5; + margin: 0; display: -webkit-box; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - transition: color 0.3s ease; } -/* Timeline layout */ -.timeline { - position: relative; - padding-left: 2rem; -} - -.timeline::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 2px; - background: var(--border-color); -} - -.timeline-date { - position: relative; - margin: 2rem 0 1rem; - padding-left: 1.5rem; -} - -.timeline-date::before { - content: ''; - position: absolute; - left: -2.35rem; - top: 0.35rem; - width: 0.75rem; - height: 0.75rem; - border-radius: 50%; - background: var(--accent-color); - border: 2px solid var(--background-color); -} - -.date-label { - font-weight: 700; - font-size: 1.1rem; - color: var(--primary-color); -} - -.date-count { - margin-left: 0.75rem; - font-size: 0.85rem; +.article-date { color: var(--secondary-color); -} - -.article-item { - padding-left: 1rem; -} - -.article-main { - flex: 1; + font-size: 0.8rem; + margin: 0.25rem 0; } /* Pagination */ @@ -248,8 +268,8 @@ main { display: flex; justify-content: center; align-items: center; - gap: 1rem; - margin: 1rem 0; + gap: 1.5rem; + margin: 1.5rem 0; padding: 1rem 0; border-top: 1px solid var(--border-color); } @@ -257,93 +277,62 @@ main { .pagination a { color: var(--accent-color); text-decoration: none; + font-weight: 500; + font-size: 0.9rem; } .pagination a:hover { text-decoration: underline; } -/* Article view */ +.pagination span { + color: var(--secondary-color); + font-size: 0.85rem; +} + +/* Article detail view */ .article-view { - background: #fff; + background: var(--surface-color); border: 1px solid var(--border-color); - border-radius: 8px; - padding: 2rem; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - transition: background-color 0.3s ease, border-color 0.3s ease; -} - -[data-theme="dark"] .article-view { - background: #2d2d2d; -} - -.article-header { - margin-bottom: 1.5rem; - transition: color 0.3s ease; + border-radius: 12px; + padding: 2.5rem; + box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .article-source { display: inline-block; - background: #f0f7ff; - color: #0066cc; - padding: 0.35rem 0.75rem; + background: var(--accent-light); + color: var(--accent-color); + padding: 0.25rem 0.75rem; border-radius: 20px; - font-size: 0.8rem; + font-size: 0.75rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.05em; margin-bottom: 1rem; - transition: background-color 0.3s ease, color 0.3s ease; -} - -[data-theme="dark"] .article-source { - background: #1a365d; - color: #60a5fa; -} - -.source-label { - margin-right: 0.5rem; - color: #667599; - transition: color 0.3s ease; -} - -.source-name { - font-weight: 700; } .article-view h1 { - margin-top: 0; - font-size: 2rem; + margin: 0 0 1rem 0; + font-size: 1.75rem; line-height: 1.3; - color: #222; font-weight: 700; - transition: color 0.3s ease; -} - -[data-theme="dark"] .article-view h1 { - color: #e0e0e0; + letter-spacing: -0.025em; } .article-meta { - border-bottom: 2px solid var(--border-color); - padding-bottom: 1.25rem; + border-bottom: 1px solid var(--border-color); + padding-bottom: 1rem; margin-bottom: 1.5rem; - transition: border-color 0.3s ease; -} - -.article-meta-row { display: flex; + gap: 1.5rem; flex-wrap: wrap; - align-items: center; - gap: 1rem; - margin-bottom: 0.5rem; } -.article-meta-row time, -.article-meta-row span { - font-size: 0.9rem; +.article-meta time, +.article-meta span { + font-size: 0.85rem; color: var(--secondary-color); - transition: color 0.3s ease; } .article-meta a { @@ -351,7 +340,6 @@ main { text-decoration: none; font-size: 0.85rem; word-break: break-all; - transition: color 0.3s ease; } .article-meta a:hover { @@ -359,244 +347,189 @@ main { } .article-content { - margin: 1.5rem 0; - transition: color 0.3s ease; + font-size: 1.05rem; + line-height: 1.8; } .article-text { white-space: pre-wrap; - font-size: 1.05rem; - line-height: 1.8; - color: #333; - transition: color 0.3s ease; -} - -[data-theme="dark"] .article-text { - color: #e0e0e0; + color: var(--primary-color); } .article-text p { - margin: 0; - text-indent: 2rem; - transition: color 0.3s ease; -} - -.article-text p:first-child { - margin-top: 0; - text-indent: 0; + margin: 0 0 1rem 0; } .archived-html { border: 1px solid var(--border-color); - border-radius: 4px; + border-radius: 8px; padding: 1rem; margin-top: 1rem; - background: #fafafa; - transition: border-color 0.3s ease, background-color 0.3s ease; -} - -[data-theme="dark"] .archived-html { - border-color: var(--border-color); - background: #2d2d2d; + background: var(--background-color); } .article-actions { margin-top: 2rem; - padding-top: 1.25rem; - border-top: 2px solid var(--border-color); + padding-top: 1.5rem; + border-top: 1px solid var(--border-color); display: flex; - flex-wrap: wrap; gap: 1rem; align-items: center; - transition: border-color 0.3s ease; } .back-link { color: var(--accent-color); text-decoration: none; font-weight: 600; - font-size: 1rem; + font-size: 0.9rem; padding: 0.5rem 1rem; - background: #f0f7ff; + background: var(--accent-light); border-radius: 6px; - transition: all 0.3s ease; + transition: all 0.15s ease; } .back-link:hover { + background: var(--accent-color); + color: white; text-decoration: none; - background: #e0efff; - transform: translateY(-1px); -} - -[data-theme="dark"] .back-link { - background: #1a365d; -} - -[data-theme="dark"] .back-link:hover { - background: #0d2a4c; } /* Disabled feeds */ .source-disabled { color: var(--secondary-color); text-decoration: line-through; - transition: color 0.3s ease; -} - -.source-disabled:hover { - text-decoration: none; - cursor: not-allowed; } .status-badge { display: inline-block; - background: #dc3545; + background: #ef4444; color: white; - padding: 0.15rem 0.5rem; + padding: 0.1rem 0.4rem; border-radius: 3px; - font-size: 0.75rem; + font-size: 0.7rem; margin-left: 0.5rem; - transition: background-color 0.3s ease; } .disable-reason { - color: #666; - font-size: 0.85rem; + color: var(--secondary-color); + font-size: 0.8rem; margin-top: 0.25rem; font-style: italic; - transition: color 0.3s ease; } /* Status page */ .status-page { - background: #fff; + background: var(--surface-color); border: 1px solid var(--border-color); - border-radius: 4px; - padding: 1.5rem; - transition: background-color 0.3s ease, border-color 0.3s ease; -} - -[data-theme="dark"] .status-page { - background: #2d2d2d; + border-radius: 12px; + padding: 2rem; } .status-page h1 { - margin-top: 0; - transition: color 0.3s ease; + margin: 0 0 1.5rem 0; + font-size: 1.5rem; + font-weight: 700; } .status-page h2 { - font-size: 1.2rem; - margin-top: 1.5rem; - margin-bottom: 1rem; - transition: color 0.3s ease; + font-size: 1.1rem; + margin: 1.5rem 0 1rem; + font-weight: 600; } .status-summary { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; - transition: color 0.3s ease; +} + +.status-item { + background: var(--background-color); + border-radius: 8px; + padding: 1rem; } .status-item h2 { - margin: 0 0 0.5rem 0; - font-size: 1rem; + margin: 0 0 0.25rem; + font-size: 0.8rem; color: var(--secondary-color); - transition: color 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.05em; } .status-item p { - margin: 0.2rem 0; - transition: color 0.3s ease; + margin: 0; + font-size: 1.5rem; + font-weight: 700; } -.status-online { - color: #28a745; - font-weight: bold; +.status-online { color: #16a34a; } +.status-warning { color: #f59e0b; } + +/* Not found */ +.article-not-found { + text-align: center; + padding: 4rem 2rem; } -.status-warning { - color: #ffc107; - font-weight: bold; +.article-not-found h1 { + font-size: 1.25rem; + margin-bottom: 0.5rem; +} + +.article-not-found p { + color: var(--secondary-color); + margin-bottom: 1.5rem; } /* Responsive */ -@media (max-width: 600px) { +@media (max-width: 768px) { header { padding: 0.75rem 1rem; - flex-direction: column; - gap: 0.5rem; } - - header nav { - display: flex; - gap: 1rem; - } - + main { - padding: 0.75rem 1rem; + padding: 1rem; } - + + .timeline { + padding-left: 2.5rem; + } + + .timeline::before { + left: 0.75rem; + } + + .timeline-date::before { + left: -1.95rem; + width: 10px; + height: 10px; + } + + .article-view { + padding: 1.5rem; + } + + .article-view h1 { + font-size: 1.35rem; + } + .newspaper-item { flex-direction: column; align-items: flex-start; - } - - .pull-btn { - margin-top: 0.75rem; - } - - .status-summary { - grid-template-columns: 1fr; - } - - .article-view { - padding: 1.25rem; - } - - .article-view h1 { - font-size: 1.4rem; - } - - .article-meta-row { - flex-direction: column; - gap: 0.25rem; - } - - .article-text { - font-size: 0.95rem; + gap: 0.75rem; } } -/* Kobo compatibility */ -@media (max-width: 600px) { - body { - font-size: 14px; - } - - h1 { - font-size: 1.25rem; - } - - h2 { - font-size: 1.1rem; - } -} - -/* Print styles */ +/* Print */ @media print { - header, .pull-btn, .pagination, .article-actions, .back-link { + header, .pull-btn, .pagination, .article-actions { display: none; } - .article-view { border: none; padding: 0; + box-shadow: none; } - - .article-content { - margin: 0; - } -} \ No newline at end of file +}