Header nav link styles (focus, hover, current) (#1545)

gabalafou · drammock · 12rambau · web-flow · commit 33fb96b1330f · 2023-12-13T16:08:58.000Z
* Implement header nav link styles * add comments * add comment * changes from implementation review * Consistent focus ring (first pass) (#1549) * wip * Style focus state in header nav * update focus ring style on all focussable elements * simplify * fix links in mobile sidebar overlay * put focus rings around a few more focusable elements * polish * update comment * review * better align focus ring on collapsible admonitions * comment and simplify sphinx-togglebutton focus ring * make css override more explicit * Fix SD link-card focus ring and on homepage, bring links inside card * Update docs/index.md --------- Co-authored-by: Daniel McCloy <dan@mccloy.info> * Resolve current sidebar link notch and focus ring (#1561) * Fix sidebar current notch * focus-ring-radius * missed a spot 0.125rem * keep focus ring on top * Restyle Sphinx Design tabs (#1555) * restyle sphinx design tabs * increase panel border radius * increase line height, zero padding-y * use shadow variable * Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss * Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss * Fix tabbed panel colors (#1567) * update feature focus (#1569) * docs: add instructions for custom SVG icons (#1490) * docs: add instructions for custom SVG icons * docs: minor tweaks in SVG icon instructions * docs: some more tweaks to SVG icon instructions * Update docs/user_guide/header-links.rst Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> * Change literalinclude to code-block in header links * Update docs/user_guide/header-links.rst Co-authored-by: Daniel McCloy <dan@mccloy.info> * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst --------- Co-authored-by: tgresavage <thomas.gresavage.ext@afresearchlab.com> Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> Co-authored-by: Daniel McCloy <dan@mccloy.info> * fix: make table background transparent (#1546) * fix: make table background transparent * fix: make table background transparent * fix: add color-theme option to html tag (#1536) * Silence warnings (#1542) * avoid webpack warning during asset compile * avoid frozen modules warning during import * try to make jupyterlite quieter * add config option to silence warnings * fix tests * add docs * hide conditional warning logic in utils * bump: 0.14.2 → 0.14.3 * chore: back to dev * docs: add the list of component using a directive (#1476) * fix: create the component list automatically * fix: read the first comment as documentation * docs: add disclaimer on .html suffix * docs: document every component with a simple one liner * fix: use regex to identify comments * update component branch (#15) * Change default logo alt text (#1472) * Default logo alt text only if no extra text * change default logo * use docstitle as default logo alt text * update docs to reflect change * Apply suggestions from code review Co-authored-by: Daniel McCloy <dan@mccloy.info> * use string formatting operator * Update docs/user_guide/branding.rst * docs fixes * Update docs/user_guide/branding.rst * add test * Update pyproject.toml * revert to original --------- Co-authored-by: Daniel McCloy <dan@mccloy.info> Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> * chore(i18n) catalan (#1488) i18n: Translate sphinx.po in ca 100% translated source file: 'sphinx.po' on 'ca'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> * Build(deps): Bump postcss and css-loader (#1494) Bumps [postcss](https://github.com/postcss/postcss) to 8.4.31 and updates ancestor dependency [css-loader](https://github.com/webpack-contrib/css-loader). These dependencies need to be updated together. Updates `postcss` from 8.4.21 to 8.4.31 - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](postcss/postcss@8.4.21...8.4.31) Updates `css-loader` from 3.6.0 to 6.8.1 - [Release notes](https://github.com/webpack-contrib/css-loader/releases) - [Changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md) - [Commits](webpack/css-loader@v3.6.0...v6.8.1) --- updated-dependencies: - dependency-name: postcss dependency-type: indirect - dependency-name: css-loader dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Revert "Build(deps): Bump postcss and css-loader" (#1509) Revert "Build(deps): Bump postcss and css-loader (#1494)" This reverts commit 185a37a. * Update pst docs buttons (#1502) * call them button-links * copy edit * docs: link back to GitHub from PyPI metadata (#1504) This will add a "Source" link in the PyPI page. * navigation_with_keys = False (#1503) * navigation_with_keys = False * None -> False * Apply suggestions from code review --------- Co-authored-by: Daniel McCloy <dan@mccloy.info> * fix: convert "stable" to actual version number (#1512) * convert "stable" to actual version number * fix tests re: navigation_with_keys * try bumping autoapi * refactor: use nbsphinx as the default execution lib (#1482) * refactor: use nbsphinx as the default execution lib * add nbstripout to the pre-commits' * add pandoc to the readthedocs deps * refactor: clean the notebook * move the example to the correct folder * fix: solve link issue * install pandoc in the test environment * fix: display of large table in executed cells * avoid Userwarnings from matplotlib * hide the matplotlib wrning management cell * Update readthedocs.yml * build: use pandoc_binary to install pandoc * docs: add reference to pandoc in the setup * update docs * remove pypandoc_binary * Update pyproject.toml Co-authored-by: gabalafou <gabriel@fouasnon.com> * ci: use back setup-pandoc * Trigger CI build --------- Co-authored-by: Gabriel Fouasnon <gabriel@fouasnon.com> * BUG - Clear alt_text in conf.py (#1471) * comment out alt_text in conf.py * set alt_text to empty string * remove alt_text from conf.py * fix: use 12rambau fork until it's merged with nikeee repo (#1517) * deps: drop support for Sphinx 5 (#1516) * remove ref to myst-nb * update minimal supported version of sphinx * Fix: (webpack.config.js) css-loader API change (#1508) * Fix: (webpack.config.js) css-loader API change The build was broken in <https://github.com/pydata/pydata-sphinx-theme/commit/185a37aa36820f77bffa4c87a772092e9e7cc380>/<https://github.com/pydata/pydata-sphinx-theme/pull/1494>. This change fixes the build, and it seems to be in accordance with the current API as described at <https://github.com/webpack-contrib/css-loader/blob/c6f36cf91ac61743a70e81cfb077faa0f8730ebe/README.md#boolean>. Closes <#1507>. * dedup * restore version bump --------- Co-authored-by: Daniel McCloy <dan@mccloy.info> * Fix duplicate HTML IDs (#1425) * Fix duplicate HTML IDs * fix tests * Do not animate the version admonitions colors. (#1424) Otherwise a delay has to be added to the accessibility color contrast checks, to wait for the colors to fully transition. * BUG - Remove redundant ARIA in breadcrumb navigation (#1426) * style(i18n): French Typo fixed (#1430) * Add the ability to add a center section to the footer (#1432) * Add a center section for the footer * Add docs for footer_center * Add a test site for the center footer * test it in our own docs * remove new test site * add footer test --------- Co-authored-by: Daniel McCloy <dan@mccloy.info> * Build(deps): Bump actions/checkout from 3 to 4 (#1433) Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v3...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add dropdown_text argument to generate_header_nav_html (#1423) * Add dropdown_text argument to generate_header_nav_html * Add a test, fix typo in theme.conf and remove header_dropdown_text from docs/conf.py * fixed? --------- Co-authored-by: Daniel McCloy <dan@mccloy.info> * fix: rollback ref and Id changes (#1438) * bump: version 0.13.3 → 0.14.0 (#1440) * bump version * update version switcher * back to dev * fix: change the z-index of the dropdown (#1442) In order to be on top of the primary sidebar on small screens. * fix: set the same background for dark/light (#1443) * fix: set the same background for dark/light et the same background color for all state of the search field. It is currently only applied when hovered * fix: wrong css selector * Update src/pydata_sphinx_theme/assets/styles/components/_search.scss * Update src/pydata_sphinx_theme/assets/styles/components/_search.scss * Fix duplicate HTML IDs * fix tests * unique_html_id * backwards-compat generate_header_nav_html * feedback review * update fixture * ughhhh...caching * code cleanup * fix test snapshot * put comment inside def --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr> Co-authored-by: Stuart Mumford <stuart@cadair.com> Co-authored-by: Daniel McCloy <dan@mccloy.info> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com> Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> * chore: build the devcontainer automatically in codespace (#1483) * chore: build the devcontainer automaticallyin codespace * refactor: lint * add pandoc to the environment * Fix font color in search input box (#1524) * Fix color * Use --pst-color-text-base * docs: add DecentralChain (#1528) Co-authored-by: jourlez <josuecr.288@gmail.com> * Updates for file src/pydata_sphinx_theme/locale/en/LC_MESSAGES/sphinx.po in ru [Manual Sync] (#1527) i18n: Translate sphinx.po in ru [Manual Sync] 96% of minimum 20% translated source file: 'sphinx.po' on 'ru'. Sync of partially translated files: untranslated content is included with an empty translation or source language content depending on file format Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> * ignore transient errors in windows build CI (#1520) * use warning list * clean up notebook * refactor to pass on all platforms? * simplify * fix logic * iterate backwards * fix plaform detection? also don't log unnecessarily�[H * ignore empty string warnings * remove notebook metawarning * Revert "remove notebook metawarning" This reverts commit 42f4672. * try again * debug the mysterious empty warning * escape color codes * import * triage by intermittency, not by platform; better var names * simplify * fix list.remove * undo what I broke * Update tests/utils/check_warnings.py * refactor: remove extention on component set-up (#1529) * use event.key for search shortcut (#1525) * use event.key for search shortcut * suggestions from review * caps lock --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: gabalafou <gabriel@fouasnon.com> Co-authored-by: Daniel McCloy <dan@mccloy.info> Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder <ned@nedbatchelder.com> Co-authored-by: Adam Porter <adam@alphapapa.net> Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr> Co-authored-by: Stuart Mumford <stuart@cadair.com> Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com> Co-authored-by: jourlez <josuecr.288@gmail.com> * fix: use a directive instead of raw html * fix: make links externals * fix: set reference in paragraphs * fix: missing parameter * fix: use the stem for the component name * refactor: remove never used variables * standardize component descriptions --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: gabalafou <gabriel@fouasnon.com> Co-authored-by: Daniel McCloy <dan@mccloy.info> Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder <ned@nedbatchelder.com> Co-authored-by: Adam Porter <adam@alphapapa.net> Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr> Co-authored-by: Stuart Mumford <stuart@cadair.com> Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com> Co-authored-by: jourlez <josuecr.288@gmail.com> * fix: primer link in docs (#1556) * docs: add data-content (#1559) Reproduce the change made in Sphinx 7 sphinx-doc/sphinx@8e730ae#diff-a5066e933cbf65adc46e0d1ab9a0b44e0a53ca64cc95dca7e6aa902aed6bd468R105 * Obviate background-from-color-variable (#1558) * Obviate background-from-color-variable * backwards compatibility --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: gresavage <tomgresavage@gmail.com> Co-authored-by: tgresavage <thomas.gresavage.ext@afresearchlab.com> Co-authored-by: Daniel McCloy <dan@mccloy.info> Co-authored-by: gabalafou <gabriel@fouasnon.com> Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder <ned@nedbatchelder.com> Co-authored-by: Adam Porter <adam@alphapapa.net> Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr> Co-authored-by: Stuart Mumford <stuart@cadair.com> Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com> Co-authored-by: jourlez <josuecr.288@gmail.com> Co-authored-by: Chris Holdgraf <choldgraf@berkeley.edu> * simplify (do not change state of hover) * fix icon links * forgot to add pydata-icon.js * Restore hover styles to sidebar toggles --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Daniel McCloy <dan@mccloy.info> Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> Co-authored-by: gresavage <tomgresavage@gmail.com> Co-authored-by: tgresavage <thomas.gresavage.ext@afresearchlab.com> Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder <ned@nedbatchelder.com> Co-authored-by: Adam Porter <adam@alphapapa.net> Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr> Co-authored-by: Stuart Mumford <stuart@cadair.com> Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com> Co-authored-by: jourlez <josuecr.288@gmail.com> Co-authored-by: Chris Holdgraf <choldgraf@berkeley.edu>
diff --git a/docs/_static/pydata-icon.js b/docs/_static/pydata-icon.js
@@ -0,0 +1,16 @@
+/*******************************************************************************
+ * Set a custom icon for PyData
+ */
+FontAwesome.library.add(
+  (faListOldStyle = {
+    prefix: "fa-custom",
+    iconName: "pydata",
+    icon: [
+      24, // viewBox width
+      24, // viewBox height
+      [], // ligature
+      "e002", // unicode codepoint - private use area
+      "M12.1,17.8v5.8l-5-2.9v-5.8L12.1,17.8z M12.1,12v5.8l-5-2.9V9.1L12.1,12z M17,9.1L12.1,12v5.8l4.9-2.9V9.1z M12.1,6.2L7,9.1l5,2.9L17,9.1L12.1,6.2z M17,9.1V3.3l-4.9-2.8v5.8L17,9.1z",
+    ],
+  })
+);
diff --git a/docs/_static/pydata-logo.png b/docs/_static/pydata-logo.png
diff --git a/docs/conf.py b/docs/conf.py
@@ -153,9 +153,7 @@
         {
             "name": "PyData",
             "url": "https://pydata.org",
-            "icon": "_static/pydata-logo.png",
-            "type": "local",
-            "attributes": {"target": "_blank"},
+            "icon": "fa-custom fa-pydata",
         },
     ],
     # alternative way to set twitter and github header icons
@@ -226,7 +224,7 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
 html_css_files = ["custom.css"]
-html_js_files = ["custom-icon.js"]
+html_js_files = ["pydata-icon.js", "custom-icon.js"]
 todo_include_todos = True
 
 # -- favicon options ---------------------------------------------------------
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
@@ -184,3 +184,83 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
     }
   }
 }
