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

home3: consistent half-column bleed + equal-size side games on Play; FIX1 layout (fade-out gist, read-time meta, trimmed Art headline)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-22 06:33:57 -04:00
parent 703ea22e0b
commit 5306c65c7b
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+11 -9
View File
@@ -65,7 +65,7 @@
<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>
<span class="meta">Updated this morning</span>
<span class="meta">3 min read</span>
</div>
</div>
</a>
@@ -74,7 +74,7 @@
<a class="card art" href="/art">
<div class="art-body">
<span class="label" style="color:#8857C2">DAILY ART</span>
<h3>A masterwork a day, beautifully framed</h3>
<h3>A masterwork a day</h3>
<p class="art-today">
{#if art}Today: <span class="ital">{art.title}</span>{#if art.artist} — {art.artist}{/if}{#if art.year}, {art.year}{/if}.
{:else}Today: <span class="ital">Among the Sierra Nevada</span> — Bierstadt, 1868.{/if}
@@ -205,10 +205,12 @@
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: 3; line-clamp: 3; overflow: hidden;
}
/* keep the gist tidy so the bento stays balanced — full read lives on /news */
/* the gist fades out at the bottom (FIX 1) instead of a hard ellipsis — full read on /news */
.summary {
font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
max-height: 4.6em; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent);
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; }
@@ -241,12 +243,12 @@
.play-link { color: #A8650F; border-bottom: 2px solid #e0a94f; }
/* "bleeding boards" — three game motifs clipping at the card edges (decorative) */
/* Word search anchored dead-centre; wordle + match grid an equal distance on each side
(the ws panel is ~120px wide → 60px half + an 18px gutter = 78px offset from centre). */
/* Word search is the centred highlight; the two side games are the SAME size and each
bleeds ~half a column off its edge (consistent both sides) to imply "more under the hood". */
.play-band { position: relative; height: 124px; margin-top: 24px; overflow: hidden; }
.wb { position: absolute; top: 50%; right: calc(50% + 78px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.wb { position: absolute; top: 50%; left: -12px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.wb-row { display: flex; gap: 4px; }
.wb-t { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
.wb-t { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
.wb-g { background: #6bbf8c; } .wb-a { background: #E6A02C; } .wb-n { background: #d9c39a; }
.wb-e { background: #fff; border: 1.5px solid #ecca84; } .wb-d { background: #fff; border: 1.5px dashed #e0bb6f; }
.ws {
@@ -257,7 +259,7 @@
box-shadow: 0 5px 16px -8px rgba(210, 134, 27, 0.55);
}
.ws .hl { color: #B5701A; font-weight: 800; }
.mm { position: absolute; top: 50%; left: calc(50% + 78px); transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 5px; }
.mm { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 24px); grid-auto-rows: 24px; gap: 4px; }
.mm > span { border-radius: 6px; }
.mm-a { background: #E6A02C; }
.mm-w { background: #fff; border: 1.5px solid #f0d597; display: flex; align-items: center; justify-content: center; }