From 36b3df5d40a45578b0fa9bd3f58dc8967271a9de Mon Sep 17 00:00:00 2001 From: jay Date: Fri, 26 Jun 2026 20:36:25 -0400 Subject: [PATCH] /onthisday: nudge year alignment + clay Read-more button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Raise "2013" 2px toward the line; lower "IN HISTORY" ~3px (offset constant 8→11) so its top sits flush with the numerals instead of riding high. - Read-more button green → clay (#b06a45) to match the "On This Day" title, per Jay giving each card its own character. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/onthisday/+page.svelte | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/routes/onthisday/+page.svelte b/frontend/src/routes/onthisday/+page.svelte index e0f115c..cc19958 100644 --- a/frontend/src/routes/onthisday/+page.svelte +++ b/frontend/src/routes/onthisday/+page.svelte @@ -132,8 +132,8 @@ 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; } + .yb-label { position: relative; top: calc(11px - 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 { position: relative; top: -2px; 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; @@ -159,13 +159,14 @@ } .cta-row { margin-top: clamp(24px, 4vw, 30px); } + /* clay to match the "On This Day" title — gives this card its own identity */ .cta { - display: inline-flex; align-items: center; gap: 8px; background: #2f6b4f; color: #fff; + display: inline-flex; align-items: center; gap: 8px; background: #b06a45; color: #fff; text-decoration: none; font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; } - .cta:hover { background: #265a42; } + .cta:hover { background: #9a5a38; } .note { text-align: center; color: var(--muted); font-size: 1.05rem; margin-top: 60px; }