ENH: White space behavior for main content

[choldgraf]

This is an attempt at making the whitespace behavior more predictable for the general page layout. It does the following things:

• Removes the practice of adding in empty <div> elements with manually-defined Bootstrap columns if the primary/secondary sidebars are not defined. Instead they will simply not be there at all.
• Uses justify-content: center which means the sidebars and article content will bunch in the middle of the page
• This means that if there's no sidebar at all, the content will be directly in the middle.
• Also removes our custom "check for sidebars and define a bootstrap class for max-width of content" logic, and instead just uses a single max-width rule for our article content
• Documents our use of :notoc: to hide the secondary sidebar, and also renames this (previously undocumented) variable to be theme_html_remove_secondary_sidebar. Ideally we'd want this to be more like a dict ({"theme_html": {"remove_secondary_sidebar": True}}) but we can't do that with reStructuredText metadata unfortunately.

Example

Here's an example of deleting the primary and secondary sidebars in succession.

In addition, if you wanted the page content to take up all available space, you could add a CSS rule like:

.bd-content {
  max-width: 100%;
  flex-grow: 1;
}

I think that this should result in more predictable behavior for folks like @mwaskom while still looking nice. What do folks think?

Example pages

• The landing page now has both sidebars turned off: https://pydata-sphinx-theme--753.org.readthedocs.build/en/753/
• Our "no sidebar" test page now shows slightly new behavior: https://pydata-sphinx-theme--753.org.readthedocs.build/en/753/demo/no-sidebar.html

closes #704 closes #760

[mwaskom]

Hm, it's possible that I've insufficiently rolled back my various customizations, but I removed my custom layout.html, sidebar-primary.html and sidebar-secondary.html templates, and now this is what I am getting:

Not sure where that "show source" link is coming from, wasn't there before. I assume that's a conf option. In any case it occurs to me that now I really might want :notoc:, which wasn't sufficiently doing the trick before, and indeed that does get rid of the empty (aside from source link) right sidebar, but the horizontal use of space is still inefficient:

[mwaskom]

For comparison, here's where my hacks had gotten me to (this is against your branch, not v0.9.0):

[choldgraf]

@mwaskom I think that if you use the max-width and flex-grow CSS rules I mentioned above, then it should grow your content to fill the whole screen.

Would it be helpful if we added a CSS helper class like full-width like:

.full-width {
  max-width: 100%;
  flex-grow: 1;
}

that could be re-used?

(and yep, I think :notoc: is what you want in order to remove the TOC entirely)

[mwaskom]

Oh sorry I missed that was an extra customization step.

you could add a max-width: 100%; flex-grow: 1; CSS rule

Sorry for being dense but add this where?

[choldgraf]

In your own custom CSS file, I'd add a selector like:

.bd-content {
  max-width: 100%;
  flex-grow: 1;
}

then if you delete the sidebars the content should expand.

[mwaskom]

Yay! Looking good now!

[12rambau]

Is there a page in the documentation that is behaving as described in this PR ?

[choldgraf]

Yep, two examples:

• The landing page now has both sidebars turned off: https://pydata-sphinx-theme--753.org.readthedocs.build/en/753/
• Our "no sidebar" test page now shows slightly new behavior: https://pydata-sphinx-theme--753.org.readthedocs.build/en/753/demo/no-sidebar.html

[12rambau]

Let's make it happen ! it will be very useful!

[choldgraf]

@bryevdv would love feedback on whether this would resolve your suggestion in #760 !

[mwaskom]

The landing page now has both sidebars turned off

Not sure if it's related to this change, but note that the version switcher position here is pretty awkward:

[choldgraf]

@mwaskom ah yeah this is on main too, so I opened an issue to track it:

• Navbar start items overlap with one another on medium screens #763

[choldgraf]

OK let's merge this one in so that @12rambau can iterate on #726

[bryevdv]

@choldgraf This seems promising, will definitely check it out when it's released

[mwaskom]

Thanks @choldgraf! I’m delighted to learn how effective it can be to bully you on twitter 😝