jarianc/NewsArchiverV2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: skip e2e on push to main, improve timeline CSS

Browse Source
This commit is contained in:
Jarian Cottingham 2026-07-07 23:09:31 +00:00 committed by Jarian
parent ddcfa042a7
commit 4e97366700
2 changed files with 263 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitea/workflows/ci.yml
View File

@ -86,6 +86,7 @@ jobs:
e2e: e2e:
runs-on: ubuntu-latest runs-on: ubuntu-latest
needs: [docker-build] needs: [docker-build]
if: github.event_name == 'pull_request'
steps: steps:
- name: Clone repo - name: Clone repo
run: | run: |

591
static/style.css
View File

@ -1,58 +1,74 @@
/* Base styles */ /* Base styles */
:root { :root {
--primary-color: #333; --primary-color: #1a1a1a;
--secondary-color: #666; --secondary-color: #6b7280;
--background-color: #f5f5f5; --background-color: #f9fafb;
--border-color: #ddd; --surface-color: #ffffff;
--accent-color: #0066cc; --border-color: #e5e7eb;
--accent-hover: #0055aa; --accent-color: #2563eb;
--accent-hover: #1d4ed8;
--accent-light: #eff6ff;
--timeline-line: #d1d5db;
--dot-color: #2563eb;
} }
[data-theme="dark"] { [data-theme="dark"] {
--primary-color: #e0e0e0; --primary-color: #f3f4f6;
--secondary-color: #a0a0a0; --secondary-color: #9ca3af;
--background-color: #1a1a1a; --background-color: #111827;
--border-color: #444; --surface-color: #1f2937;
--accent-color: #4dabf7; --border-color: #374151;
--accent-hover: #339af0; --accent-color: #60a5fa;
--accent-hover: #93c5fd;
--accent-light: #1e3a5f;
--timeline-line: #4b5563;
--dot-color: #60a5fa;
}
* {
box-sizing: border-box;
} }
body { 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; margin: 0;
padding: 0; padding: 0;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--primary-color); color: var(--primary-color);
line-height: 1.6; line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
-webkit-font-smoothing: antialiased;
} }
/* Header */ /* Header */
header { header {
background-color: #fff; background-color: var(--surface-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding: 1rem 2rem; padding: 0.75rem 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
[data-theme="dark"] header {
background-color: #2d2d2d;
}
header h1 { header h1 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.25rem;
transition: color 0.3s ease; font-weight: 700;
letter-spacing: -0.025em;
} }
header nav a { header nav a {
color: var(--primary-color); color: var(--secondary-color);
text-decoration: none; text-decoration: none;
margin-left: 1rem; margin-left: 1.5rem;
transition: color 0.3s ease; font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s ease;
} }
header nav a:hover { header nav a:hover {
@ -60,39 +76,47 @@ header nav a:hover {
} }
main { main {
padding: 1rem 2rem; padding: 2rem;
max-width: 800px; max-width: 960px;
margin: 0 auto; 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 */
.newspaper-list { .newspaper-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 1rem 0; margin: 0;
} }
.newspaper-item { .newspaper-item {
background: #fff; background: var(--surface-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 8px;
padding: 1rem; padding: 1rem 1.25rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: background-color 0.3s ease, border-color 0.3s ease; transition: all 0.15s ease;
} }
[data-theme="dark"] .newspaper-item { .newspaper-item:hover {
background: #2d2d2d; border-color: var(--accent-color);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
} }
.newspaper-info h2 { .newspaper-info h2 {
margin: 0 0 0.5rem 0; margin: 0 0 0.25rem 0;
font-size: 1.1rem; font-size: 1rem;
transition: color 0.3s ease; font-weight: 600;
} }
.newspaper-info h2 a { .newspaper-info h2 a {
@ -105,61 +129,112 @@ main {
} }
.newspaper-info p { .newspaper-info p {
margin: 0.2rem 0; margin: 0;
color: var(--secondary-color); color: var(--secondary-color);
font-size: 0.9rem; font-size: 0.85rem;
transition: color 0.3s ease;
} }
.status-success { .status-success { color: #16a34a; font-weight: 600; }
color: #4caf50; .status-pending { color: #f59e0b; font-weight: 600; }
font-weight: bold;
}
.status-pending {
color: #ff9800;
font-weight: bold;
}
.pull-btn { .pull-btn {
background-color: var(--accent-color); background: var(--accent-color);
color: white; color: white;
border: none; border: none;
padding: 0.5rem 1rem; padding: 0.4rem 0.85rem;
border-radius: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.85rem;
transition: background-color 0.3s ease; font-weight: 500;
transition: background-color 0.15s ease;
} }
.pull-btn:hover { .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 { .article-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 0 2rem 0; margin: 0 0 1rem 0;
} }
.article-item { .article-item {
background: #fff; background: var(--surface-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 8px;
padding: 1rem; padding: 1rem 1.25rem;
margin-bottom: 0.5rem; 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 { .article-item:hover {
background: #2d2d2d; border-color: var(--accent-color);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transform: translateY(-1px);
} }
.article-item h3 { .article-item h3 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
font-size: 1rem; font-size: 1rem;
transition: color 0.3s ease; font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
} }
.article-item h3 a { .article-item h3 a {
@ -171,76 +246,21 @@ main {
color: var(--accent-color); 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 { .article-summary {
color: var(--primary-color); color: var(--secondary-color);
font-size: 0.9rem; font-size: 0.875rem;
margin: 0.5rem 0 0 0; line-height: 1.5;
margin: 0;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
transition: color 0.3s ease;
} }
/* Timeline layout */ .article-date {
.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;
color: var(--secondary-color); color: var(--secondary-color);
} font-size: 0.8rem;
margin: 0.25rem 0;
.article-item {
padding-left: 1rem;
}
.article-main {
flex: 1;
} }
/* Pagination */ /* Pagination */
@ -248,8 +268,8 @@ main {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1rem; gap: 1.5rem;
margin: 1rem 0; margin: 1.5rem 0;
padding: 1rem 0; padding: 1rem 0;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
@ -257,93 +277,62 @@ main {
.pagination a { .pagination a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
} }
.pagination a:hover { .pagination a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Article view */ .pagination span {
color: var(--secondary-color);
font-size: 0.85rem;
}
/* Article detail view */
.article-view { .article-view {
background: #fff; background: var(--surface-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 12px;
padding: 2rem; padding: 2.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
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;
} }
.article-source { .article-source {
display: inline-block; display: inline-block;
background: #f0f7ff; background: var(--accent-light);
color: #0066cc; color: var(--accent-color);
padding: 0.35rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 20px; border-radius: 20px;
font-size: 0.8rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.05em;
margin-bottom: 1rem; 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 { .article-view h1 {
margin-top: 0; margin: 0 0 1rem 0;
font-size: 2rem; font-size: 1.75rem;
line-height: 1.3; line-height: 1.3;
color: #222;
font-weight: 700; font-weight: 700;
transition: color 0.3s ease; letter-spacing: -0.025em;
}
[data-theme="dark"] .article-view h1 {
color: #e0e0e0;
} }
.article-meta { .article-meta {
border-bottom: 2px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding-bottom: 1.25rem; padding-bottom: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
transition: border-color 0.3s ease;
}
.article-meta-row {
display: flex; display: flex;
gap: 1.5rem;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
} }
.article-meta-row time, .article-meta time,
.article-meta-row span { .article-meta span {
font-size: 0.9rem; font-size: 0.85rem;
color: var(--secondary-color); color: var(--secondary-color);
transition: color 0.3s ease;
} }
.article-meta a { .article-meta a {
@ -351,7 +340,6 @@ main {
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
word-break: break-all; word-break: break-all;
transition: color 0.3s ease;
} }
.article-meta a:hover { .article-meta a:hover {
@ -359,244 +347,189 @@ main {
} }
.article-content { .article-content {
margin: 1.5rem 0; font-size: 1.05rem;
transition: color 0.3s ease; line-height: 1.8;
} }
.article-text { .article-text {
white-space: pre-wrap; white-space: pre-wrap;
font-size: 1.05rem; color: var(--primary-color);
line-height: 1.8;
color: #333;
transition: color 0.3s ease;
}
[data-theme="dark"] .article-text {
color: #e0e0e0;
} }
.article-text p { .article-text p {
margin: 0; margin: 0 0 1rem 0;
text-indent: 2rem;
transition: color 0.3s ease;
}
.article-text p:first-child {
margin-top: 0;
text-indent: 0;
} }
.archived-html { .archived-html {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 8px;
padding: 1rem; padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
background: #fafafa; background: var(--background-color);
transition: border-color 0.3s ease, background-color 0.3s ease;
}
[data-theme="dark"] .archived-html {
border-color: var(--border-color);
background: #2d2d2d;
} }
.article-actions { .article-actions {
margin-top: 2rem; margin-top: 2rem;
padding-top: 1.25rem; padding-top: 1.5rem;
border-top: 2px solid var(--border-color); border-top: 1px solid var(--border-color);
display: flex; display: flex;
flex-wrap: wrap;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
transition: border-color 0.3s ease;
} }
.back-link { .back-link {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
font-size: 1rem; font-size: 0.9rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #f0f7ff; background: var(--accent-light);
border-radius: 6px; border-radius: 6px;
transition: all 0.3s ease; transition: all 0.15s ease;
} }
.back-link:hover { .back-link:hover {
background: var(--accent-color);
color: white;
text-decoration: none; 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 */ /* Disabled feeds */
.source-disabled { .source-disabled {
color: var(--secondary-color); color: var(--secondary-color);
text-decoration: line-through; text-decoration: line-through;
transition: color 0.3s ease;
}
.source-disabled:hover {
text-decoration: none;
cursor: not-allowed;
} }
.status-badge { .status-badge {
display: inline-block; display: inline-block;
background: #dc3545; background: #ef4444;
color: white; color: white;
padding: 0.15rem 0.5rem; padding: 0.1rem 0.4rem;
border-radius: 3px; border-radius: 3px;
font-size: 0.75rem; font-size: 0.7rem;
margin-left: 0.5rem; margin-left: 0.5rem;
transition: background-color 0.3s ease;
} }
.disable-reason { .disable-reason {
color: #666; color: var(--secondary-color);
font-size: 0.85rem; font-size: 0.8rem;
margin-top: 0.25rem; margin-top: 0.25rem;
font-style: italic; font-style: italic;
transition: color 0.3s ease;
} }
/* Status page */ /* Status page */
.status-page { .status-page {
background: #fff; background: var(--surface-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 12px;
padding: 1.5rem; padding: 2rem;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .status-page {
background: #2d2d2d;
} }
.status-page h1 { .status-page h1 {
margin-top: 0; margin: 0 0 1.5rem 0;
transition: color 0.3s ease; font-size: 1.5rem;
font-weight: 700;
} }
.status-page h2 { .status-page h2 {
font-size: 1.2rem; font-size: 1.1rem;
margin-top: 1.5rem; margin: 1.5rem 0 1rem;
margin-bottom: 1rem; font-weight: 600;
transition: color 0.3s ease;
} }
.status-summary { .status-summary {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem; gap: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
transition: color 0.3s ease; }
.status-item {
background: var(--background-color);
border-radius: 8px;
padding: 1rem;
} }
.status-item h2 { .status-item h2 {
margin: 0 0 0.5rem 0; margin: 0 0 0.25rem;
font-size: 1rem; font-size: 0.8rem;
color: var(--secondary-color); color: var(--secondary-color);
transition: color 0.3s ease; text-transform: uppercase;
letter-spacing: 0.05em;
} }
.status-item p { .status-item p {
margin: 0.2rem 0; margin: 0;
transition: color 0.3s ease; font-size: 1.5rem;
font-weight: 700;
} }
.status-online { .status-online { color: #16a34a; }
color: #28a745; .status-warning { color: #f59e0b; }
font-weight: bold;
/* Not found */
.article-not-found {
text-align: center;
padding: 4rem 2rem;
} }
.status-warning { .article-not-found h1 {
color: #ffc107; font-size: 1.25rem;
font-weight: bold; margin-bottom: 0.5rem;
}
.article-not-found p {
color: var(--secondary-color);
margin-bottom: 1.5rem;
} }
/* Responsive */ /* Responsive */
@media (max-width: 600px) { @media (max-width: 768px) {
header { header {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
flex-direction: column;
gap: 0.5rem;
} }
header nav {
display: flex;
gap: 1rem;
}
main { 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 { .newspaper-item {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} gap: 0.75rem;
.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;
} }
} }
/* Kobo compatibility */ /* Print */
@media (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 1.25rem;
}
h2 {
font-size: 1.1rem;
}
}
/* Print styles */
@media print { @media print {
header, .pull-btn, .pagination, .article-actions, .back-link { header, .pull-btn, .pagination, .article-actions {
display: none; display: none;
} }
.article-view { .article-view {
border: none; border: none;
padding: 0; padding: 0;
box-shadow: none;
} }
}
.article-content {
margin: 0;
}
}