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

home3: stop card stretch (independent right column, float not stretch); News gets two links (Read article + 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 08:59:10 -04:00
parent 5306c65c7b
commit 2e3cc5f382
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+18 -8
View File
@@ -5,7 +5,7 @@
// /home3 — the Claude Design "Frame A" direction (editorial, with colour), rebuilt in
// our codebase with our real logo + self-hosted fonts, wired to live data. Hidden
// prototype (noindex), alongside /home2 so we can compare.
let news = $state(null); // {title, summary, image}
let news = $state(null); // {id, title, summary, image}
let art = $state(null); // {title, artist, year, image}
onMount(async () => {
@@ -22,7 +22,7 @@
} catch { /* global brief */ }
try {
const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0];
if (it) news = { title: it.title, summary: it.summary || it.description || '', image: it.image_url || null };
if (it) news = { id: it.id, title: it.title, summary: it.summary || it.description || '', image: it.image_url || null };
} catch { /* fall back to design copy */ }
});
</script>
@@ -56,20 +56,22 @@
</section>
<main class="bento">
<!-- Good News (tall) -->
<a class="card news" href="/">
<!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor -->
<div class="card news">
<div class="news-photo" style={news?.image ? `background-image:url(${news.image})` : ''}></div>
<div class="news-body">
<span class="label" style="color:#0083ad">GOOD NEWS</span>
<h2>{news?.title ?? 'What went right this week: the good news that actually matters'}</h2>
<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>
<div class="news-foot">
<span class="link news-link">Read the good news</span>
<a class="link news-link" href={news?.id ? `/a/${news.id}` : '/'}>Read article</a>
<span class="meta">3 min read</span>
</div>
<a class="news-more" href="/">Read more good news →</a>
</div>
</a>
</div>
<div class="rightcol">
<!-- Daily Art (wide) -->
<a class="card art" href="/art">
<div class="art-body">
@@ -131,6 +133,7 @@
<span class="moment-meta">Breathing, sound &amp; stillness.</span>
</div>
</div>
</div>
</main>
<footer class="foot">upbeatBytes — no ads, no paywalls, no doomscrolling.</footer>
@@ -183,7 +186,11 @@
max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box;
padding: 0 clamp(18px, 5vw, 44px) 16px;
display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.82fr); gap: 18px;
align-items: start; /* columns size to content + float at top — never stretch */
}
/* right column is independent of the (taller) News card, so Art/Play/Moment keep their
natural size instead of stretching to match News */
.rightcol { display: flex; flex-direction: column; gap: 18px; }
.card {
border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease;
@@ -196,7 +203,7 @@
/* Good News — tall, photo on top */
.news {
grid-row: span 2; background: #fff; border: 1px solid var(--news-border);
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);
}
.news-photo { aspect-ratio: 5/4; background: linear-gradient(160deg, #6fc4d8, #9bd4c9 55%, #f6cf7e); background-size: cover; background-position: center; }
@@ -213,8 +220,11 @@
mask-image: linear-gradient(to bottom, #000 56%, transparent);
}
.news-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.news-link { color: var(--teal); border-bottom: 2px solid #6fc4d8; }
.news-link { color: var(--teal); border-bottom: 2px solid #6fc4d8; text-decoration: none; }
.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; }
.news-more:hover { color: var(--teal); }
/* Daily Art — wide, text left + artwork swatch right */
.art { background: #F3EEF9; border: 1px solid #e4d8f1; display: flex; min-height: 188px; }