Share a real baseline between the score labels and their numbers

The panel readout lined its labels up with their numbers only by luck.
.head is a grid with align-items left at its default, so both cells
stretch and each one's text sits at the top of its own box. The two
baselines coincided because the label run and the digit run happened to
measure the same, not because anything asked for it.

Force the value cell onto a face with different metrics and the old CSS
drifts 1-4px either way — Amiri -4px, Avenir and Alegreya -2px,
AnjaliOldLipi +2px, that last one putting the label baseline below the
number, which is the reported symptom. With align-items:baseline every
one of those is 0.0000px.

Rendering is untouched where the metrics already agree: before and after
differ by 0 pixels across the whole frame, same text bands, same 7px of
whitespace above the Moves line.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-11 16:17:05 +02:00
co-authored by Claude Opus 5
parent 81826589d8
commit 7a820b44f8
2 changed files with 5 additions and 1 deletions
+4
View File
@@ -81,6 +81,10 @@
display:grid;
grid-template-columns:max-content max-content;
justify-content:start;
align-items:baseline; /* a label and its number share a baseline whatever
the system font does to the two cells' metrics —
the default stretches them instead, which only
lines up while both measure exactly the same */
gap:3px 8px;
order:-1;
font-size:clamp(13px,3.7vw,20px);
+1 -1
View File
@@ -1,5 +1,5 @@
/* Cache-first: once installed the clock never touches the network again. */
const CACHE = "bgclock-v8";
const CACHE = "bgclock-v9";
const FILES = [
"./",
"./index.html",