fix: LED digits individually spaced — fixes '2 1:00' gap in DSEG7 font

This commit is contained in:
Ronny
2026-04-12 12:42:47 +02:00
parent b2ca2c733a
commit 75d69191fa
2 changed files with 28 additions and 4 deletions
+22 -2
View File
@@ -100,11 +100,18 @@
}
.heroLED {
display: flex;
align-items: center;
justify-content: center;
}
.ledDigit {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 28px;
color: #FECC4C;
letter-spacing: -0.02em;
word-spacing: -0.3em;
display: inline-block;
width: 0.65em;
text-align: center;
text-shadow:
0 0 4px rgba(254, 174, 50, 0.9),
0 0 12px rgba(254, 174, 50, 0.6),
@@ -112,6 +119,19 @@
0 0 48px rgba(254, 174, 50, 0.15);
}
.ledColon {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 28px;
color: #FECC4C;
display: inline-block;
width: 0.3em;
text-align: center;
text-shadow:
0 0 4px rgba(254, 174, 50, 0.9),
0 0 12px rgba(254, 174, 50, 0.6),
0 0 28px rgba(254, 174, 50, 0.35);
}
.heroGroup {
font-size: 0.6rem;
color: var(--text-muted);
+6 -2
View File
@@ -81,9 +81,13 @@ export default function DashboardPage(_props: Props) {
<span className={styles.heroTeamName}>{hero.match.homeTeam.shortName}</span>
</div>
{/* Center: LED time */}
{/* Center: LED time — each digit fixed-width for even spacing */}
<div className={styles.heroCenter}>
<span className={styles.heroLED}>{formatKickoff(hero.match.utcDate)}</span>
<span className={styles.heroLED}>
{formatKickoff(hero.match.utcDate).split('').map((ch, i) => (
<span key={i} className={ch === ':' ? styles.ledColon : styles.ledDigit}>{ch}</span>
))}
</span>
</div>
<div className={styles.heroTeam}>