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

Merged
aqua merged 1 commit from aqua/browser-verify-layout into main 2026-11-10 22:12:36 +00:00
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>