diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index 1601a2a..f92731e 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -343,9 +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 — tall, photo on top */ + /* 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. */ .news { - background: #fff; border: 1px solid var(--news-border); + background: #fff; border: 1px solid var(--news-border); align-self: start; 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) */ @@ -526,7 +528,7 @@ .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: 14px; } /* natural height here, so just a normal gap */ + .news-foot { margin-top: 0; 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