misc. alignments and columns fixes #636
Merged
Conversation
This file contains 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
The padding would end up causing a mis-alignment of columns. The `calc()` is needed here as the total space available is 100%, but if we don't remove it from the width of the elements we'd end up with 100%+n*margin
It seems the previous method didn't compose well. It would end up creating a bit of padding where there shouldn't be since using #container() at the same place as #columns() can't work.
There's too many items in the menu when bordering on xs.
Setting all margins like that breaks #columns()
The negative margins being applied all the time caused issues when the total width of the viewport was smaller than the site width + those margin sizes.
The way this is fixed also better explains what the desire is. We actually want three columns, not two. It's only that we want the second column to span two out of the three columns. We will need an abstraction over that.
|
For the record this looks great 👍 I also like the idea introducing the debugging grid. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR closes #634.
With this, we also gain a new debugging superpower: the site width is always shown with yellow rulers. In addition to this, columns are pink, and the flexible spacing helpers are orange and green.
(What does this mean? Scroll down to the NixOS logo in the footer and double click the lambdaflake.)
These are all issues I've had to fixup following through actually fixing what #634 fixed (which was not fixing the issue it tried to, this is for another PR.)
Mostly things that were found out to accidentally align invisibly with an additional stray "gutter" width to the right. Comparing the site with the live one you should see some changes at many places columns are used. For some it might have changed how the text can flow.
This does address the stray padding @turboMaCk saw