wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Plaque polish: the goal line finds its gold (--warm never existed in CSS), the chevron centres, the name grows

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-29 16:41:52 +02:00
1 parent 3aaf2b9baf
commit 812bea3234
1 file changed
+11 -9
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11 -9
View File
@@ -352,27 +352,29 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
crest on the left, name over the big LEVEL · LEAGUE line beside it, the chevron on the
right; the bar runs the full width below and the goal line closes left-aligned. Translucent
surface, generous rows — the splash art, blood pool included, stays visible around it. */
#plaque { display: grid; column-gap: 14px; align-items: center; text-align: left;
grid-template-columns: auto 1fr auto;
grid-template-areas: "badge name chev" "badge lv chev" "bar bar bar" "goal goal goal";
#plaque { position: relative; display: grid; column-gap: 14px; align-items: center; text-align: left;
grid-template-columns: auto 1fr;
grid-template-areas: "badge name" "badge lv" "bar bar" "goal goal";
margin: 24px auto 0; width: min(330px, 92%); box-sizing: border-box;
padding: 18px 18px 15px; background: rgba(8, 14, 10, 0.48); border: 0;
padding: 18px 34px 15px 18px; background: rgba(8, 14, 10, 0.48); border: 0;
border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#plBadge { grid-area: badge; height: 54px; image-rendering: pixelated;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
#plName { grid-area: name; align-self: end; padding-bottom: 3px;
font: 700 10px Silkscreen, monospace; color: var(--cream); letter-spacing: 2px;
font: 700 13px Silkscreen, monospace; color: var(--cream); letter-spacing: 2px;
white-space: nowrap; overflow: hidden; }
#plLv { grid-area: lv; align-self: start; font: 400 26px Bangers, cursive; color: var(--acid);
letter-spacing: 1.5px; text-decoration: none; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
#plRow { grid-area: bar; display: block; width: auto; margin-top: 15px; }
/* NO nowrap here: the longest goal line is ~380px and a nowrap child sets the CARD's
min-content past the viewport — that was the phantom horizontal scrollbar Oliver spotted */
/* LITERAL gold — there is no --warm in the page palette (UI.warm is a CANVAS colour), and an
unresolvable var() painted this line black */
#plGoal { grid-area: goal; margin-top: 10px; font: 400 9px Silkscreen, monospace;
font-style: normal; color: var(--warm); letter-spacing: 1px;
font-style: normal; color: #e0cc72; letter-spacing: 1px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5); text-align: left; line-height: 1.6; }
#plaque em { grid-area: chev; font: 700 15px Silkscreen, monospace; font-style: normal;
color: var(--acid); }
#plaque em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font: 700 15px Silkscreen, monospace; font-style: normal; color: var(--acid); }
#plRow s, #cdBar s, #cdCareer s { flex: 1; height: 6px; background: rgba(255,255,255,0.10);
border: 1px solid var(--line); text-decoration: none; display: block; }
#cdBar s { height: 8px; }
@@ -895,6 +897,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
</div>
</div>
</div>
<script type="module" src="src/main.js?v=327"></script>
<script type="module" src="src/main.js?v=328"></script>
</body>
</html>