From 8037e72f1737455efd41334cc2ac284c18c13efc Mon Sep 17 00:00:00 2001 From: jay Date: Mon, 22 Jun 2026 11:57:26 -0400 Subject: [PATCH] home3 joys: clamp all cards to WORD card's height (min-height 170, no squish); darken WOTD definition Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/home3/+page.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index d8ad3b8..705cca3 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -376,7 +376,8 @@ .arrow:hover { background: #fff; color: #9a7b3e; } .joys { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* 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 */ .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; } .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; } - .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; } .attrib { display: flex; align-items: center; gap: 9px; margin-top: 12px; }