From 7a820b44f86e5088b7f2055df9ee14ecebaee2e0 Mon Sep 17 00:00:00 2001 From: Hans de Zwart Date: Tue, 11 Aug 2026 16:17:05 +0200 Subject: [PATCH] Share a real baseline between the score labels and their numbers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- public_html/index.html | 4 ++++ public_html/sw.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/public_html/index.html b/public_html/index.html index 0244774..16fd309 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -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); diff --git a/public_html/sw.js b/public_html/sw.js index ddf8fef..39dfb23 100644 --- a/public_html/sw.js +++ b/public_html/sw.js @@ -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",