Fixed issue #54 - incorrect breakpoints causing clipping #174
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
Also now respects theme_page_width for layout switching.
That 102.5% hack breaks at certain resolutions. Unsetting the width here makes it actually 100% wide and never too wide, thus a horizontal scrollbar never appears.
|
I threw a PR at your PR to fix the sidebar being too wide on mobile: spookylukey#1 |
introt
added a commit
to introt/docs
that referenced
this pull request
Jun 21, 2021
Implement sphinx-doc/alabaster#174 This addresses the highlighting issue on mobile as well. As I've "upstreamed" my changes, I've decided to include my one custom line instead of having a custom.css purely for it.
tab -> 4 spaces
CSS is not my fav flavor of spaghetti
Fix sidebar width at resolutions right below {{ theme_page_width }}
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.
As well as fixing the case for the default
theme_page_width, it works with customised values too (which was my main motivation for this!)Analysis/explanation:
The issue was a
max-width: 875pxblock that came after amax-width: 870pxblock.If you are below 875px but not 870px, then you get properties from 875 block only. This gives a very strange 5 pixel window for certain changes, which must be a mistake.
Some properties were defined in both 875 and 870 block, and were pointless because these are always overridden by 875 (since if you are below 870 you are always below 875, and the 875 block comes second in the source).
So I've combined all these into one block, keeping the 875 blocks values where they differ. In many cases there was just duplication which I removed.
I changed the breakpoint width to
{{ theme_page_width }}, which gives (almost) the correct behaviour. There is still a slight clipping issue, which is caused by the width of the scrollbar, and the way that browsers include that in width calculations - an issue which, after a lot of Googling, doesn't appear to have any nice solutions. One way would be to just add, say, 20px totheme_page_widthbut this is not convenient for us to do, since the value we have has units. So for now, I'd recommend just living with this small glitch - it is barely noticeable, and due to margins the page switches layout before any main text is obscured.I've fixed the sidebar breakpoint similarly for
fixed_sidebaroption. This was at amin-width: 876pxbreakpoint. Since we can't do 1px adjustment calculations (as above), I inverted the logic, creating an additional section in themax-width: {{ theme_page_width }}block instead. I've tested and this seems to work fine.