Render the web site at 110% by default
The operator reads the site at 110% browser zoom; make that the default
scale. Tailwind v4 utilities are rem-based, so `html { font-size:110% }`
scales type, spacing, columns and controls together the way zoom does,
while media queries keep firing at the same viewport widths.
Things that did not scale with the root size and had to move:
- the `lg` reader grid is now 15rem + gap-x-8 (was 16rem + gap-x-10) so
the TOC sidebar and the 68ch article still fit at 1024-1100px;
- the TOC reveal margin in app.js is 1.5rem of the computed root size
instead of a fixed 24px, and the run funnel SVG height is `h-3`;
- long unbreakable tokens on the phone-width dashboard (settings group
ids and headings, config warnings, run warnings) now wrap with
`overflow-wrap:anywhere`, and the feed candidates table sits in the
same `.scroll-x` wrapper as the other dashboard tables. Overview and
feeds already overflowed a 390px viewport before this change; settings
started to. All three fit now.
Verified with before/after screenshots of 27 pages at 390-1440px on the
seeded dev database: no page body scrolls horizontally, the reader
layout, TOC sidebar and dashboard match the old 110%-zoom rendering.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VXYGBPoHZSDSfE5WcJ9bvj
This commit is contained in:
1 parent
b02e1c7b8c
commit
c707f432f2
11 files changed
+17
-15
No files matched your search
@@ -114,7 +114,8 @@
|
||||
|
||||
@layer base {
|
||||
[hidden] { display:none !important; }
|
||||
html { @apply bg-paper text-ink antialiased; }
|
||||
/* Match the site's preferred 110% browser-zoom reading scale by default. */
|
||||
html { font-size:110%; @apply bg-paper text-ink antialiased; }
|
||||
body { @apply m-0 min-h-screen bg-paper font-serif text-[1.0625rem] leading-[1.65] text-ink; font-optical-sizing:auto; }
|
||||
::selection { background:color-mix(in oklab, var(--accent) 24%, transparent); }
|
||||
a { @apply text-accent decoration-rule underline-offset-4 transition-colors duration-150 hover:text-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-paper; }
|
||||
|
||||
Reference in new issue
Block a user