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

/onthisday: nudge year alignment + clay Read-more button

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