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

home3 joys: clamp all cards to WORD card's height (min-height 170, no squish); darken WOTD definition

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-22 11:57:26 -04:00
parent 772cb47d69
commit 8037e72f17
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+3 -2
View File
@@ -376,7 +376,8 @@
.arrow:hover { background: #fff; color: #9a7b3e; } .arrow:hover { background: #fff; color: #9a7b3e; }
.joys { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .joys { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* all cells share one compact height (tight, not crowded) so every rotation matches */ /* 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: 158px; box-sizing: border-box; } /* clamp every card to the WORD card's natural height (its tallest) so rotations never jump */
.joy { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 22px; min-height: 170px; box-sizing: border-box; }
.joy-in { position: relative; } /* content sits above the watermark */ .joy-in { position: relative; } /* content sits above the watermark */
.wm { position: absolute; font-family: 'Newsreader', Georgia, serif; line-height: 1; pointer-events: none; } .wm { position: absolute; font-family: 'Newsreader', Georgia, serif; line-height: 1; pointer-events: none; }
@@ -395,7 +396,7 @@
.joy .word { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: #2c3a48; } .joy .word { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: #2c3a48; }
.word-pos { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #7d93a8; } .word-pos { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #7d93a8; }
.word-pron { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #5f7791; margin: 2px 0 0; } .word-pron { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #5f7791; margin: 2px 0 0; }
.joy .def { font-size: 13.5px; color: #5c6b77; margin: 8px 0 0; line-height: 1.45; } .joy .def { font-size: 13.5px; color: #45535d; 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: #3e2c36; margin: 16px 0 0; } .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 { display: flex; align-items: center; gap: 9px; margin-top: 12px; }