style.css now has explicit breakpoints and primitives covering
the full target range:
- Global: overflow-x: hidden on body, max-width:100% on media,
fluid typography via clamp() so headings shrink on 320px.
- .wrap: 64rem cap at desktop, 72rem at 1440px, 96rem at 2560px;
generous side padding at large widths so text doesn't hug the
edge on huge monitors.
- .app-shell layout primitive (grid: sidebar + content [+ aside
on ultrawide]) ready for the eventual notes UI:
* mobile: single column, sidebar hidden behind a toggle
([data-sidebar="open"] reveals it).
* 768px+: 2-column with 16rem sidebar.
* 1024px+: 18rem sidebar.
* 1440px+: 20rem sidebar, content max-width 56rem so reading
lines don't grow unbounded.
* 2560px+: 3-column (sidebar | content | aside) so the
editor stays at reading width while the extra real estate
hosts backlinks/preview.
- .app-resize-handle with touch-action:none so pointer-event
drag handlers won't conflict with browser scrolling.
- Auth card tightens on viewports under 360px.
Result: no horizontal scroll at any width; content uses ultrawide
space effectively without sacrificing legibility.
Closes#18.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
libretechandClaude Opus 4.7
07b28133c8