Give the pages room down both sides - #56
Merged
Merged
Conversation
Material gives the content box no horizontal padding of its own, so on a wide window the prose began exactly where the navigation ended and the landing page ran to within sixteen pixels of the bezel. Sixteen pixels is a floor for a phone, which is what stops text touching the glass, and it had been standing in for a margin on every screen there is. The gutter grows with the window now: nothing extra on a phone, where Material already gives the box a margin and adding to it stacked two of them and took the line down to two hundred and fifty nine pixels; one and a bit rem from tablet width; two and a bit from desktop. Measured across four pages at 375, 820, 1440 and 1920, the gutter goes 16, 48, 72 and then whatever the centring gives it, and no page overflows at any of them. The three rules that centre themselves cancel Material's margin to do it, so they carry the phone floor instead, scoped to the phone. Left unscoped they are the more specific selector and held the landing page at sixteen pixels on every screen, which is how the first attempt at this changed nothing. The measure is set by md-typeset and does not move: this changes how much air is beside a line, not how long it is.
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 site had no side margins. Material gives the content box no horizontal
padding of its own, so on a wide window the prose began exactly where the
navigation ended, and the landing page ran to within sixteen pixels of the bezel.
Sixteen pixels is a floor for a phone. It is what stops text touching the glass,
and I had added it as one earlier in this branch of work. It had been standing in
for a margin on every screen there is.
What it measures now
Gutter is the space between the text and whatever is beside it, either the
navigation or the edge. Measured in a real frame at each width:
No page overflows horizontally at any of those widths. The measure is set by
md-typesetand does not move: this changes how much air is beside a line, nothow long it is.
Two things worth writing down
Nothing extra is added on a phone. Material already gives the box a side margin
at that width, and adding to it stacked two gutters and took the line down to 259
pixels, which is worse than the problem.
The three rules that centre themselves cancel that margin to do it, so they carry
the phone floor instead. They have to be scoped to the phone: they are the more
specific selector, and left unscoped they held the landing page at sixteen pixels
at every width. That is exactly what happened on the first attempt at this, and
the measurement is what showed it, since the number simply did not move.