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 (in bd-header-article), without also hiding
   the container the full content is shifted by a dozen pixel hight and
   the end of the content get hidden behind the footer when printing.
 - The prev.next buttons a bottom of page.

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

@@ -9,7 +9,9 @@ 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: $admonition-left-border-width 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 #}
-  <div id="pst-skip-link" class="skip-link"><a href="#main-content">{{ _("Skip to main content") }}</a></div>
+  <div id="pst-skip-link" class="skip-link d-print-none"><a href="#main-content">{{ _("Skip to main content") }}</a></div>
 
 {%- endblock %}
 
@@ -72,7 +72,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 %}
@@ -94,7 +94,7 @@
           <div class="bd-content">
             <div class="bd-article-container">
               {# Article header #}
-              <div class="bd-header-article">{% include "sections/header-article.html" %}</div>
+              <div class="bd-header-article d-print-none">{% include "sections/header-article.html" %}</div>
               {# Article content #}
               {% block docs_body %}
               {# This is empty and only shows up if text has been highlighted by the URL #}
@@ -111,7 +111,7 @@
               {% endif %}
               {# prev-next buttons #}
               {% if theme_show_prev_next %}
-                <footer class="prev-next-footer">
+                <footer class="prev-next-footer d-print-none">
                   {% include "components/prev-next.html" %}
                 </footer>
               {% endif %}

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 => {