Update pydata theme to 0.10

pyproject.toml

@@ -22,8 +22,8 @@ readme = "README.md"
 
 requires-python = ">=3.7"
 dependencies = [
-  "sphinx>=3,<5",
-  "pydata-sphinx-theme~=0.8.0",
+  "sphinx>=3,<6",
+  "pydata-sphinx-theme~=0.10.0rc1",
   "pyyaml",
 ]
 

src/sphinx_book_theme/assets/scripts/index.js

@@ -56,7 +56,7 @@ var toggleFullScreen = () => {
  * the screen.
  */
 var scrollToActive = () => {
-  var navbar = document.getElementById("site-navigation");
+  var navbar = document.getElementsByClassName("bd-sidebar-primary")[0];
   var active_pages = navbar.querySelectorAll(".active");
   var active_page = active_pages[active_pages.length - 1];
   // Only scroll the navbar if the active link is lower than 50% of the page
@@ -116,9 +116,9 @@ var initTocHide = () => {
 
     // Hide the TOC if any margin content is displayed on the screen
     if (onScreenItems.length > 0) {
-      $("div.bd-toc").removeClass("show");
+      $("div.bd-sidebar-secondary").removeClass("show");
     } else {
-      $("div.bd-toc").addClass("show");
+      $("div.bd-sidebar-secondary").addClass("show");
     }
   };
   let manageScrolledClassOnBody = (entries, observer) => {

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

@@ -25,7 +25,7 @@ div[class*="highlight-"] {
 
 // Code blocks should have a margin, but code *cells* get margin from a parent
 div.highlight {
-  background: none;
+  background: none !important;
   margin-bottom: 1em;
 }
 

src/sphinx_book_theme/assets/styles/extensions/_readthedocs.scss

@@ -1,9 +1,9 @@
 /**
  * ReadTheDocs pop-up menu over-rides.
- * We nest everything under `.bd-sidebar` so that we use more selective
+ * We nest everything under `.bd-sidebar-primary` so that we use more selective
  * selectors than what RTD CSS uses.
  */
-.bd-sidebar {
+.bd-sidebar-primary {
   // Parent container for everything else
   div#rtd-footer-container {
     position: sticky;

src/sphinx_book_theme/assets/styles/sections/_article.scss

@@ -2,19 +2,14 @@
 * Main content layout *
 *********************************************/
 
-body {
-  padding-top: 0px !important;
-}
-
-#main-content,
-#print-main-content {
-  transition: padding $animation-time ease-out;
-  padding-top: 1.5em;
-}
-
-// On wide screens, make space for the right margin
-@media (min-width: $breakpoint-md) {
-  #main-content {
-    max-width: $content-max-width;
+.bd-content {
+  overflow: unset; // needed for postion:sticky header-article
+  padding: 0rem;
+  .bd-article {
+    padding-right: 2rem;
+    @media (max-width: $breakpoint-md) {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
   }
 }

src/sphinx_book_theme/assets/styles/sections/_header-article.scss

@@ -2,11 +2,14 @@
 * Top Bar *
 * TODO: Rename much of these to article-header to conform with sphinx-basic-ng
 *********************************************/
-.header-article {
+.bd-header-article {
   height: $header-article-height; // Fix the height so the TOC doesn't grow it
   background-color: white;
   transition: left 0.2s;
   font-size: var(--sbt-header-article-font-size);
+  position: sticky;
+  top: 0;
+  z-index: 1020;
 
   @include header-height-mobile;
 

src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss

@@ -1,11 +1,13 @@
 /*********************************************
 * Left Nav Bar *
 *********************************************/
-#site-navigation {
+.bd-sidebar-primary {
   padding-top: 0;
-  width: $leftbar-width-wide;
+  padding: 0em;
+  flex-basis: $leftbar-width-wide;
   font-size: var(--sbt-sidebar-font-size);
   top: 0px !important;
+  max-height: 100vh;
   background: white;
   border-right: $border-thin;
   transition: margin-left $animation-time ease 0s,
@@ -33,13 +35,13 @@
   }
 
   // Apply some basic padding so the dropdown buttons don't overlap w/ scrollbar
-  .bd-sidebar__top,
-  .bd-sidebar__bottom {
+  .sidebar-start-items,
+  .sidebar-end-items {
     padding: 0 1rem 0rem 1.5rem;
   }
 
   // This should always snap to the bottom even if there's no sidebar content
-  .bd-sidebar__bottom {
+  .sidebar-end-items {
     margin-top: auto;
     margin-bottom: 2em;
   }

src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss

@@ -2,13 +2,65 @@
 * Table of Contents (right nav bar)          *
 *********************************************/
 
-.bd-toc {
+.bd-sidebar-secondary {
   padding: 0px !important;
   right: -1em;
   height: auto;
-  transition: margin-right $animation-time ease 0s,
-    opacity $animation-time ease 0s, visibility $animation-time ease 0s;
+  position: static; // toc-item will be made sticky so that z-index works well
+  max-height: unset;
+  overflow-y: unset;
+  transition: margin-right 0.25s ease 0s, opacity 0.25s ease 0s,
+    visibility 0.25s ease 0s;
 
+  .tocsection {
+    padding: 0.5rem 1rem !important;
+    .scrolled & {
+      box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
+    }
+
+    &:after {
+      content: "\f107";
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+      padding-left: 0.5em;
+      transition: opacity 0.3s ease;
+    }
+  }
+
+  // Show / hide the in-page TOC items
+  @mixin show-inpage-toc {
+    nav {
+      max-height: 90vh;
+      opacity: 1;
+      overflow-y: auto;
+    }
+
+    // Hide the arrow when we display the toc
+    .tocsection:after {
+      opacity: 0;
+    }
+  }
+
+  .toc-item {
+    padding: 0rem;
+    position: sticky;
+    z-index: 3;
+    top: 0;
+    height: auto;
+    background: white;
+    // On wide screens, show the TOC with hover or w/ a show class
+    &:hover {
+      @include show-inpage-toc;
+    }
+  }
+
+  &.show {
+    @include show-inpage-toc;
+  }
+
+  .toc-h2 {
+    font-size: 0.85rem;
+  }
   // Colors
   div.onthispage,
   .toc-entry a {
@@ -37,70 +89,23 @@
 
   // By default the nav is hidden unless a few conditions are met
   nav {
-    opacity: 0;
+    opacity: 1;
     max-height: 0;
-    transition: opacity 0.2s ease, max-height 0.7s ease;
     overflow-y: hidden;
     background: white;
+    transition: opacity 0.4s ease, max-height 0.7s ease;
     @include scrollbar-style();
     @include scrollbar-on-hover();
-
-    // TOC link color
-    a:hover,
-    li.active > a.active {
-      color: rgba(var(--pst-color-link), 1);
-    }
-
-    li.active > a.active {
-      border-left: 2px solid rgba(var(--pst-color-link), 1);
-    }
-
-    > .nav {
-      border-left: 1px solid #eee;
-      .nav {
-        border-left: none;
-      }
-    }
-  }
-
-  // Show / hide the in-page TOC items
-  @mixin show-inpage-toc {
-    nav {
-      max-height: 90vh;
-      opacity: 1;
-      overflow-y: auto;
-    }
-
-    // Hide the arrow when we display the toc
-    .tocsection:after {
-      opacity: 0;
-    }
-  }
-  // On wide screens, show the TOC with hover or w/ a show class
-  &:hover,
-  &.show {
-    @include show-inpage-toc;
   }
 
   // On narrow screens, it should always be shown because it's off to the right
   @media (max-width: $breakpoint-md) {
     @include show-inpage-toc;
   }
 
-  .tocsection {
-    padding: 0.5rem 0 0.5rem 1rem !important;
-
-    &:after {
-      content: "\f107";
-      font-family: "Font Awesome 5 Free";
-      font-weight: 900;
-      padding-left: 0.5em;
-      transition: opacity 0.3s ease;
-    }
-  }
-
-  .toc-entry a {
+  .toc-entry a.nav-link {
     padding: 0.125rem 1rem !important;
+    margin-left: 0rem;
   }
 
   // Make sure the pydata sphinx theme edit button doesn't show up

src/sphinx_book_theme/theme/sphinx_book_theme/layout.html

@@ -3,102 +3,38 @@
 
 {% set is_single_page = (theme_single_page == True) or (theme_single_page == "True") %}
 
-
-{% block content %}
-<!-- Checkboxes to toggle the left sidebar -->
-<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">
-<label class="overlay overlay-navbar" for="__navigation">
-    <div class="visually-hidden">Toggle navigation sidebar</div>
-</label>
-<!-- Checkboxes to toggle the in-page toc -->
-<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">
-<label class="overlay overlay-pagetoc" for="__page-toc">
-    <div class="visually-hidden">Toggle in-page Table of Contents</div>
-</label>
-<!-- Headers at the top -->
-<div class="announcement header-item noprint">
-    {%- include "sections/announcement.html" -%}
-</div>
-<div class="header header-item noprint">
-    {%- include "sections/header.html" -%}
-</div>
-{{ super() }}
-{% endblock %}
-
-<!-- Docs TOC is "d-none d-xl-block col-xl-2" -->
-{% block docs_sidebar %}
-<!-- Sidebar -->
-<div class="bd-sidebar noprint{% if is_single_page %} single-page{% endif %}" id="site-navigation">
-    {%- if not is_single_page %}
-    <div class="bd-sidebar__content">
-        <div class="bd-sidebar__top">
-            {%- include "sections/sidebar.html" -%}
-        </div>
-        <div class="bd-sidebar__bottom">
-            {% if theme_navbar_footer_text %}{% set theme_extra_navbar=theme_navbar_footer_text %}{% endif %} <!-- To handle the deprecated key -->
-            {% if theme_extra_navbar %}
-            <div class="navbar_extra_footer">
-            {{ theme_extra_navbar }}
-            </div>
-            {% endif %}
-        </div>
-    </div>
-    <div id="rtd-footer-container"></div>
-    {%- endif %}
-</div>
-{% endblock %}
-
 {% block docs_main %}
 <!-- A tiny helper pixel to detect if we've scrolled -->
 <div class="sbt-scroll-pixel-helper"></div>
-<!-- Main content -->
-<div class="col py-0 content-container">
-    {% block docs_body %}
-    <div class="header-article row sticky-top noprint">
+<div class="bd-content col">
+    <div class="bd-header-article">
         {% include "sections/header-article.html" %}
     </div>
-    <div class="article row">
-        <div class="col pl-md-3 pl-lg-5 content-container">
-            <!-- Table of contents that is only displayed when printing the page -->
-            <div id="jb-print-docs-body" class="onlyprint">
-                <h1>{{ pagetitle }}</h1>
-                <!-- Table of contents -->
-                <div id="print-main-content">
-                    <div id="jb-print-toc">
-                        {% set page_toc = generate_toc_html() %}
-                        {%- if page_toc | length >= 1 %}
-                        <div>
-                            <h2> {{ translate(theme_toc_title) }} </h2>
-                        </div>
-                        <nav aria-label="Page">
-                            {{ page_toc }}
-                        </nav>
-                        {%- endif %}
-                    </div>
-                </div>
-            </div>
-            <main id="main-content" role="main">
-                {{ super() }}
-            </main>
-            <footer class="footer-article noprint">
-                {% include "sections/footer-article.html" %}
-            </footer>
-        </div>
-    </div>
-    <div class="footer-content row">
-        <footer class="col footer">
+
+    {% block docs_body %}
+    <article class="bd-article" role="main">
+      {% block body %} {% endblock %}
+    </article>
+    {% endblock %}
+
+    {% if theme_show_prev_next %}
+    <footer class="bd-footer-article">
+        {% include "sections/footer-article.html" %}
+    </footer>
+    {% endif %}
+    <div class="footer-content">
+        <footer class="col bd-footer">
             {%- include "sections/footer-content.html" %}
         </footer>
     </div>
-    {% endblock %}
 </div>
 {% endblock %}
 
+{%- block footer %}
+{%- endblock %}
+
 {% block docs_toc %}
 {% endblock %}
 
 {% block docs_navbar %}
 {%- endblock %}
-
-{%- block footer %}
-{%- endblock %}