thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/onthisday: baseline-align "2013" with the date so it sits on the line

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-26 20:30:39 -04:00
parent 2e43766d71
commit 719a2c5052
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/onthisday/+page.svelte
+10 -8
View File
@@ -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;