MAINT: various fixes to print CSS.

This should among other fix #1745

When printing this hides
 - The pydata navbar
 - The announcement banner.
 - The "skip to main content" link.
 - The location breadcrumbs

This does not hide the version warning banner as this is currently being
worked on in another PR.

I went the route of adding the bootstrat `d-print-none`, instead of
adding custom css rules, I'm happy to do the opposite, but it seem the
using bootstrap classes as that seems what is done in other places.

I've also added a  break-inside avoid in a few places, mostly to try-to
avoid page breaks in the middle of codeblocks.

Author: Carreau

src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss

@@ -5,7 +5,9 @@ div.deprecated {
   margin: 1.5625em auto;
   padding: 0 0.6rem 0 0.6rem;
   overflow: hidden;
+  /* break-inside has replaced page-break-inside and is widely usable since 2019 */
   page-break-inside: avoid;
+  break-inside: avoid;
   border-left: 0.2rem solid;
   border-color: var(--pst-color-info);
   border-radius: $admonition-border-radius;

src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss

@@ -8,7 +8,10 @@ div.admonition,
   margin: 1.5625em auto;
   padding: 0 0.6rem 0.8rem 0.6rem;
   overflow: hidden;
+  /* break-inside has replaced page-break-inside and is widely usable since 2019 */
   page-break-inside: avoid;
+  break-inside: avoid;
+
   border-left: 0.2rem solid;
   border-color: var(--pst-color-info);
   border-radius: $admonition-border-radius;

src/pydata_sphinx_theme/assets/styles/content/_code.scss

@@ -12,6 +12,7 @@ div.literal-block-wrapper {
   flex-direction: column;
   width: unset;
   border-radius: $admonition-border-radius;
+  break-inside: avoid;
 }
 
 // Code blocks with captions

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html

@@ -10,7 +10,7 @@
 
 {#- Hide breadcrumbs on the home page #}
 {% if title and pagename != root_doc %}
-<nav aria-label="{{ _('Breadcrumb') }}">
+<nav aria-label="{{ _('Breadcrumb') }}" class="d-print-none">
   <ul class="bd-breadcrumbs">
     {# Home icon #}
     <li class="breadcrumb-item breadcrumb-home">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -36,7 +36,7 @@
 
   {# A button hidden by default to help assistive devices quickly jump to main content #}
   {# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #}
-  <a id="pst-skip-link" class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a>
+  <a id="pst-skip-link" class="skip-link d-print-none" href="#main-content">{{ _("Skip to main content") }}</a>
 
 {%- endblock %}
 
@@ -74,7 +74,7 @@
     {% include "sections/announcement.html" %}
   {%- endif %}
   {% block docs_navbar %}
-    <header class="bd-header navbar navbar-expand-lg bd-navbar">
+    <header class="bd-header navbar navbar-expand-lg bd-navbar d-print-none">
       {%- include "sections/header.html" %}
     </header>
   {% endblock docs_navbar %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html

@@ -3,7 +3,7 @@
 {# If we are remote, add a script to make an HTTP request for the value on page load #}
 {%- if is_remote %}
 <script>
-document.write(`<div class="bd-header-announcement"></div>`);
+document.write(`<div class="bd-header-announcement d-print-none"></div>`);
 fetch("{{ theme_announcement }}")
   .then(res => {return res.text();})
   .then(data => {