From 440e8391d6c5e77619c46c7cb50a9703fc79be14 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 22 Jun 2026 14:37:47 -0400
Subject: [PATCH] home3: clickable news photo + headline (-> article); top bar
 = Home(active)/News/Games/Art/Entertainment

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/home3/+page.svelte | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index 8c70466..bccbe71 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -92,9 +92,11 @@
       <img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
     </a>
     <nav class="nav">
-      <a class="on" href="/">News</a>
+      <a class="on" href="/home3">Home</a>
+      <a href="/">News</a>
       <a href="/play">Games</a>
       <a href="/art">Art</a>
+      <a href="#">Entertainment</a>
       <a class="acct" href="/account" aria-label="Your account">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
           <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
@@ -111,12 +113,14 @@
   <main class="bento">
     <!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor -->
     <div class="card news">
-      <div class="news-photo {newsFit}">
-        <div class="news-plate" style={news?.image ? `background-image:url(${news.image})` : ''}></div>
-      </div>
+      <a class="news-photo-a" href={news?.id ? `/a/${news.id}` : '/'} aria-label="Read this article">
+        <div class="news-photo {newsFit}">
+          <div class="news-plate" style={news?.image ? `background-image:url(${news.image})` : ''}></div>
+        </div>
+      </a>
       <div class="news-body">
         <span class="label" style="color:#0083ad">GOOD NEWS</span>
-        <h2>{headline}</h2>
+        <a class="headline-a" href={news?.id ? `/a/${news.id}` : '/'}><h2>{headline}</h2></a>
         <p class="summary">{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}</p>
         <div class="news-foot">
           <a class="link news-link" href={news?.id ? `/a/${news.id}` : '/'}>Read article</a>
@@ -300,6 +304,11 @@
     background: #fff; border: 1px solid var(--news-border);
     display: flex; flex-direction: column; box-shadow: 0 6px 20px -14px rgba(0, 131, 173, 0.4);
   }
+  /* photo + headline both link to the article (clickable, not just the text links) */
+  .news-photo-a { display: block; }
+  .news-photo-a:hover { filter: brightness(0.97); }
+  .headline-a { display: block; text-decoration: none; color: inherit; }
+  .headline-a:hover h2 { color: var(--teal); }
   /* Photos fill edge-to-edge (cover, no box). Only figures/diagrams (detected by their
      wide/tall shape) get the soft tinted matte + white framed plate, so labels stay whole. */
   .news-photo { aspect-ratio: 5/4; }