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; 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; 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; /* Just a taste of the gist — it's already a summary, so clamp to a few lines and let the
it's also a link to the article (whole content block clickable) */ reader click through. Keeping it short also stops the News card from being the tallest
.summary-a { thing on the page (which was stretching the right column and spreading its cards). */
flex: 1 1 auto; min-height: 0; overflow: hidden; display: block; text-decoration: none; color: inherit; .summary-a { display: block; text-decoration: none; color: inherit; }
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.1em), transparent); .summary {
mask-image: linear-gradient(to bottom, #000 calc(100% - 2.1em), transparent); 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; } /* 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; } .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; } .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 */ /* divider sets the secondary "feed" link apart as its own thing */
.news-div { border: none; border-top: 1px solid #e6d9bf; margin: 14px 0 12px; } .news-div { border: none; border-top: 1px solid #e6d9bf; margin: 14px 0 12px; }
@@ -523,9 +524,9 @@
@media (max-width: 860px) { @media (max-width: 860px) {
.bento { grid-template-columns: minmax(0, 1fr); } /* minmax(0,…) so a wide child can't widen the page */ .bento { grid-template-columns: minmax(0, 1fr); } /* minmax(0,…) so a wide child can't widen the page */
.news { grid-row: auto; } .news { grid-row: auto; }
/* single column = natural card height, so the gist is never truncated; drop the /* phone: even shorter taste of the gist; tap through for the rest */
bottom fade (it would otherwise dim the final line for no reason) */ .summary { -webkit-line-clamp: 3; line-clamp: 3; }
.summary-a { -webkit-mask-image: none; mask-image: none; flex: 0 1 auto; } .news-foot { margin-top: 14px; } /* natural height here, so just a normal gap */
} }
@media (max-width: 520px) { @media (max-width: 520px) {
/* Art becomes an image-first card: the painting on top in a proper landscape frame /* Art becomes an image-first card: the painting on top in a proper landscape frame