Only transmittal had any @media (max-width) rules; the other seven
tools silently break below ~900px. Adds a baseline shared rule that
every tool inherits — desktop-first stays the same, but a tablet in
landscape or a window split next to a document remains usable.
@media (max-width: 800px):
- tighter header padding + gaps
- .app-header__title drops 18px → 16px
- .build-timestamp inside .header-title-group hidden (it's
traceability info, not a primary affordance — still reachable
via help panel)
- header text buttons get a smaller padding so they fit
@media (max-width: 480px) phone-width:
- .app-header switches to column layout
- .header-left and .header-right each span full width with
justify-content: space-between
prefers-reduced-motion was already covered for the page-load stagger.
Each tool can still override in its own css/layout.css; this is the
shared floor.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| fonts | ||
| vendor | ||
| base.css | ||
| build-lib.sh | ||
| build-words.txt | ||
| favicon.svg | ||
| fonts.css | ||
| hash.js | ||
| help.js | ||
| logo.css | ||
| logo.js | ||
| nav.css | ||
| nav.js | ||
| preview-lib.js | ||
| theme.js | ||
| toast.css | ||
| toast.js | ||
| zddc-filter-test.html | ||
| zddc-filter.js | ||
| zddc-source.js | ||
| zddc-test.html | ||
| zddc.js | ||