style(ui): one look for every button, and a sound button that is its icon

aebcad7b14e8a31a304539a8f5da1162e2aebc9a · Pavel Safronov · 2026-10-10 09:04:18 -0700 · parents 0045befdc5e8

Claude Code usage: this commit ~23.4K out / ~13.4M cached · cost unknown (no per-model trailer) · session 1 tally 1.1K in / 909.8K out / 139.0M cached · usage by commit and session

style(ui): one look for every button, and a sound button that is its icon

About, Settings and Randomize had no ring and were hard to see against
a night sky. Every button is now dark, ringed in white, and the same
height. The sound button is a speaker, or a speaker struck through,
with its words kept for screen readers and the tooltip; narrower, it
leaves room for the other three on one row on a phone.

Usage: 1.1K in / 909.8K out / 139M cached (session tally)
rtk:   1.7M saved, 25.3% over 2682 cmds (global/lifetime)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

 src/main.ts   |  5 ++++-
 src/style.css | 27 ++++++++++++++-------------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 3897f4a..adfda40 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -146,7 +146,10 @@ const sounding = (): boolean => audio?.state === 'running'
 
 function showSound(): void {
   const on = audio !== null && !muted
-  soundButton.textContent = on ? '🔊 Sound on' : muted ? '🔇 Sound off' : '🔇 Tap for sound'
+  // The picture says which way it is set; the words are for whoever cannot see it.
+  soundButton.textContent = on ? '🔊' : '🔇'
+  soundButton.setAttribute('aria-label', on ? 'Sound on' : muted ? 'Sound off' : 'Tap for sound')
+  soundButton.title = soundButton.getAttribute('aria-label')!
   soundButton.setAttribute('aria-pressed', String(on))
   soundButton.classList.toggle('on', on)
 }
diff --git a/src/style.css b/src/style.css
index 6a96409..57a44b9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -56,18 +56,20 @@ body {
   transition: opacity 0.25s 0.15s;
 }
 
-/* Big, in a corner, and saying in words which way it is set. */
+/* Every button on the lake is the same button: dark, ringed in white so that it shows
+   against a night sky as well as a day one, and white all through when it is on. */
 #sound {
   position: fixed;
   top: calc(0.75rem + env(safe-area-inset-top));
   right: calc(0.75rem + env(safe-area-inset-right));
-  min-height: 3.25rem;
-  padding: 0 1.1rem;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
   border: 2px solid #fff;
-  border-radius: 2rem;
+  border-radius: 50%;
   background: rgb(8 24 34 / 85%);
   color: #fff;
-  font: 600 1.05rem/1 system-ui, sans-serif;
+  font: 600 1.2rem/1 system-ui, sans-serif;
   /* A tap on it is a tap, not the start of a drag or a double-tap zoom. */
   touch-action: manipulation;
   cursor: pointer;
@@ -78,14 +80,13 @@ body {
   color: #06202c;
 }
 
-/* The way to the README and the source: there, but smaller than the sound button. */
+/* About, Settings and Randomize. */
 #links {
   position: fixed;
   top: calc(0.75rem + env(safe-area-inset-top));
   left: calc(0.75rem + env(safe-area-inset-left));
-  /* Beside the sound button where there is the width for it, and wrapping under
-     themselves, not it, where there is not. */
-  max-width: calc(100vw - 14rem);
+  /* Beside the sound button, and wrapping under themselves, not it, should they not fit. */
+  max-width: calc(100vw - 5rem);
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -115,11 +116,11 @@ body {
   place-items: center;
   min-height: 2.75rem;
   padding: 0 0.9rem;
-  border: 0;
+  border: 2px solid #fff;
   border-radius: 2rem;
-  background: rgb(8 24 34 / 70%);
+  background: rgb(8 24 34 / 85%);
   color: #fff;
-  font: 500 0.95rem/1 system-ui, sans-serif;
+  font: 600 0.95rem/1 system-ui, sans-serif;
   text-decoration: none;
   touch-action: manipulation;
   cursor: pointer;
@@ -243,7 +244,7 @@ dialog button.done {
   }
 }
 
-/* Steering by tilt, on or off: the sound button's smaller cousin, at the foot of the screen. */
+/* Steering by tilt, on or off, at the foot of the screen. */
 #tilt-button {
   position: fixed;
   left: calc(0.75rem + env(safe-area-inset-left));