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

home3: news image as tinted-matte framed plate (CD); Entertainment uses blurred teaser boxes (no play button) + non-video copy

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-22 12:22:14 -04:00
parent 1ffc9c6e92
commit 390bf5f43d
1 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+26 -16
View File
@@ -107,7 +107,9 @@
<main class="bento"> <main class="bento">
<!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor --> <!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor -->
<div class="card news"> <div class="card news">
<div class="news-photo" style={news?.image ? `background-image:url(${news.image})` : ''}></div> <div class="news-photo">
<div class="news-plate" style={news?.image ? `background-image:url(${news.image})` : ''}></div>
</div>
<div class="news-body"> <div class="news-body">
<span class="label" style="color:#0083ad">GOOD NEWS</span> <span class="label" style="color:#0083ad">GOOD NEWS</span>
<h2>{headline}</h2> <h2>{headline}</h2>
@@ -179,13 +181,13 @@
<span class="label" style="color:#3F9A66">ENTERTAINMENT</span> <span class="label" style="color:#3F9A66">ENTERTAINMENT</span>
<span class="soon">SOON</span> <span class="soon">SOON</span>
</div> </div>
<div class="moment-mid">
<span class="play-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="#3F9A66"><path d="M8 5v14l11-7z" /></svg>
</span>
<p class="moment-line">A little something to enjoy.</p> <p class="moment-line">A little something to enjoy.</p>
<div class="moment-thumbs" aria-hidden="true">
<div class="thumb t1"></div>
<div class="thumb t2"></div>
<div class="thumb t3"></div>
</div> </div>
<span class="moment-meta">Shows, clips, and curiosities. Coming soon.</span> <span class="moment-meta">Coloring, characters, and curiosities. Coming soon.</span>
</div> </div>
</div> </div>
</div> </div>
@@ -286,12 +288,18 @@
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); display: flex; flex-direction: column; box-shadow: 0 6px 20px -14px rgba(0, 131, 173, 0.4);
} }
/* contain on a warm matte so diagrams/figures sit whole (framed plate), never cropped /* soft tinted matte + white framed plate: figures sit whole with breathing room, like a
mid-label; photos get a soft matte border instead of bleeding to the edge */ framed plate (not pillarboxed). The image is contained inside the white plate. */
.news-photo { .news-photo {
aspect-ratio: 5/4; background-color: #f2ede3; aspect-ratio: 5/4; background: linear-gradient(160deg, #eaf2f3, #eef0ea);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.news-plate {
width: 100%; height: 100%; box-sizing: border-box; padding: 12px;
background-color: #fff; border: 1px solid #e7edee; border-radius: 8px;
box-shadow: 0 6px 18px -10px rgba(30, 60, 70, 0.28);
background-size: contain; background-position: center; background-repeat: no-repeat; background-size: contain; background-position: center; background-repeat: no-repeat;
border-bottom: 1px solid #efe7d8; background-origin: content-box;
} }
.news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; } .news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
.news h2 { .news h2 {
@@ -364,12 +372,14 @@
.moment { background: #E6F3E9; border: 1px solid #cee6d3; padding: 22px 24px; display: flex; flex-direction: column; } .moment { background: #E6F3E9; border: 1px solid #cee6d3; padding: 22px 24px; display: flex; flex-direction: column; }
.moment-top { display: flex; align-items: center; justify-content: space-between; } .moment-top { display: flex; align-items: center; justify-content: space-between; }
.soon { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #3F9A66; background: #fff; border-radius: 999px; padding: 3px 8px; } .soon { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #3F9A66; background: #fff; border-radius: 999px; padding: 3px 8px; }
/* centered empty-state: faint play-glyph + tagline fill the space, caption at the foot */ /* soft blurred teaser thumbnails fill the space (placeholder for what's coming) */
.moment-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .moment-line { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.3; color: #214a35; margin: 11px 0 14px; }
.play-glyph { width: 46px; height: 46px; border-radius: 50%; background: rgba(63, 154, 102, 0.14); display: flex; align-items: center; justify-content: center; } .moment-thumbs { flex: 1; display: flex; gap: 8px; min-height: 64px; }
.play-glyph svg { width: 18px; height: 18px; margin-left: 2px; } .thumb { flex: 1; border-radius: 9px; filter: blur(1px); opacity: 0.8; }
.moment-line { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.3; color: #214a35; margin: 0; } .thumb.t1 { background: linear-gradient(135deg, #bfe0cb, #9cc9ad); }
.moment-meta { padding-top: 16px; font-size: 13px; color: #6f9683; text-align: center; } .thumb.t2 { background: linear-gradient(135deg, #cfe2d4, #a9d2b8); }
.thumb.t3 { background: linear-gradient(135deg, #bdddc7, #92c4a4); }
.moment-meta { margin-top: 14px; font-size: 13px; color: #6f9683; }
/* "small joys" rail — little jewels: one big focal point per card, a faint oversized /* "small joys" rail — little jewels: one big focal point per card, a faint oversized
watermark glyph, an accent-tag label, soft diagonal gradient + long low shadow. */ watermark glyph, an accent-tag label, soft diagonal gradient + long low shadow. */