From 703ea22e0b68d86d72ba7d9a303e752c88dfb1d6 Mon Sep 17 00:00:00 2001 From: jay Date: Mon, 22 Jun 2026 06:06:44 -0400 Subject: [PATCH] home3 Play card: center word search, balance gaps, full wordle visible Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/home3/+page.svelte | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index 2acefe0..4f6c2d8 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -241,8 +241,10 @@ .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). */ .play-band { position: relative; height: 124px; margin-top: 24px; overflow: hidden; } - .wb { position: absolute; top: 50%; left: -22px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; } + .wb { position: absolute; top: 50%; right: calc(50% + 78px); 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-g { background: #6bbf8c; } .wb-a { background: #E6A02C; } .wb-n { background: #d9c39a; } @@ -255,7 +257,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%; right: -20px; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 5px; } + .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 > 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; }