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

/onthisday: move the year off the image into a green "In history" chip

Browse Source 
Overlaying the year on an uncontrolled Wikimedia image was a legibility coin
flip (fine on dark photos, cluttered/unreadable on bright seals/logos like the
SCOTUS seal). Per Jay's call, lift "In history · {year}" out of the photo into a
green chip on the dateline row (year in Playfair) and drop the scrim so the hero
reads clean. Dateline wraps on narrow screens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-26 18:51:03 -04:00
parent 783b853aee
commit e2e59bfdc4
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/onthisday/+page.svelte
+11 -14
View File
@@ -43,6 +43,10 @@
</div>
<div class="dateline">
<span class="year-chip">
<span class="yc-label">In history</span>
<span class="yc-year">{f.year}</span>
</span>
<span class="dl-rule"></span>
<span class="dl-label">{dateline(f.date)}</span>
</div>
@@ -51,11 +55,6 @@
{#if f.image_url}
<img class="hero-img" src={f.image_url} alt="" loading="lazy" />
{/if}
<div class="hero-scrim"></div>
<div class="hero-year">
<div class="hy-eyebrow">In history</div>
<div class="hy-year">{f.year}</div>
</div>
</div>
<p class="headline">{f.text}</p>
@@ -106,22 +105,20 @@
.eye-rule { width: 34px; height: 3px; background: #3a7d5b; border-radius: 2px; flex: none; }
.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: #2c5d44; }
.dateline { display: flex; align-items: center; gap: 16px; margin: clamp(20px, 3vw, 26px) 0 14px; }
.dl-rule { flex: 1; height: 1.5px; background: rgba(70, 120, 90, 0.26); }
.dateline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin: clamp(20px, 3vw, 26px) 0 14px; }
.dl-rule { flex: 1 1 30px; min-width: 24px; height: 1.5px; 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 now (off the image), so it's always legible regardless of the day's photo */
.year-chip { display: inline-flex; align-items: center; gap: 9px; flex: none; background: #e7efe4; border: 1px solid rgba(58, 125, 91, 0.30); border-radius: 999px; padding: 5px 8px 5px 14px; }
.yc-label { font-family: 'Hanken Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #3a7d5b; }
.yc-year { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 20px; line-height: 1; color: #2c5d44; }
.hero {
position: relative; border-radius: 12px; overflow: hidden; background: #21392e;
height: clamp(220px, 38vw, 330px);
}
.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, rgba(18, 32, 25, 0.74) 0%, rgba(18, 32, 25, 0.45) 38%, rgba(18, 32, 25, 0.06) 70%);
}
.hero-year { position: absolute; left: clamp(20px, 4vw, 30px); bottom: clamp(20px, 3vw, 26px); text-shadow: 0 1px 14px rgba(10, 20, 15, 0.55); }
.hy-eyebrow { font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #bfe8cf; }
.hy-year { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(50px, 11vw, 76px); line-height: 0.9; color: #fff; margin-top: 4px; }
.headline {
font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600;