ENH: Add search field back to sidebar

docs/conf.py

@@ -205,7 +205,7 @@
         )  # noqa
         content = "\n".join(content)
         # Replace a relative link in the pydata docs w/ the respective one here
-        content = content.replace("../examples/pydata.md", "notebooks.md")
+        content = content.replace("../examples/pydata.ipynb", "notebooks.ipynb")
         # Write to disk in a location that will be ignored by git
         path_content_file.write_text(content)
 

docs/content/notebooks.md

@@ -121,7 +121,7 @@ Math("\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}")
 ## Removing content before publishing
 
 You can also remove some content before publishing your book to the web. For example,
-in {download}`./notebooks.md`, there used to be a cell below...
+in {download}`./notebooks.ipynb`, there used to be a cell below...
 
 ```{code-cell} ipython3
 :tags: [remove_cell]
@@ -139,7 +139,7 @@ ax.set_axis_off()
 You can also **remove only the code** so that images and other output still show up.
 
 Below we'll *only* display an image. It was generated with Python code in a cell,
-which you can {download}`see in the original notebook <./notebooks.md>`.
+which you can {download}`see in the original notebook <./notebooks.ipynb>`.
 
 ```{code-cell} ipython3
 :tags: [hide_input]

docs/reference.md

@@ -51,7 +51,7 @@ These are **in addition to** all of the {external:doc}`options available in the
   - Whether to collapse the navbar, stopping the tree from being expanded. See [](sidebar:max-navbar-depth), (False is default)
 * - `extra_navbar`
   - str
-  - Extra HTML to add below the sidebar footer. See [](custom-footer).
+  - Extra HTML to add below the sidebar footer. See [](content-footer:extra-footer).
 * - `extra_footer`
   - str
   - Extra HTML to add in the footer of each page.

src/sphinx_book_theme/assets/styles/abstracts/_variables.scss

@@ -40,19 +40,30 @@ $sbt-font-size-small-1: 87.5%;
 /**
  * Variables that aren't impacted by light/dark
  */
-html {
+html[data-theme="light"],
+html[data-theme="dark"] {
   // Over-ride the pydata theme so that readers can use their system base
   --pst-font-size-base: none;
+  // Default secondary color (has enough contrast on both light/dark so
+  // no need to special case.
+  --pst-color-secondary: #e89217;
 }
 
 // Overrides for pydata sphinx theme.
 // See https://github.com/pydata/pydata-sphinx-theme/blob/master/pydata_sphinx_theme/static/css/theme.css
 html[data-theme="light"] {
-  --pst-color-primary: rgb(87, 154, 202);
   // Announcement
   --sbt-color-announcement: rgb(97, 97, 97);
+  // Default primary color (need to adjust on dark theme due to bad contrast)
+  --pst-color-primary: #176de8;
 }
 
 html[data-theme="dark"] {
-  --pst-color-primary: rgb(87, 154, 202);
+  // Slightly lighten these colors to make them stand out more on dark
+  --pst-color-primary: #528fe4;
+
+  // Over-ride the purple announcement color
+  --sbt-color-announcement: rgb(97, 97, 97);
+  // Desaturate the background
+  --pst-color-background: #121212;
 }

src/sphinx_book_theme/assets/styles/components/_back-to-top.scss

@@ -0,0 +1,11 @@
+#pst-back-to-top {
+  // We should only display the back-to-top button when the TOC is not available.
+  // AKA, on narrow-ish screens.
+  // This over-rides a PST default
+  @media (min-width: $breakpoint-xl) {
+    display: none !important;
+  }
+
+  // Reduce size to be slightly less intrusive on the page
+  font-size: 0.8rem;
+}

src/sphinx_book_theme/assets/styles/components/_search.scss

@@ -9,9 +9,27 @@
   }
 }
 
-// Make the search buttons smaller so that it is centered properly
-.search-button i {
-  font-size: 1.1rem;
+// Sidebar search button field
+.search-button-field {
+  width: 100%;
+  font-size: 0.9rem;
+  // Hide by default and we'll add a rule to show it on wide sreen below
+  display: none;
+
+  .search-button__kbd-shortcut {
+    margin-left: auto;
+  }
+}
+
+// Rules to switch off visibility of the field button and the header button
+@media (min-width: $breakpoint-lg) {
+  .search-button {
+    display: none;
+  }
+
+  .search-button-field {
+    display: flex;
+  }
 }
 
 // The "clear search results" button

src/sphinx_book_theme/assets/styles/index.scss

@@ -27,6 +27,7 @@
 @import "sections/footer-article";
 
 // Re-usable components across the theme
+@import "components/back-to-top";
 @import "components/icon-links";
 @import "components/logo";
 @import "components/search";

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

@@ -5,8 +5,11 @@
   overflow-x: unset;
   // prevent from overflowing the flex container
   min-width: 0;
-  // keep article at reasonable width in absence of sidebar
-  max-width: calc(100% - var(--pst-sidebar-secondary));
+
+  @media (min-width: $breakpoint-xl) {
+    // keep article at reasonable width in absence of sidebar
+    max-width: calc(100% - var(--pst-sidebar-secondary));
+  }
 
   .bd-article {
     padding-right: 2rem;

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

@@ -93,6 +93,15 @@ label.sidebar-toggle.secondary-toggle {
     border: none;
     padding: 0 0.5rem;
 
+    // Make sure anything inside is aligned vertically
+    display: flex;
+    align-items: center;
+
+    // Fix width of buttons so they're all the same
+    svg {
+      width: 1.3rem;
+    }
+
     // Hover / active behavior
     &.show,
     &:hover {
@@ -114,6 +123,12 @@ label.sidebar-toggle.secondary-toggle {
     }
   }
 
+  // Vertically align dropdown buttons
+  div.dropdown {
+    display: flex;
+    align-items: center;
+  }
+
   .theme-switch-button {
     // Removing some special-casing that was needed in PST
     margin: 0;
@@ -148,7 +163,7 @@ label.sidebar-toggle.secondary-toggle {
     }
 
     // Positioning and layout of dropdown items to be standardized
-    margin-top: 0px;
+    top: 2rem;
     transform: translateX(-75%);
     @include pst-box-shadow;
 

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

@@ -29,6 +29,7 @@
     height: $header-article-height;
     min-height: $header-article-height;
     display: flex;
+    gap: 0.5rem;
     align-items: center;
     margin: 0;
     color: var(--pst-color-muted);

src/sphinx_book_theme/theme/sphinx_book_theme/theme.conf

@@ -1,7 +1,7 @@
 [theme]
 inherit = pydata_sphinx_theme
 pygments_style = tango
-sidebars = navbar-logo.html, icon-links.html, sbt-sidebar-nav.html
+sidebars = navbar-logo.html, icon-links.html, search-button-field.html, sbt-sidebar-nav.html
 stylesheet = styles/sphinx-book-theme.css
 
 [options]