kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify typography with tabular-nums for stable number alignment

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-15 19:45:52 +01:00
parent f2e5f23b18
commit 1e776c1c9a
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/css/components.css
View File

@@ -469,10 +469,21 @@ body.dark-mode #config-cancel-button:hover {
background-color: var(--color-text-muted); background-color: var(--color-text-muted);
} }
/* Tabular figures for all numeric displays */
.clock-time,
.countdown-large,
.next-departures,
.time-display,
#custom-weather .temperature,
#custom-weather .forecast-hour .temp {
font-variant-numeric: tabular-nums;
font-family: var(--font-numbers);
}
.clock-time { .clock-time {
font-size: 2.2em; font-size: 2.2em;
font-weight: 700; font-weight: 700;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; font-family: var(--font-numbers);
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
letter-spacing: 1px; letter-spacing: 1px;
@@ -488,7 +499,7 @@ body.dark-mode #config-cancel-button:hover {
.clock-date { .clock-date {
font-size: 2.2em; font-size: 2.2em;
font-weight: 400; font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; font-family: var(--font-primary);
display: inline-block; display: inline-block;
opacity: 0.98; opacity: 0.98;
letter-spacing: 0.5px; letter-spacing: 0.5px;

4
public/css/main.css
View File

@@ -34,13 +34,15 @@
--ticker-height: 36px; --ticker-height: 36px;
--ticker-speed: 30s; --ticker-speed: 30s;
--ticker-bg: rgba(0, 0, 0, 0.85); --ticker-bg: rgba(0, 0, 0, 0.85);
--font-primary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--font-numbers: 'Segoe UI', 'Roboto Mono', 'SF Mono', 'Consolas', monospace;
} }
/* ======================================== /* ========================================
Base Styles Base Styles
======================================== */ ======================================== */
body { body {
font-family: Arial, sans-serif; font-family: var(--font-primary);
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--color-bg); background-color: var(--color-bg);