From e2e59bfdc413e41001318ec6b3565cdb2aceaa13 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Fri, 26 Jun 2026 18:51:03 -0400
Subject: [PATCH] /onthisday: move the year off the image into a green "In
 history" chip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/routes/onthisday/+page.svelte | 25 ++++++++++------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/src/routes/onthisday/+page.svelte b/frontend/src/routes/onthisday/+page.svelte
index bafe0e6..58a71c5 100644
--- a/frontend/src/routes/onthisday/+page.svelte
+++ b/frontend/src/routes/onthisday/+page.svelte
@@ -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;