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

home3 news: summary clickable (->article); drop Read-article underline, add divider before Read-more-good-news

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-22 14:48:04 -04:00
parent de53873b4f
commit 147701e7dc
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+15 -8
View File
@@ -121,11 +121,14 @@
<div class="news-body">
<span class="label" style="color:#0083ad">GOOD NEWS</span>
<a class="headline-a" href={news?.id ? `/a/${news.id}` : '/'}><h2>{headline}</h2></a>
<p class="summary">{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}</p>
<a class="summary-a" href={news?.id ? `/a/${news.id}` : '/'}>
<p class="summary">{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}</p>
</a>
<div class="news-foot">
<a class="link news-link" href={news?.id ? `/a/${news.id}` : '/'}>Read article</a>
<span class="meta">3 min read</span>
</div>
<hr class="news-div" />
<a class="news-more" href="/">Read more good news →</a>
</div>
</div>
@@ -331,18 +334,22 @@
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 */
.summary {
font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0;
flex: 1 1 auto; min-height: 0; 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);
}
.summary { font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0; }
.news-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.news-link { color: var(--teal); border-bottom: 2px solid #6fc4d8; text-decoration: none; }
.news-link { color: var(--teal); text-decoration: none; }
.news-link:hover { text-decoration: underline; }
.meta { font-size: 12px; color: var(--muted); }
/* secondary link: straight to the full brief, without reading the highlighted article */
.news-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
/* divider sets the secondary "feed" link apart as its own thing */
.news-div { border: none; border-top: 1px solid var(--news-border); margin: 14px 0 12px; }
.news-more { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.news-more:hover { color: var(--teal); }
.news-more:hover { color: var(--teal); }
/* Daily Art — wide, text left + artwork swatch right */