From 719a2c50523482307b3d05740bc467f4054acb89 Mon Sep 17 00:00:00 2001 From: jay Date: Fri, 26 Jun 2026 20:30:39 -0400 Subject: [PATCH] /onthisday: baseline-align "2013" with the date so it sits on the line The chaos was align-items:flex-end + a tight 0.86 line-height letting "2013" hang below the date's line. Switch the dateline to align-items:baseline so the year and "Friday, June 26" share one baseline; raise "IN HISTORY" with a post-layout relative offset (responsive via a --ys var) so it cap-aligns to the top of the numerals without dragging the baseline. Rule sits at the baseline. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/onthisday/+page.svelte | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/routes/onthisday/+page.svelte b/frontend/src/routes/onthisday/+page.svelte index 75fdcb1..e0f115c 100644 --- a/frontend/src/routes/onthisday/+page.svelte +++ b/frontend/src/routes/onthisday/+page.svelte @@ -123,15 +123,17 @@ .eye-label { font-family: 'Hanken Grotesk', sans-serif; font-size: clamp(17px, 2.4vw, 22px); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #b06a45; } /* extra breathing room between the title and the content below */ - .dateline { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 16px; margin: clamp(32px, 5vw, 48px) 0 16px; } - .dl-rule { flex: 1 1 30px; min-width: 24px; height: 1.5px; margin-bottom: 7px; background: rgba(70, 120, 90, 0.26); } - .dl-label { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: clamp(14px, 1.7vw, 17px); letter-spacing: 0.1em; text-transform: uppercase; color: #2c5d44; margin-bottom: 5px; } + .dateline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; margin: clamp(32px, 5vw, 48px) 0 16px; } + .dl-rule { flex: 1 1 30px; min-width: 24px; height: 1.5px; align-self: flex-end; margin-bottom: 0.7em; background: rgba(70, 120, 90, 0.26); } + .dl-label { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: clamp(14px, 1.7vw, 17px); letter-spacing: 0.1em; text-transform: uppercase; color: #2c5d44; } - /* year lives here (off the image) — "IN HISTORY" top-aligned beside a big "2013". - Green (matching the date) so both greens on this line tie in the green Read-more button. */ - .year-block { display: inline-flex; align-items: flex-start; gap: 7px; flex: none; } - .yb-label { font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #3a7d5b; line-height: 1; margin-top: 9px; } - .yb-year { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(34px, 5.5vw, 46px); line-height: 0.86; color: #2c5d44; } + /* year lives here (off the image) — "IN HISTORY" top-aligned beside a big "2013", sharing + ONE baseline with the date so "2013" sits ON the line (not below it). Both green, so the + line ties in the green Read-more button. The label is raised post-layout via position: + relative, which does NOT move the baseline the date aligns to. */ + .year-block { --ys: clamp(34px, 5.5vw, 46px); display: inline-flex; align-items: baseline; gap: 7px; flex: none; } + .yb-label { position: relative; top: calc(8px - 0.7 * var(--ys)); font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #3a7d5b; } + .yb-year { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: var(--ys); line-height: 1; color: #2c5d44; } .hero { position: relative; border-radius: 12px; overflow: hidden; background: #21392e;