Turn the theme up, and let START GAME catch the light

Menu theme 0.5 -> 0.65.

The gold frame comes off START GAME — both buttons share the one slate border
now, so the pair reads as a pair, and a light sweeps across the START plate
instead: over in ~0.8s, then still for the rest of a 4.5s cycle. The sweep is a
::after with pointer-events:none so it can never eat the tap, and it is off
under prefers-reduced-motion.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Opus 5 committed 2026-08-01 17:44:21 +02:00
1 parent d3aabc4bd6
commit b23a3a8aaf
2 files changed
+15 -4

No files matched your search

+14 -3
View File
@@ -97,7 +97,18 @@
.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; }
/* No gold frame on START any more — the sweep below is what draws the eye, and the two buttons
now share one border so the pair reads as a pair. */
.btn.plate { background-image: url('assets/btn_start.png?v=94'); color: #f7ecb8;
border-color: #3b4354; position: relative; overflow: hidden; }
/* a light passing over the sign: across in ~0.8s, then still for the rest of the cycle.
pointer-events:none so the sweep can never eat the tap. */
.btn.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.34) 50%,
transparent 58%);
transform: translateX(-140%); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-140%); } 18%, 100% { transform: translateX(140%); } }
@media (prefers-reduced-motion: reduce) { .btn.plate::after { animation: none; opacity: 0; } }
.btn.plate2 { background-image: url('assets/btn_tut.png?v=94'); color: #d6dfec; }
.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
@@ -139,7 +150,7 @@
<div id="splash">
<img class="logo" src="assets/logo.png" alt="Splatter Tennis">
<p class="slogan">Fifteen. Thirty. Forty. <b>Dead.</b></p>
<button class="btn go plate" id="mStart">START GAME</button>
<button class="btn plate" id="mStart">START GAME</button>
<button class="btn plate2" id="mTut">TUTORIAL</button>
<p id="build"></p>
</div>
@@ -168,6 +179,6 @@
</div>
</div>
</div>
<script type="module" src="main.js?v=95"></script>
<script type="module" src="main.js?v=96"></script>
</body>
</html>