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

home3 News card: clamp the gist (3 lines mobile / 4 desktop), pin Read-more bottom

Browse Source 
It's already a summary, so show only a taste and let the reader click through.
This also stops the News card being the tallest element, which had stretched the
right column and spread its cards — they pack naturally again. Footer (brief ·
read-more) pinned to the card bottom via margin-top:auto.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 16:07:05 -04:00
parent 8dc22afbdc
commit 376f6263fd
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+12 -11
View File
@@ -374,15 +374,16 @@
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;
}
/* the gist FILLS the room available (the card runs tall), fading only at the very bottom;
it's also a link to the article (whole content block clickable) */
.summary-a {
flex: 1 1 auto; min-height: 0; overflow: hidden; display: block; text-decoration: none; color: inherit;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.1em), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 2.1em), transparent);
/* 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;
}
.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: 18px; }
/* 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; }
.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; }
@@ -523,9 +524,9 @@
@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; }
/* single column = natural card height, so the gist is never truncated; drop the
bottom fade (it would otherwise dim the final line for no reason) */
.summary-a { -webkit-mask-image: none; mask-image: none; flex: 0 1 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 */
}
@media (max-width: 520px) {
/* Art becomes an image-first card: the painting on top in a proper landscape frame