From 81ac58e3469a9bd3a613b25957ba3455b9002fde Mon Sep 17 00:00:00 2001 From: Viktor Petersson Date: Mon, 13 Jul 2026 14:18:46 +0000 Subject: [PATCH] world-clock: center the time in the container-query fallback Follow-up to the fallback completion: without container size-containment the base margin-block:auto stopped centering the time (it sat in the upper third, unlike the non-degraded layout). In the @supports not(container-type) block, grow .card-clock to fill the middle space and center its content (flex:1 + align-items: center) so the time is vertically centered like the modern render. Co-Authored-By: Claude Opus 4.8 (1M context) --- assets/styles/main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/styles/main.css b/assets/styles/main.css index a23081d..a313302 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -511,6 +511,12 @@ body { font-size: clamp(0.6rem, 1.4vmin, 0.85rem); } .card-clock { + /* Without container size-containment the base `margin-block: auto` no longer + centers the time between the head and date, so grow the clock to fill the + middle space and center its content vertically here instead. */ + flex: 1; + margin-block: 0; + align-items: center; padding-block: clamp(0.2rem, 1.2vmin, 0.6rem); } .card-time {