MAINT: various fixes to print CSS. (#1770)

Co-authored-by: Tania Allard <[email protected]>

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

@@ -4,7 +4,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(`<aside class="bd-header-announcement" aria-label="{{ banner_label }}"></aside>`);
+document.write(`<aside class="bd-header-announcement d-print-none" aria-label="{{ banner_label }}"></aside>`);
 fetch("{{ theme_announcement }}")
   .then(res => {return res.text();})
   .then(data => {