diff --git a/assets/btn_start.png b/assets/btn_start.png index 1a8f0a7..2766bb6 100644 Binary files a/assets/btn_start.png and b/assets/btn_start.png differ diff --git a/assets/btn_tut.png b/assets/btn_tut.png index 2184258..f4ebc06 100644 Binary files a/assets/btn_tut.png and b/assets/btn_tut.png differ diff --git a/index.html b/index.html index a3032d9..c76e859 100644 --- a/index.html +++ b/index.html @@ -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 @@ - +