From d85e174a35567911cf48d0289150166fbe26f2f5 Mon Sep 17 00:00:00 2001 From: jay Date: Sun, 21 Jun 2026 21:35:55 -0400 Subject: [PATCH] home3 refinements: clamp summary, bigger titles/logo/nav, crop art edge, clearer CTA MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - News summary + headline clamped to 3 lines so the long brief gist no longer stretches the bento (option 1; placeholder-bubble option still available if preferred). - News CTA "Read the brief" → "Read the good news" (clearer for first-time visitors). - Art swatch crops a few px off every edge (::after inset) to remove the black scan edge at the top of paintings. - Logo 42→48px, nav 15→16.5px, card titles bumped + weight 500→600 so they pop on scan. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/home3/+page.svelte | 37 +++++++++++++++++++------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index e018b16..b7c3764 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -64,7 +64,7 @@

{news?.title ?? 'What went right this week: the good news that actually matters'}

{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}

- Read the brief + Read the good news Updated this morning
@@ -81,7 +81,7 @@

View today -
+
@@ -127,8 +127,8 @@ padding: 26px clamp(18px, 5vw, 44px) 0; } .brand { display: block; line-height: 0; } - .brand img { height: 42px; width: auto; display: block; } - .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); font-size: 15px; font-weight: 500; } + .brand img { height: 48px; width: auto; display: block; } + .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: 16.5px; font-weight: 500; } .nav a { color: var(--body); text-decoration: none; } .nav a.on { color: #23201b; } .nav a:hover { color: var(--teal); } @@ -161,7 +161,8 @@ a.card:hover { transform: translateY(-2px); } .label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; } .link { font-size: 14px; font-weight: 600; padding-bottom: 2px; align-self: flex-start; } - h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } + /* card titles a touch larger + bolder so they jump on hover/scan */ + h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } /* Good News — tall, photo on top */ .news { @@ -170,8 +171,15 @@ } .news-photo { aspect-ratio: 5/4; background: linear-gradient(160deg, #6fc4d8, #9bd4c9 55%, #f6cf7e); background-size: cover; background-position: center; } .news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; } - .news h2 { font-size: clamp(1.4rem, 2.4vw, 27px); line-height: 1.14; margin: 12px 0 0; } - .summary { font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0; } + .news h2 { + font-size: clamp(1.55rem, 2.6vw, 30px); line-height: 1.14; margin: 12px 0 0; + display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; + } + /* keep the gist tidy so the bento stays balanced — full read lives on /news */ + .summary { + font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0; + display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; + } .news-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; } .news-link { color: var(--teal); border-bottom: 2px solid #6fc4d8; } .meta { font-size: 12px; color: var(--muted); } @@ -179,16 +187,25 @@ /* Daily Art — wide, text left + artwork swatch right */ .art { background: #F3EEF9; border: 1px solid #e4d8f1; display: flex; min-height: 188px; } .art-body { flex: 1; padding: 24px 26px; display: flex; flex-direction: column; } - .art h3 { font-size: clamp(1.25rem, 2vw, 23px); line-height: 1.16; margin: 10px 0 0; color: #2a1c3d; } + .art h3 { font-size: clamp(1.35rem, 2.1vw, 25px); line-height: 1.16; margin: 10px 0 0; color: #2a1c3d; } .art-today { font-size: 13.5px; line-height: 1.5; color: #6f6280; margin: 9px 0 0; } .ital { font-style: italic; font-family: 'Newsreader', Georgia, serif; } .art-link { margin-top: auto; color: #8857C2; border-bottom: 2px solid #c9aef0; } - .art-swatch { width: 46%; min-width: 130px; background: linear-gradient(170deg, #bfe0f0 0%, #a9cf9a 50%, #d89a4e 100%); background-size: cover; background-position: center; } + /* swatch crops a few px off every edge (::after inset) so scanned paintings don't show + their ragged/black canvas edge at the top */ + .art-swatch { + width: 46%; min-width: 130px; position: relative; overflow: hidden; + background: linear-gradient(170deg, #bfe0f0 0%, #a9cf9a 50%, #d89a4e 100%); + } + .art-swatch::after { + content: ""; position: absolute; inset: -6px; + background-image: var(--art); background-size: cover; background-position: center; + } /* bottom pair */ .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .play { background: #FFF3DC; border: 1px solid #f6e2b8; padding: 22px 24px; display: flex; flex-direction: column; } - .play h3 { font-size: clamp(1.15rem, 1.8vw, 21px); margin: 9px 0 8px; color: #5c3d0c; } + .play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 9px 0 8px; color: #5c3d0c; } .play-copy { font-size: 13px; line-height: 1.5; color: #917642; margin: 0; } .play-link { margin-top: auto; padding-top: 16px; color: #D2861B; border-bottom: 2px solid #f0c878; }