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:
parent
92822c1f6c
commit
652bf86f4a
3 changed files with 4 additions and 2 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue