Move search clear button to top of article

docs/_static/contributors.yaml

@@ -1,24 +1,24 @@
 - header: "@bollwyvl"
   image: https://avatars.githubusercontent.com/u/45380
-  link: https://github.com/bollwyvl
+  website: https://github.com/bollwyvl
 - header: "@jarrodmillman"
   image: https://avatars.githubusercontent.com/u/123428
-  link: https://github.com/jarrodmillman
+  website: https://github.com/jarrodmillman
 - header: "@hoetmaaiers"
   image: https://avatars.githubusercontent.com/u/468045
-  link: https://github.com/hoetmaaiers
+  website: https://github.com/hoetmaaiers
 - header: "@jorisvandenbossche"
   image: https://avatars.githubusercontent.com/u/1020496
-  link: https://github.com/jorisvandenbossche
+  website: https://github.com/jorisvandenbossche
 - header: "@damianavila"
   image: https://avatars.githubusercontent.com/u/1640669
-  link: https://github.com/damianavila
+  website: https://github.com/damianavila
 - header: "@drammock"
   image: https://avatars.githubusercontent.com/u/1810515
-  link: https://github.com/drammock
+  website: https://github.com/drammock
 - header: "@choldgraf"
   image: https://avatars.githubusercontent.com/u/1839645
-  link: https://github.com/choldgraf
+  website: https://github.com/choldgraf
 - header: "@12rambau"
   image: https://avatars.githubusercontent.com/u/12596392
-  link: https://github.com/12rambau
+  website: https://github.com/12rambau

docs/scripts/generate_collaborators_gallery.py

@@ -22,7 +22,7 @@
         {
             "header": f"@{collaborator['login']}",
             "image": f"https://avatars.githubusercontent.com/u/{collaborator['id']}",
-            "link": collaborator["html_url"],
+            "website": collaborator["html_url"],
         }
     )
 

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

@@ -0,0 +1,50 @@
+/**
+ * The 'Hide Search Matches' button.
+ * This only shows up when a person lands on a page after clicking a search result.
+ * Clicking it removes the highlighting of the search term from the page.
+ * We want it to behave like a button.
+ */
+div#searchbox {
+  // Leave `#searchbox` rules empty so that it doesn't show at all when it is empty
+  p.highlight-link {
+    margin: 1rem 0;
+    width: fit-content;
+
+    // A bit more margin on wide screens to mimic article behavior
+    @include media-breakpoint-up($breakpoint-sidebar-secondary) {
+      margin-left: 2rem;
+    }
+
+    // Put outer shadow on this one so that we can darken the link w/ an inner shadow
+    @include box-shadow();
+
+    // Style the button to look like a Sphinx Design button
+    a {
+      border-radius: 0.25rem;
+      font-size: 1.25rem;
+      padding: 0.75rem;
+      background-color: var(--pst-color-primary);
+      // Button text is always white with Sphinx Design buttons
+      color: white;
+
+      // The box shadow is inset so that it darkens the button on hover
+      transition: box-shadow 0.25s ease-out;
+      &:hover {
+        box-shadow: inset 0px 0px 50px 50px rgba(0, 0, 0, 0.25);
+
+        // Remove underline for link
+        text-decoration: none;
+      }
+
+      // add icon via CSS because the link is created by javascript
+      // match padding to .toc-item > i above
+      &:before {
+        content: var(--pst-icon-search-minus);
+        color: unset;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        margin-right: 0.5rem;
+      }
+    }
+  }
+}

src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss

@@ -37,6 +37,7 @@
 @import "./components/navbar-links";
 @import "./components/prev-next";
 @import "./components/search";
+@import "./components/searchbox";
 @import "./components/switcher-theme";
 @import "./components/switcher-version";
 @import "./components/toc-inpage";

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

@@ -53,23 +53,3 @@
     padding-left: 1rem;
   }
 }
-
-// The 'Hide Search Matches' link
-div#searchbox {
-  p.highlight-link {
-    // remove excess margin from p tag
-    margin-bottom: 0px;
-    a {
-      // add icon via CSS because the link is created by javascript
-      // match padding to .toc-item > i above
-      &:before {
-        content: var(--pst-icon-search-minus);
-        color: unset; // make sure it uses the same color as the text
-        font-family: "Font Awesome 6 Free";
-        font-weight: 900;
-        padding-right: 0.5rem;
-        margin-right: 0;
-      }
-    }
-  }
-}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -89,6 +89,8 @@
               <div class="bd-header-article">{% 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 #}
+                {% include "components/searchbox.html" %}
                 <article class="bd-article" role="main">
                   {% block body %}{% endblock %}
                 </article>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html

@@ -1,8 +1,4 @@
 {% block docs_sidebar %}
-  {# This is empty and only shows up if text has been highlighted by the URL #}
-  {# We put it *both above and below the article* to be easier to find. #}
-  {% include "components/searchbox.html" %}
-
   {# Header items that will be displayed in the sidebar on mobile #}
   <div class="sidebar-header-items sidebar-primary__section">
     {# The header center items #}

tests/test_build/sidebar_subpage.html

@@ -1,6 +1,4 @@
 <div class="bd-sidebar-primary bd-sidebar">
- <div id="searchbox">
- </div>
  <div class="sidebar-header-items sidebar-primary__section">
   <div class="sidebar-header-items__center">
    <div class="navbar-center-item">