thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home3 News card: desktop gist fills to equal height (basis:0 fade), right never stretches

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 16:37:40 -04:00
parent 44610703c2
commit 79ecb800af
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+16 -16
View File
@@ -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