From 14c2648f8f16fb21a249f0605d7156717ed02f89 Mon Sep 17 00:00:00 2001 From: jay Date: Fri, 26 Jun 2026 21:30:17 -0400 Subject: [PATCH] /onthisday: tie "IN HISTORY" offset to the year size (stop the oscillation) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 6px read high, 12px read low — instead of guessing another px, anchor the label to the visible cap top via top: calc(0.2 * var(--ys)). ~9px at the 46px desktop year, scaling down on mobile. Still absolute, so the baseline is untouched. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/onthisday/+page.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/routes/onthisday/+page.svelte b/frontend/src/routes/onthisday/+page.svelte index c8fe0f9..4b99038 100644 --- a/frontend/src/routes/onthisday/+page.svelte +++ b/frontend/src/routes/onthisday/+page.svelte @@ -133,7 +133,9 @@ "IN HISTORY" is absolutely positioned in the reserved start-padding so raising it can never drag that baseline (Codex's structure). Both green so the line ties in the Read-more button. */ .year-block { --ys: clamp(34px, 5.5vw, 46px); position: relative; display: inline-block; padding-inline-start: 90px; line-height: 1; flex: none; } - .yb-label { position: absolute; inset-inline-start: 0; top: clamp(9px, 1.5vw, 12px); line-height: 1; font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #367653; } + /* offset tied to the year size (≈cap-top), so it lands by construction and holds across + viewports instead of needing per-pixel re-guesses */ + .yb-label { position: absolute; inset-inline-start: 0; top: calc(0.2 * var(--ys)); line-height: 1; font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #367653; } .yb-year { position: static; display: inline-block; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: var(--ys); line-height: 1; color: #2c5d44; } /* the full line can't fit cleanly on a narrow phone — wrap it deliberately: year lockup on its