polish: improve game card aesthetics
All checks were successful
CI / Lint (push) Successful in 19s
CI / Test (push) Successful in 8s
CI / Build & Push (push) Successful in 18s

- larger scores (1.6rem), logos (40px), and card width (290px)
- green top border accent on live game cards
- section headings reduced to small muted caps
- more breathing room in team rows
- slightly larger card radius and gap

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-29 14:00:18 -04:00
parent ed05d6adfc
commit 56feb0a5f2
2 changed files with 25 additions and 16 deletions

View File

@@ -49,7 +49,7 @@ function renderLiveGame(game) {
</div>` : ''; </div>` : '';
return ` return `
<div class="game-box"> <div class="game-box game-box-live">
<div class="card-header"> <div class="card-header">
<div class="badges"> <div class="badges">
${periodLabel} ${periodLabel}

View File

@@ -4,13 +4,14 @@
--card-border: #2a2a2a; --card-border: #2a2a2a;
--badge-bg: #2a2a2a; --badge-bg: #2a2a2a;
--text: #f0f0f0; --text: #f0f0f0;
--text-muted: #777; --text-muted: #666;
--green-bg: #14532d; --green-bg: #14532d;
--green-text: #86efac; --green-text: #86efac;
--green-accent: #22c55e;
--red: #ef4444; --red: #ef4444;
--gap: 0.875rem; --gap: 1rem;
--radius: 10px; --radius: 12px;
--card-w: 250px; --card-w: 290px;
} }
*, *::before, *::after { *, *::before, *::after {
@@ -54,12 +55,14 @@ main {
} }
.section-heading { .section-heading {
font-size: 2rem; font-size: 0.7rem;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
color: var(--text); text-transform: uppercase;
margin-bottom: 1rem; letter-spacing: 0.12em;
margin-top: 0.5rem; color: var(--text-muted);
margin-bottom: 0.875rem;
margin-top: 0.25rem;
} }
.games-grid { .games-grid {
@@ -75,9 +78,14 @@ main {
background: var(--card); background: var(--card);
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 0.875rem; padding: 1rem 1rem 0.875rem;
width: var(--card-w); width: var(--card-w);
flex-shrink: 0; flex-shrink: 0;
border-top-width: 3px;
}
.game-box-live {
border-top-color: var(--green-accent);
} }
/* ── Card Header (badges + live dot) ───────────── */ /* ── Card Header (badges + live dot) ───────────── */
@@ -137,8 +145,8 @@ main {
.team-row { .team-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.625rem;
padding: 0.45rem 0; padding: 0.55rem 0;
} }
.team-row + .team-row { .team-row + .team-row {
@@ -146,8 +154,8 @@ main {
} }
.team-logo { .team-logo {
width: 30px; width: 40px;
height: 30px; height: 40px;
object-fit: contain; object-fit: contain;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -180,12 +188,13 @@ main {
} }
.team-score { .team-score {
font-size: 1.2rem; font-size: 1.6rem;
font-weight: 700; font-weight: 700;
margin-left: auto; margin-left: auto;
flex-shrink: 0; flex-shrink: 0;
min-width: 1.5rem; min-width: 1.75rem;
text-align: right; text-align: right;
letter-spacing: -0.02em;
} }
.team-record { .team-record {