polish: improve game card aesthetics
- 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:
@@ -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}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user