+
+/*
+Mixin for links in the header (and the More dropdown toggle).
+
+The mixin assumes it will be applied to some element X with a markup structure
+like: X > .nav-link, or X > .dropdown-toggle.
+
+It also assumes X.current is how the app annotates which item in the header nav
+corresponds to the section in the docs that the user is currently reading.
+*/
+@mixin header-link {
+  // Target the child and not the parent because we want the underline in the
+  // mobile sidebar to only span the width of the text not the entire row/line.
+  > .nav-link,
+  > .dropdown-toggle {
+    border-radius: 2px;
+    color: var(--pst-color-text-muted);
+    font-weight: 700;
+
+    &:focus-visible {
+      box-shadow: none; // override Bootstrap
+      outline: 3px solid var(--pst-color-accent);
+      outline-offset: 3px;
+    }
+  }
+
+  > .nav-link {
+    // Set up pseudo-element for hover and current states below.
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+    }
+
+    // Underline on hover.
+    // - Don't use text-decoration because it will wrap across two lines if
+    //   the link text also wraps across two lines.
+    // - Use pseudo-element in order to avoid the border-radius values
+    //   rounding the edges of the underline. (And since a header link can be
+    //   both focused and hovered at the same time and we want the focus ring
+    //   but not the underline to be rounded, we cannot use a box shadow or
+    //   bottom border link element to create the underline, or else it will
+    //   be rounded and if we apply border-radius 0 then the hovered focus
+    //   ring would go from rounded to sharp. So we have to use the
+    //   pseudo-element.)
+    &:hover {
+      color: var(--pst-color-secondary);
+      text-decoration: none; // override the link-style-hover mixin
+      &::before {
+        border-bottom: 3px solid var(--pst-color-secondary);
+      }
+    }
+  }
+
+  > .dropdown-toggle {
+    &:hover {
+      text-decoration: none;
+      box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover); // purple focus ring
+      // Brighten the text on hover (muted -> base)
+      color: var(--pst-color-text-base);
+    }
+  }
+
+  &.current {
+    > .nav-link {
+      color: var(--pst-color-primary);
+
+      // Underline the current navbar item
+      &::before {
+        border-bottom: 3px solid var(--pst-color-primary);
+      }
+    }
+  }
+}
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss
@@ -13,6 +13,9 @@
     padding-left: 0;
     padding-right: 0;
     @include icon-navbar-hover;
