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

Give the menu buttons room, a frame, and bigger type

Browse Source 
The logo now sits exactly as it does on the title screen — same width, no menu
override — with 30px under it so the blood running off its bottom edge stops
touching the first button.

That button also had no top border to cut into: the crop was a BOTTOM band of a
taller plate, so it carried the plate's bottom border and nothing above. Both
plates are cropped to their interior now and CSS draws one consistent frame on
each, gold for START and slate for TUTORIAL.

Lettering stays live text and goes to 15px with wider tracking.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Opus 5 committed 2026-08-01 14:25:54 +02:00
1 parent 4a034773aa
commit 2d4fa79258
3 files changed
+12 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+12 -9
View File
@@ -93,15 +93,18 @@
font: 400 12px Silkscreen, monospace; letter-spacing: 1px; cursor: pointer;
-webkit-tap-highlight-color: transparent; }
.btn.go { border-color: #e0cc72; color: #e0cc72; }
/* The two menu buttons wear generated plates. The LETTERING stays Silkscreen on top rather than
/* The two menu buttons wear generated plates. The LETTERING stays live text on top rather than
being drawn into the art: generated type is a lottery and would not match the rest of the HUD.
A text-shadow is what keeps it readable where a drip runs behind it. */
.btn.plate, .btn.plate2 { border: none; padding: 16px 10px; background-size: 100% 100%;
background-repeat: no-repeat; image-rendering: pixelated;
text-shadow: 0 2px 0 rgba(0,0,0,0.85); }
.btn.plate { background-image: url('assets/btn_start.png?v=92'); color: #f4e6a6; }
.btn.plate2 { background-image: url('assets/btn_tut.png?v=92'); color: #cfd8e6; }
#menu .logo { width: min(280px, 70vw); margin-bottom: 22px; }
A text-shadow is what keeps it readable where a drip runs behind it. The border is CSS, not
art — the plate crops are interior-only, so both buttons get the same clean frame. */
.btn.plate, .btn.plate2 { padding: 15px 10px; font-size: 15px; letter-spacing: 2px;
background-size: 100% 100%; background-repeat: no-repeat;
image-rendering: pixelated; text-shadow: 0 2px 0 rgba(0,0,0,0.9); }
.btn.plate { background-image: url('assets/btn_start.png?v=94'); color: #f7ecb8; }
.btn.plate2 { background-image: url('assets/btn_tut.png?v=94'); color: #d6dfec; }
/* the logo sits exactly as it does on the title screen — same width, and enough room under it that
the blood running off its bottom edge never touches the first button */
#menu .logo { margin-bottom: 30px; }
.btn.back { font-size: 10px; padding: 9px 10px; color: #8a96ab; }
/* a row, not a stacked tile: three 3:2 tiles stacked fill a phone twice over, and the art still
reads at this size. -webkit-tap-highlight-color kills iOS's blue flash over the pixel art. */
@@ -180,6 +183,6 @@
</div>
</div>
</div>
<script type="module" src="main.js?v=93"></script>
<script type="module" src="main.js?v=94"></script>
</body>
</html>