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

/play Bloom motif: center the flower vertically above the title (match other tiles)

Browse Source 
Bloom used a hardcoded % anchor so it read top-heavy with a gap below. Wrap the
petals in a fixed-size .bloom-ring and flex-center it in the space above the foot
(padding-bottom clears the title) — robust, no guessed percentage.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-25 20:41:10 -04:00
parent 60a1b50376
commit a74a363728
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/play/+page.svelte
+15 -10
View File
@@ -327,9 +327,11 @@
{#if !bloomBlocked}
<button class="tile tile-bloom" onclick={() => openGame('bloom')}>
<span class="motif m-bloom" aria-hidden="true">
<span class="petal pc">T</span>
<span class="petal p1">A</span><span class="petal p2">E</span><span class="petal p3">G</span>
<span class="petal p4">L</span><span class="petal p5">R</span><span class="petal p6">Y</span>
<span class="bloom-ring">
<span class="petal pc">T</span>
<span class="petal p1">A</span><span class="petal p2">E</span><span class="petal p3">G</span>
<span class="petal p4">L</span><span class="petal p5">R</span><span class="petal p6">Y</span>
</span>
</span>
<span class="foot">
<span class="t-name">Bloom{#if isDevGated('bloom')}<span class="devtag">dev</span>{/if}</span>
@@ -538,14 +540,17 @@
.m-ws { padding: 12px 16px 66px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: center; }
.wc { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
.wc.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 7px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12); }
/* flex-center the flower in the space above the title (padding-bottom clears the foot) */
.m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 64px; box-sizing: border-box; }
.bloom-ring { position: relative; width: 150px; height: 150px; }
.m-bloom .petal { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }
.m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 37%; transform: translate(-50%, -50%); }
.m-bloom .p1 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(0, -56px); }
.m-bloom .p2 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(48px, -28px); }
.m-bloom .p3 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(48px, 28px); }
.m-bloom .p4 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(0, 56px); }
.m-bloom .p5 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(-48px, 28px); }
.m-bloom .p6 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(-48px, -28px); }
.m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.m-bloom .p1 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, -56px); }
.m-bloom .p2 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(48px, -28px); }
.m-bloom .p3 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(48px, 28px); }
.m-bloom .p4 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, 56px); }
.m-bloom .p5 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-48px, 28px); }
.m-bloom .p6 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-48px, -28px); }
.m-match { padding: 18px 22px 66px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: center; }
.mm { width: 50px; height: 50px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.mm.flip { background: #fff; }