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;
|
--sans: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
|
||||||
|
|
||||||
--radius: 1.1rem;
|
--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; }
|
* { box-sizing: border-box; }
|
||||||
@@ -55,7 +66,6 @@ html, body {
|
|||||||
background: var(--paper);
|
background: var(--paper);
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-family: var(--sans);
|
font-family: var(--sans);
|
||||||
font-size: 17px;
|
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user