Scale the layout with a fluid rem root, and theme the scrollbars - #83
Open
rdehnhardt wants to merge 1 commit into
Open
Scale the layout with a fluid rem root, and theme the scrollbars#83rdehnhardt wants to merge 1 commit into
rdehnhardt wants to merge 1 commit into
Conversation
The design is already rem-based end to end, so a single fluid root scales
type, spacing, radii and the blueprint grid together:
html { font-size: clamp(1rem, 0.8889vw, 2.8rem) }
Below 1800px the floor holds the root at 1rem and the rendering is
pixel-identical to before; above it everything grows with the viewport.
At 2560px the railed container goes from 1536px to 2185px instead of
leaving a third of the screen empty. Breakpoints are unaffected — `rem`
in a media query resolves against the initial font size, so sm:/lg: still
fire at 640/1024 CSS px.
Values that must track the root are converted on a 16px basis: the
--text-* tokens, the hero H1 clamps, the 56px blueprint grid and its beam
script, .crosshair, and --line-height on code snippets. Decorative pixel
values stay in px.
The docs sidebar, the partners rail and the landing tab bar also lost
their unstyled native scrollbars. Page scroll is a thin rose-500 thumb;
the navigation rails use .scrollbar-ghost, transparent until hovered.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The design is already rem-based end to end, so a single fluid root scales type, spacing, radii and the blueprint grid together:
Below 1800px the floor holds the root at 1rem and the rendering is pixel-identical to before; above it everything grows with the viewport. At 2560px the railed container goes from 1536px to 2185px instead of leaving a third of the screen empty. Breakpoints are unaffected —
remin a media query resolves against the initial font size, so sm:/lg: still fire at 640/1024 CSS px.Values that must track the root are converted on a 16px basis: the --text-* tokens, the hero H1 clamps, the 56px blueprint grid and its beam script, .crosshair, and --line-height on code snippets. Decorative pixel values stay in px.
The docs sidebar, the partners rail and the landing tab bar also lost their unstyled native scrollbars. Page scroll is a thin rose-500 thumb; the navigation rails use .scrollbar-ghost, transparent until hovered.