Improve full width usage of content.

[hoetmaaiers]

This PR tries to improve the feedback from @jorisvandenbossche about his full width experience in PR #134. The content is positioned fluidly until breakpoint width 1300px. Above this breakpoint the content is centered.

By reconfiguring the breakpoint we can play with this very easily: https://github.com/pandas-dev/pydata-sphinx-theme/compare/master...hoetmaaiers:feature/full-width-improvements?expand=1#diff-e3d1d830790a12807fb397358c25d549R7.

After using the breakpoint mixin, these variables should work even better.

Feedback from Joris:

On my full screen, the main text is now indeed 750px wide. On the screenshot below, I reduced my browser window width from 1900 to 1350px, and then the main content it is only 600px wide (which I personally find too narrow, if there is more space available). But at the same time, there is still non-utilized white space on both sides.
I am wondering if it is possible, at some point when the screen becomes narrower, to "just" use the full width?

[choldgraf]

I think that this might address my issue #140 as well 👍

[hoetmaaiers]

I think that this might address my issue #140 as well 👍

Indeed, what you described in your concerns and solution is what can be done by extending the breakpoint variables. Do you think the breakpoint at width 1300px is good for your screen setup?

[choldgraf]

I think 1300 is reasonable? Maybe 1350? For some reason my brain thinks of "actually big screens" as starting at 1400. Maybe there is a CSS standard for this even if it's not in official bootstrap?

[jorisvandenbossche]

@hoetmaaiers Thanks a lot, this looks good! (exactly what I had in mind ;))

I think the breakpoint of 1300 is OK for the current layout, in the sense that at 1300px it uses the same max-width for the main content as on wider screens.

But, there are still some things that could use more space by default:

• I mentioned it in the PR ENH: max-width layout for wide screens #134, the TOC sidebar is a bit narrow, when there is plenty of space (point 1 at ENH: max-width layout for wide screens #134 (comment))
• The effective max-width of the main content is now around 690px on my screen. We still might want to make this a bit more. Eg gitbook (eg https://docs.metaflow.org/introduction/what-is-metaflow) uses 750px as their max-width of the page content (and quickly checked some others that I mentioned in the original issue (Maximum width of the main body of the page #17 (comment)): pytorch 850, sparklyr 770, google 856, docker 884, elixir 829, readthedocs 694). But something like 750px like gitbook might also be an option?

But let's keep those for another issue/PR.

@hoetmaaiers this is ready to be merged?

[choldgraf]

I’d be a fan of content max width closer to 750 or 800. Usually I just do whatever google does given that they have way more UI/UX budget than I do haha. Also fine with it to be in another pr.

[hoetmaaiers]

I updated the xl breakpoint to 1400 px. Which enlarges the body content to 749. Also the TOC sidebar is again a bit wider.

From my part this is ready to be merged.

[choldgraf]

it looks good to me 👍

[jorisvandenbossche]

Looks good, thanks for the update!

[choldgraf]

woo thanks again for the nice improvement @hoetmaaiers 🎉