Skip to content

Commit

Permalink
Fix incorrect breakpoints that cause clipping around 875px (#174)
Browse files Browse the repository at this point in the history
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: 875px` block that came after a `max-width: 870px` block.

- 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 to  `theme_page_width` but 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_sidebar` option. This was at a `min-width: 876px` breakpoint. Since we can't do 1px adjustment calculations (as above), I inverted the logic, creating an additional section in the `max-width: {{ theme_page_width }}` block instead. I've tested and this seems to work fine.

Co-authored-by: introt <[email protected]>
  • Loading branch information
spookylukey and introt authored Jul 26, 2024
1 parent 5bb4411 commit 97235d1
Showing 1 changed file with 24 additions and 70 deletions.
94 changes: 24 additions & 70 deletions alabaster/static/alabaster.css_t
Original file line number Diff line number Diff line change
Expand Up @@ -566,67 +566,14 @@ a:hover tt, a:hover code {
}


@media screen and (max-width: 870px) {

div.sphinxsidebar {
display: none;
}

div.document {
width: 100%;

}

div.documentwrapper {
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}

div.bodywrapper {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

ul {
margin-left: 0;
}

li > ul {
/* Matches the 30px from the "ul, ol" selector above */
margin-left: 30px;
}

.document {
width: auto;
}

.footer {
width: auto;
}

.bodywrapper {
margin: 0;
}

.footer {
width: auto;
}

.github {
display: none;
}



{%- if theme_fixed_sidebar|lower == 'true' %}
div.sphinxsidebar {
position: fixed;
margin-left: 0;
}
{%- endif %}



@media screen and (max-width: 875px) {
@media screen and (max-width: {{ theme_page_width }}) {

body {
margin: 0;
Expand All @@ -636,14 +583,19 @@ a:hover tt, a:hover code {
div.documentwrapper {
float: none;
background: {{ theme_base_bg }};
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}

div.sphinxsidebar {
display: block;
float: none;
width: 102.5%;
width: unset;
{%- if theme_fixed_sidebar|lower == 'true' %}
margin: -20px -30px 20px -30px;
position: static;
{%- else %}
margin: 50px -30px -20px -30px;
{%- endif %}
Expand Down Expand Up @@ -680,8 +632,14 @@ a:hover tt, a:hover code {

div.body {
min-height: 0;
min-width: auto; /* fixes width on small screens, breaks .hll */
padding: 0;
}

.hll {
/* "fixes" the breakage */
width: max-content;
}

.rtd_doc_footer {
display: none;
Expand All @@ -695,23 +653,19 @@ a:hover tt, a:hover code {
width: auto;
}

.footer {
width: auto;
}

.github {
display: none;
}
}

{%- if theme_fixed_sidebar|lower == 'true' %}
@media screen and (min-width: 876px) {
div.sphinxsidebar {
position: fixed;
ul {
margin-left: 0;
}

li > ul {
/* Matches the 30px from the "ul, ol" selector above */
margin-left: 30px;
}
}
{%- endif %}


/* misc. */
Expand Down

0 comments on commit 97235d1

Please sign in to comment.