Pages: no horizontal overflow at 360px; trial hint names the play-both rule

Browser check (headless Chromium, 2026-11-10) found the dings page scrolling
to 846px and the playground to 381px at a 360px viewport, and the trial's
Next button staying disabled until both sounds are played while the hint
did not say so. Tables scroll inside themselves on narrow screens, the
playground select and labels may shrink, and the hint says to play both.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Aqua 2026-11-10 22:12:32 +00:00
commit 652bf86f4a
3 changed files with 4 additions and 2 deletions

View file

@ -5,8 +5,10 @@ main { max-width:1200px; margin:0 auto; padding:24px; }
.eyebrow { margin:0; color:var(--acc); text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
h1 { margin:.1em 0 .2em; } h2 { font-size:16px; margin:0 0 8px; } small { color:var(--dim); font-weight:400; }
.lede { color:var(--dim); max-width:70ch; }
.bar label { min-width:0; max-width:100%; }
.bar { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; padding:12px 0; border-block:1px solid var(--line); margin-bottom:16px; }
button, select { background:#10242b; color:var(--fg); border:1px solid var(--line); padding:6px 14px; border-radius:4px; font:inherit; }
select { max-width:100%; }
button:hover { border-color:var(--acc); } button:disabled { opacity:.4; }
#status { color:var(--dim); }
.cols { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.4fr); gap:24px; }

View file

@ -35,7 +35,7 @@
</div>
<button id="stop" type="button">Stop</button>
<button id="next" type="button" disabled>Next</button>
<p class="hint">Rate both sounds and give each exactly one word (no spaces) to continue. You can replay as often as you like.</p>
<p class="hint">Play both sounds at least once, rate both and give each exactly one word (no spaces) to continue. You can replay as often as you like.</p>
</section>
<section id="done" hidden>

View file

@ -70,7 +70,7 @@ page = f'''<!doctype html>
body{{margin:0 auto;max-width:60rem;padding:1rem;font:1.05rem/1.5 system-ui,sans-serif;color:var(--fg);background:var(--bg)}}
h1{{font-size:1.5rem}}h2{{font-size:1.2rem;margin-top:2rem}}h3{{font-size:1.05rem}}.sub{{font-size:.9rem;color:var(--mut);font-weight:400}}
.notice{{border:2px solid var(--acc);padding:.75rem 1rem;border-radius:.4rem}}.caption{{margin:.25rem 0 .75rem}}
table{{border-collapse:collapse;width:100%}}th,td{{border-top:1px solid var(--line);padding:.4rem .5rem;text-align:left;vertical-align:top}}
table{{border-collapse:collapse;width:100%}}@media (max-width:40rem){{table{{display:block;overflow-x:auto}}}}th,td{{border-top:1px solid var(--line);padding:.4rem .5rem;text-align:left;vertical-align:top}}
audio{{width:100%;min-width:10rem}}img{{max-width:100%;height:auto;width:48%}}figure{{margin:1rem 0}}a,summary{{color:var(--acc)}}:focus-visible{{outline:3px solid var(--acc);outline-offset:2px}}.sr{{position:absolute;left:-9999px}}label{{display:block;margin:.5rem 0}}
</style></head><body>
<header><h1>Ratatoskr dings: what changed after v3 (v4)</h1>