From 79ecb800afff2552d027b62ffec3a7594a0781d5 Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 16:37:40 -0400 Subject: [PATCH] home3 News card: desktop gist fills to equal height (basis:0 fade), right never stretches MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Desktop: the gist flex-fills the card with flex-basis:0 so it never inflates the row height — the right column always sets it and is never stretched — and fades softly into a comfortable margin above the read-time. Mobile keeps the clean 3-line clamp (natural height, no fade). Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/home3/+page.svelte | 32 +++++++++++++------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index f92731e..51df80c 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -343,11 +343,11 @@ /* card titles: Newsreader, a calmer medium weight (per CD's mockup) */ h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } - /* Good News — photo on top. Hug its content (don't stretch to the right column's height), - so the read-time sits just under the gist instead of floating at the bottom of a tall - card. The right column then sets the row height and the bento stays tight. */ + /* Good News — photo on top, equal height to the right column. The gist flex-fills the + card (basis:0 so it never drives the row height → the right column always sets it, never + stretched) and fades softly into a comfortable margin above the read-time. */ .news { - background: #fff; border: 1px solid var(--news-border); align-self: start; + 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) */ @@ -376,16 +376,15 @@ 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: 2; line-clamp: 2; overflow: hidden; } - /* Just a taste of the gist — it's already a summary, so clamp to a few lines and let the - reader click through. Keeping it short also stops the News card from being the tallest - thing on the page (which was stretching the right column and spreading its cards). */ - .summary-a { display: block; text-decoration: none; color: inherit; } - .summary { - font-size: 15px; line-height: 1.5; color: #5a5346; margin: 12px 0 0; - display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; + /* Desktop: the gist grows to fill the card (basis:0 so it never inflates the row height), + softly fading out so it never jams against the read-time — a comfortable margin either way. */ + .summary-a { + flex: 1 1 0; min-height: 0; overflow: hidden; display: block; text-decoration: none; color: inherit; + -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent); + mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent); } - /* push the footer (brief · divider · read-more) to the card's bottom */ - .news-foot { display: flex; align-items: center; justify-content: flex-end; padding-top: 18px; margin-top: auto; } + .summary { font-size: 15px; line-height: 1.5; color: #5a5346; margin: 12px 0 0; } + .news-foot { display: flex; align-items: center; justify-content: flex-end; padding-top: 16px; } .meta { font-size: 12px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; } /* divider sets the secondary "feed" link apart as its own thing */ .news-div { border: none; border-top: 1px solid #e6d9bf; margin: 14px 0 12px; } @@ -526,9 +525,10 @@ @media (max-width: 860px) { .bento { grid-template-columns: minmax(0, 1fr); } /* minmax(0,…) so a wide child can't widen the page */ .news { grid-row: auto; } - /* phone: even shorter taste of the gist; tap through for the rest */ - .summary { -webkit-line-clamp: 3; line-clamp: 3; } - .news-foot { margin-top: 0; padding-top: 12px; } /* snug under the text, not a line's gap */ + /* phone: a short, clean 3-line taste (no fill/fade — the card is natural height here) */ + .summary-a { flex: none; -webkit-mask-image: none; mask-image: none; } + .summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } + .news-foot { padding-top: 12px; } /* snug under the text, not a line's gap */ } @media (max-width: 520px) { /* Art becomes an image-first card: the painting on top in a proper landscape frame