GitHub/kill-the-news
1
0
Fork 0
mirror of https://github.com/juherr/kill-the-news.git synced 2026-06-20 22:03:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(status): redesign status page with hero, themed sections, responsive grid

Browse Source 
Rework the public / status page from a flat uniform grid into a hero
featured metric plus four themed sections (Feeds, Emails, Distribution,
Instance). Add semantic colors (green success, red rejects/deletes),
relative timestamps with UTC tooltips, and derived metrics (net feeds,
acceptance rate, avg emails/feed, humanized uptime). Grid is fluid above
640px (auto-fit) and locks to two columns on mobile.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-23 12:39:57 +02:00
parent 81d05e5774
commit b985e2c643
2 changed files with 243 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+94 -1
View File
@@ -1016,7 +1016,7 @@ table.table code {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
margin-bottom: 0;
}
.stat-card {
@@ -1039,7 +1039,100 @@ table.table code {
color: var(--color-text-primary);
}
.stat-value-success {
color: var(--color-success);
}
.stat-value-danger {
color: var(--color-danger);
}
.stat-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
/* Status page — hero featured metric */
.stat-hero {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.stat-hero-main {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.stat-hero-value {
font-size: 3.25rem;
font-weight: var(--font-weight-bold);
line-height: 1;
color: var(--color-primary);
}
.stat-hero-label {
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.stat-hero-aside {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
text-align: right;
}
.stat-hero-aside-value {
font-size: var(--font-size-xxl);
font-weight: var(--font-weight-semibold);
line-height: 1;
color: var(--color-success);
}
.stat-hero-aside-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* Status page — thematic sections */
.stat-section {
margin-bottom: var(--spacing-xl);
}
.stat-section-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-tertiary);
margin: 0 0 var(--spacing-md);
}
@media (max-width: 640px) {
.stat-hero-aside {
text-align: left;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.stat-card {
padding: var(--spacing-md);
}
.stat-value {
font-size: 1.6rem;
}
.stat-value-time {
font-size: 0.9rem;
}
}