+    &:focus {
+      color: inherit;
+    }
   }
 
   // Spacing and centering
@@ -50,4 +53,10 @@
     height: 1.5em;
     border-radius: 0.2rem;
   }
+
+  .fa-pydata {
+    stroke: var(--pst-color-background);
+    stroke-linejoin: round;
+    stroke-width: 0.35;
+  }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
@@ -149,7 +149,7 @@
   background-color: var(--pst-color-surface);
 
   &:hover {
-    border: 2px solid var(--pst-color-link-hover);
+    box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover);
   }
 
   &:focus-visible {
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
@@ -6,12 +6,17 @@ button.btn.version-switcher__button {
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     margin-bottom: unset;
   }
-
-  @include link-style-hover;
+  &:hover {
+    box-shadow: 0 0 0 $focus-ring-width var(--pst-color-secondary);
+    border-color: transparent;
+  }
   &:active {
     color: var(--pst-color-text-base);
     border-color: var(--pst-color-border);
   }
+  &:focus-visible {
+    border-color: transparent;
+  }
 }
 
 .version-switcher__menu {
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -84,23 +84,28 @@
 
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
       // Center align on wide screens so the dropdown button is centered properly
-      align-items: center;
+      align-items: baseline;
     }
 
-    li a.nav-link {
-      @include link-style-text;
+    li.pst-header-nav-item {
+      margin-inline: 5px; // breathing room so hover, focus styles do not overlap
+      &:first-child {
+        margin-inline-start: 0;
+      }
+      &:last-child {
+        margin-inline-end: 0;
+      }
+      @include header-link;
     }
 
-    // Current page is always underlined in the navbar
-    > .current > .nav-link {
-      @include link-navbar-current;
+    li a.nav-link.dropdown-item {
+      @include link-style-text;
     }
 
     // Dropdowns for the extra links
     .dropdown {
       button {
         display: unset;
-        color: var(--pst-color-text-muted);
         border: none;
         @include link-style-hover;
       }
diff --git a/src/pydata_sphinx_theme/toctree.py b/src/pydata_sphinx_theme/toctree.py
@@ -91,7 +91,7 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
                 page = toc.attributes["parent"] if page == "self" else page
 
                 # If this is the active ancestor page, add a class so we highlight it
-                current = " current active" if page == active_header_page else ""
+                current = "current active" if page == active_header_page else ""
 
                 # sanitize page title for use in the html output if needed
                 if title is None:
@@ -108,14 +108,14 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
                 # If it's an absolute one then we use the external class and
                 # the complete url.
                 is_absolute = bool(urlparse(page).netloc)
-                link_status = "external" if is_absolute else "internal"
+                link_status = "nav-external" if is_absolute else "nav-internal"
                 link_href = page if is_absolute else context["pathto"](page)
 
                 # create the html output
                 links_html.append(
                     f"""
-                    <li class="nav-item{current}">
-                      <a class="nav-link nav-{link_status}" href="{link_href}">
+                    <li class="nav-item pst-header-nav-item {current}">
+                      <a class="nav-link {link_status}" href="{link_href}">
                         {title}
                       </a>
                     </li>
@@ -126,7 +126,7 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
         for external_link in context["theme_external_links"]:
             links_html.append(
                 f"""
-                <li class="nav-item">
+                <li class="nav-item pst-header-nav-item">
                   <a class="nav-link nav-external" href="{ external_link["url"] }">
                     { external_link["name"] }
                   </a>
@@ -140,9 +140,12 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
 
         # Wrap the final few header items in a "more" dropdown
         links_dropdown = [
-            # 🐲 brittle code, relies on the assumption that the code above
-            # gives each link in the nav a `nav-link` CSS class
-            html.replace("nav-link", "nav-link dropdown-item")
+            # 🐲 brittle code because it relies on the code above to build the HTML in a particular way
+            html.replace("nav-link", "nav-link dropdown-item").replace(
+                # Prevents the header-link mixin from applying to links within the dropdown
+                "pst-header-nav-item",
+                "",
+            )
             for html in links_html[n_links_before_dropdown:]
         ]
 
@@ -177,7 +180,7 @@ def generate_header_nav_html(
             dropdown_id = unique_html_id("pst-nav-more-links")
             links_dropdown_html = "\n".join(links_dropdown)
             out += f"""
-            <li class="nav-item dropdown">
+            <li class="nav-item dropdown pst-header-nav-item">
                 <button class="btn dropdown-toggle nav-item" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="{dropdown_id}">
                     {_(dropdown_text)}
                 </button>

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,9 @@`
`13`	`13`	`padding-left: 0;`
`14`	`14`	`padding-right: 0;`
`15`	`15`	`@include icon-navbar-hover;`
	`16`	`+ &:focus {`
	`17`	`+ color: inherit;`
	`18`	`+ }`
`16`	`19`	`}`
`17`	`20`
`18`	`21`	`// Spacing and centering`
`@@ -50,4 +53,10 @@`
`50`	`53`	`height: 1.5em;`
`51`	`54`	`border-radius: 0.2rem;`
`52`	`55`	`}`
	`56`	`+`
	`57`	`+ .fa-pydata {`
	`58`	`+ stroke: var(--pst-color-background);`
	`59`	`+ stroke-linejoin: round;`
	`60`	`+ stroke-width: 0.35;`
	`61`	`+ }`
`53`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -149,7 +149,7 @@`
`149`	`149`	`background-color: var(--pst-color-surface);`
`150`	`150`
`151`	`151`	`&:hover {`
`152`		`- border: 2px solid var(--pst-color-link-hover);`
	`152`	`+ box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover);`
`153`	`153`	`}`
`154`	`154`
`155`	`155`	`&:focus-visible {`
Original file line number	Diff line number	Diff line change
`@@ -6,12 +6,17 @@ button.btn.version-switcher__button {`
`6`	`6`	`@include media-breakpoint-up($breakpoint-sidebar-primary) {`
`7`	`7`	`margin-bottom: unset;`
`8`	`8`	`}`
`9`		`-`
`10`		`- @include link-style-hover;`
	`9`	`+ &:hover {`
	`10`	`+ box-shadow: 0 0 0 $focus-ring-width var(--pst-color-secondary);`
	`11`	`+ border-color: transparent;`
	`12`	`+ }`
`11`	`13`	`&:active {`
`12`	`14`	`color: var(--pst-color-text-base);`
`13`	`15`	`border-color: var(--pst-color-border);`
`14`	`16`	`}`
	`17`	`+ &:focus-visible {`
	`18`	`+ border-color: transparent;`
	`19`	`+ }`
`15`	`20`	`}`
`16`	`21`
`17`	`22`	`.version-switcher__menu {`