Scales with viewport instead of capping at a fixed px value. svmin (small-viewport min) rather than plain vmin - plain viewport units recalculate as mobile Safari's address bar hides/shows on scroll, which would reflow every text size mid-scroll; svmin stays pinned to the smallest viewport state, matching the stability .hero-yes already gets from 100svh.
This commit is contained in:
+11
-1
@@ -45,6 +45,17 @@
|
||||
--sans: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
|
||||
|
||||
--radius: 1.1rem;
|
||||
|
||||
/* responsive base size: scales with viewport (2.1svmin) on top of a
|
||||
fixed floor (3pt) so it keeps growing on large/wide screens
|
||||
instead of capping at a fixed px value like the old 17px did;
|
||||
max(12px, ...) keeps it from shrinking below legible on tiny
|
||||
viewports. svmin (small-viewport min), not plain vmin - plain vh
|
||||
-based units recalculate as mobile Safari's address bar
|
||||
hides/shows on scroll, which would reflow every text size on the
|
||||
page mid-scroll; svmin stays fixed to the smallest viewport state,
|
||||
same stability .hero-yes already gets from 100svh below. */
|
||||
font-size: max(12px, calc(2.1svmin + 3pt));
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -55,7 +66,6 @@ html, body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user