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

home3: small-joys equal height + trimmed spacing + fresh palette (sky/rose/clay); news summary fills the room

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-22 11:11:09 -04:00
parent 89352e7123
commit e38081733d
1 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+28 -25
View File
@@ -18,7 +18,7 @@
let headline = $derived(clampWords(news?.title ?? 'What went right this week: the good news that actually matters'));
// small-joys shelf: 3 cells shown two at a time, rotated by the reader (no auto-motion)
const JOY_ACCENTS = ['#D2861B', '#8857C2', '#3F9A66'];
const JOY_ACCENTS = ['#4f7da8', '#b06a86', '#b06a45'];
let joyIdx = $state(0);
const prevJoy = () => (joyIdx = (joyIdx + 2) % 3);
const nextJoy = () => (joyIdx = (joyIdx + 1) % 3);
@@ -287,14 +287,14 @@
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 fades out at the bottom (FIX 1) instead of a hard ellipsis — full read on /news */
/* 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;
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);
flex: 1 1 auto; min-height: 0; overflow: hidden;
-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);
}
.news-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.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; }
.meta { font-size: 12px; color: var(--muted); }
/* secondary link: straight to the full brief, without reading the highlighted article */
@@ -375,36 +375,39 @@
}
.arrow:hover { background: #fff; color: #9a7b3e; }
.joys { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.joy { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 24px; }
/* all cells share one compact height (tight, not crowded) so every rotation matches */
.joy { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 22px; min-height: 168px; box-sizing: border-box; }
.joy-in { position: relative; } /* content sits above the watermark */
.wm { position: absolute; font-family: 'Newsreader', Georgia, serif; line-height: 1; pointer-events: none; }
.joy-word { background: linear-gradient(165deg, #FBF3E2, #F6EAD2); border: 1px solid #ecdcbb; box-shadow: 0 10px 30px -22px rgba(120, 85, 20, 0.6); --accent: #bd8f33; --rule: #D2861B; }
.joy-word .wm { right: -14px; bottom: -30px; font-size: 150px; font-weight: 400; color: rgba(193, 150, 60, 0.09); }
.joy-quote { background: linear-gradient(165deg, #F2ECF9, #E9E0F4); border: 1px solid #ddd0ee; box-shadow: 0 10px 30px -22px rgba(90, 60, 140, 0.6); --accent: #8857C2; --rule: #8857C2; }
.joy-quote .wm { left: 14px; top: -26px; font-size: 120px; color: rgba(136, 87, 194, 0.16); }
.joy-fact { background: linear-gradient(165deg, #E9F4EB, #DCEDDF); border: 1px solid #cee6d3; box-shadow: 0 10px 30px -22px rgba(40, 120, 75, 0.55); --accent: #3F9A66; --rule: #3F9A66; }
/* a fresh trio, distinct from the doors above (teal/plum/amber/green): sky · rose · clay */
.joy-word { background: linear-gradient(165deg, #EAF2F9, #DBE8F4); border: 1px solid #d2e1f0; box-shadow: 0 10px 30px -22px rgba(60, 100, 145, 0.55); --accent: #4f7da8; --rule: #4f7da8; }
.joy-word .wm { right: -14px; bottom: -30px; font-size: 150px; font-weight: 400; color: rgba(79, 125, 168, 0.13); }
.joy-quote { background: linear-gradient(165deg, #F9EDF1, #F1DEE6); border: 1px solid #eed6df; box-shadow: 0 10px 30px -22px rgba(150, 85, 115, 0.5); --accent: #b06a86; --rule: #b06a86; }
.joy-quote .wm { left: 14px; top: -26px; font-size: 120px; color: rgba(176, 106, 134, 0.16); }
.joy-fact { background: linear-gradient(165deg, #F7EAE1, #EFDACB); border: 1px solid #ecd5c4; box-shadow: 0 10px 30px -22px rgba(150, 90, 55, 0.5); --accent: #b06a45; --rule: #b06a45; }
.tag { display: flex; align-items: center; gap: 8px; }
.tag .rule { width: 18px; height: 2px; border-radius: 2px; background: var(--rule); }
.tag-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.word-line { margin: 14px 0 0; display: flex; align-items: baseline; gap: 9px; }
.joy .word { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 32px; letter-spacing: -0.01em; color: #3a2f1c; }
.word-pos { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #b39a64; }
.word-pron { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #b39a64; margin: 3px 0 0; }
.joy .def { font-size: 13.5px; color: #6b5d44; margin: 12px 0 0; line-height: 1.5; }
.word-line { margin: 10px 0 0; display: flex; align-items: baseline; gap: 9px; }
.joy .word { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 32px; letter-spacing: -0.01em; color: #2c3a48; }
.word-pos { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #8298ad; }
.word-pron { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #8298ad; margin: 3px 0 0; }
.joy .def { font-size: 13.5px; color: #5c6b77; margin: 8px 0 0; line-height: 1.45; }
.joy .quote { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.3; color: #2f2240; margin: 26px 0 0; }
.attrib { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.attrib-rule { width: 22px; height: 1px; background: #b69ad8; }
.attrib-by { font-family: 'Newsreader', Georgia, serif; font-size: 13px; color: #7c64a0; }
.joy .quote { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.3; color: #3e2c36; margin: 16px 0 0; }
.attrib { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.attrib-rule { width: 22px; height: 1px; background: #d8afc1; }
.attrib-by { font-family: 'Newsreader', Georgia, serif; font-size: 13px; color: #97667f; }
.joy-fact .joy-top { display: flex; align-items: center; justify-content: space-between; }
.fact-hero { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; }
.year { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 30px; color: #1e5b3b; line-height: 0.9; }
.onthis { font-size: 11px; color: #6f9683; letter-spacing: 0.04em; }
.joy .fact { font-family: 'Newsreader', Georgia, serif; font-size: 16px; color: #214a35; margin: 10px 0 0; line-height: 1.34; }
.joy-fact .soon { color: #b06a45; }
.fact-hero { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; }
.year { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 30px; color: #7a4a30; line-height: 0.9; }
.onthis { font-size: 11px; color: #9e7a64; letter-spacing: 0.04em; }
.joy .fact { font-family: 'Newsreader', Georgia, serif; font-size: 16px; color: #5e4636; margin: 8px 0 0; line-height: 1.34; }
.foot {
text-align: center; max-width: 1180px; width: 100%; margin: 14px auto 0; box-sizing: border-box;