Merge branch 'main' into unify-figure-shortcodes

Author: stefanv

.github/workflows/label-check.yaml

@@ -12,6 +12,8 @@ on:
 env:
   LABELS: ${{ join( github.event.pull_request.labels.*.name, ' ' ) }}
 
+permissions: {}
+
 jobs:
   check-type-label:
     name: ensure type label

.github/workflows/milestone-merged-prs.yaml

@@ -10,6 +10,11 @@ on:
 jobs:
   milestone_pr:
     name: attach to PR
+    if: github.event.pull_request.merged == true
+    permissions:
+      contents: read
+      issues: write
+      pull-requests: read
     runs-on: ubuntu-latest
     steps:
       - uses: scientific-python/attach-next-milestone-action@bc07be829f693829263e57d5e8489f4e57d3d420

.pre-commit-config.yaml

@@ -3,7 +3,7 @@
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: cef0300fd0fc4d2a87a85fa2093c6b283ea36f4b # frozen: v5.0.0
+    rev: 3e8a8703264a2f4a69428a0aa4dcb512790b2c8c # frozen: v6.0.0
     hooks:
       - id: check-added-large-files
       - id: check-ast
@@ -19,14 +19,14 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/rbubley/mirrors-prettier
-    rev: bc7af46104f0f5368b95878decf720f9f00c2559 # frozen: v3.4.2
+    rev: 5ba47274f9b181bce26a5150a725577f3c336011 # frozen: v3.6.2
     hooks:
       - id: prettier
         types_or: [yaml, toml, markdown, css, scss, javascript, json]
         args: [--prose-wrap=preserve]
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: 73413df07b4ab0bf103ca1ae73c7cec5c0ace593 # frozen: v0.9.2
+    rev: 9c89adb347f6b973f4905a4be0051eb2ecf85dea # frozen: v0.13.3
     hooks:
       - id: ruff
         args:
@@ -39,7 +39,7 @@ repos:
       - id: ruff-format
 
   - repo: https://github.com/woodruffw/zizmor-pre-commit
-    rev: 4dcc98ccce605605fd6d5202bf803a8c8bc34e8d # v1.1.1
+    rev: v1.14.2 # v1.1.1
     hooks:
       - id: zizmor
 

assets/icons/linkedin.svg

@@ -39,6 +39,18 @@
   color: var(--spht-color-link-hover);
 }
 
+.footer-item a.nav-external {
+  white-space: nowrap;
+}
+
+.footer-item a.nav-external::after {
+  font: var(--fa-font-solid);
+  content: "\f35d";
+  font-size: 0.75em;
+  margin-left: 0.3em;
+  display: inline-block;
+}
+
 .footer-actions {
   max-width: 25vw;
   margin: 1.25rem 1.563rem;

assets/theme-css/footer.css

@@ -1,4 +1,3 @@
-nav,
 .navbar {
   background: var(--pst-color-background);
   position: sticky;
@@ -42,6 +41,15 @@ a.navbar-item:hover,
   text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
 }
 
+a.navbar-item.nav-external::after,
+.navbar-dropdown a.navbar-item.nav-external::after {
+  font: var(--fa-font-solid);
+  content: "\f35d";
+  font-size: 0.75em;
+  margin-left: 0.3em;
+  display: inline-block;
+}
+
 .navbar-burger {
   font-family: inherit;
   font-size: 1em;

assets/theme-css/navbar.css

@@ -1,6 +1,10 @@
 /**
  * Breadcrumbs for parent pages meant for the article header
  */
+nav[aria-label="Breadcrumb"] {
+  width: fit-content;
+}
+
 ul.bd-breadcrumbs {
   list-style: none;
   padding-left: 0;

assets/theme-css/pst/components/_breadcrumbs.scss

@@ -33,11 +33,12 @@ html {
 
   // Font family
   // These are adapted from https://systemfontstack.com/ */
-  --pst-font-family-base-system: -apple-system, "BlinkMacSystemFont",
-    "Segoe UI", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol";
-  --pst-font-family-monospace-system: "SFMono-Regular", "Menlo", "Consolas",
-    "Monaco", "Liberation Mono", "Lucida Console", monospace;
+  --pst-font-family-base-system:
+    -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --pst-font-family-monospace-system:
+    "SFMono-Regular", "Menlo", "Consolas", "Monaco", "Liberation Mono",
+    "Lucida Console", monospace;
   --pst-font-family-base: var(--pst-font-family-base-system);
   --pst-font-family-heading: var(--pst-font-family-base-system);
   --pst-font-family-monospace: var(--pst-font-family-monospace-system);

assets/theme-css/pst/variables/_fonts.scss

@@ -5,10 +5,35 @@ details.sd-dropdown {
     font-weight: 700;
     // don't overlap the chevron
     padding-right: 3em !important;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
     user-select: none;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .sd-summary-text {
+      flex-grow: 1;
+      line-height: 1.5;
+      padding-right: 0.5rem;
+    }
+
+    .sd-summary-state-marker {
+      position: absolute;
+      right: 1em;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 0.75em;
+    }
+
+    // The hover effect should only change opacity, not transform.
+    // We are transforming the chevron elements instead, see below.
+    &:hover .sd-summary-state-marker svg {
+      opacity: 1;
+    }
   }
 
   &:hover {
@@ -54,7 +79,6 @@ details.sd-dropdown {
   summary:hover .sd-summary-up svg,
   summary:hover .sd-summary-down svg {
     opacity: 1;
-    transform: scale(1.1);
   }
 
   .sd-summary-up svg,
@@ -79,6 +103,61 @@ details.sd-dropdown {
     visibility: hidden;
   }
 
+  // Chevron transitions
+  .sd-summary-chevron-right i,
+  .sd-summary-chevron-down i {
+    display: inline-block;
+    transform-origin: center;
+    opacity: 0.6;
+  }
+
+  // The chevron rotation animations are applied to
+  // the icon inside the dropdown title div
+  &[open] > .sd-summary-title .sd-summary-chevron-right i {
+    transform: rotate(90deg);
+    animation: rotate-to-90 0.25s ease-in-out;
+  }
+
+  &[open] > .sd-summary-title .sd-summary-chevron-down i {
+    transform: rotate(-180deg);
+    animation: rotate-to-negative-180 0.25s ease-in-out;
+  }
+
+  &:not([open]) > .sd-summary-title .sd-summary-chevron-right i {
+    transform: rotate(0deg);
+    animation: rotate-to-0-from-90 0.25s ease-in-out;
+  }
+
+  &:not([open]) > .sd-summary-title .sd-summary-chevron-down i {
+    transform: rotate(0deg);
+    animation: rotate-to-0-from-negative-180 0.25s ease-in-out;
+  }
+
+  > .sd-summary-title:hover .sd-summary-chevron-right i,
+  > .sd-summary-title:hover .sd-summary-chevron-down i {
+    opacity: 1;
+  }
+
+  // Combined transforms for each state with hover. These cover
+  // the cases where the chevron is rotated, say, when the dropdown
+  // is open or if the chevron starts rotated (e.g. in the down-up
+  // state).
+  &:not([open]) > .sd-summary-title:hover .sd-summary-chevron-right i {
+    transform: scale(1.1);
+  }
+
+  &:not([open]) > .sd-summary-title:hover .sd-summary-chevron-down i {
+    transform: scale(1.1);
+  }
+
+  &[open] > .sd-summary-title:hover .sd-summary-chevron-right i {
+    transform: rotate(90deg) scale(1.1);
+  }
+
+  &[open] > .sd-summary-title:hover .sd-summary-chevron-down i {
+    transform: rotate(-180deg) scale(1.1);
+  }
+
   // Hide the card body border when not open
   &:not([open]).sd-card {
     border: none;
@@ -90,18 +169,10 @@ details.sd-dropdown {
 
   // Transition animation
   &.sd-fade-in[open] summary ~ * {
-    -moz-animation: sd-fade-in 0.5s ease-in-out;
-    -webkit-animation: sd-fade-in 0.5s ease-in-out;
     animation: sd-fade-in 0.5s ease-in-out;
   }
 
   &.sd-fade-in-slide-down[open] summary ~ * {
-    -moz-animation:
-      sd-fade-in 0.5s ease-in-out,
-      sd-slide-down 0.5s ease-in-out;
-    -webkit-animation:
-      sd-fade-in 0.5s ease-in-out,
-      sd-slide-down 0.5s ease-in-out;
     animation:
       sd-fade-in 0.5s ease-in-out,
       sd-slide-down 0.5s ease-in-out;
@@ -135,3 +206,43 @@ details.sd-dropdown {
     transform: translate(0, 0);
   }
 }
+
+@keyframes rotate-to-90 {
+  from {
+    transform: rotate(0deg) scale(1.1);
+  }
+  to {
+    transform: rotate(90deg) scale(1.1);
+  }
+}
+
+@keyframes rotate-to-0-from-90 {
+  from {
+    transform: rotate(90deg) scale(1.1);
+  }
+  to {
+    transform: rotate(0deg) scale(1.1);
+  }
+}
+
+// TODO: These keyframes are disabled for now to maintain
+// parity with Sphinx Design upstream, which does not implement
+// the down-up chevron animation.
+
+// @keyframes rotate-to-negative-180 {
+//   from {
+//     transform: rotate(0deg) scale(1.1);
+//   }
+//   to {
+//     transform: rotate(-180deg) scale(1.1);
+//   }
+// }
+
+// @keyframes rotate-to-0-from-negative-180 {
+//   from {
+//     transform: rotate(-180deg) scale(1.1);
+//   }
+//   to {
+//     transform: rotate(0deg) scale(1.1);
+//   }
+// }

assets/theme-css/sphinx-design/_dropdown.scss

@@ -41,6 +41,9 @@ params:
       url: /shortcodes/
     - title: Examples
       url: /examples/
+    - title: Repository
+      url: https://github.com/scientific-python/scientific-python-hugo-theme
+      is_external: true
     - title: More
       sublinks:
         - title: Dropdown item
@@ -61,6 +64,8 @@ params:
         icon: discourse
       - link: https://discord.com/invite/vur45CbwMz
         icon: discord
+      - link: https://linkedin.com/company/scientific-python
+        icon: linkedin
 
     quicklinks:
       column1:
@@ -70,9 +75,11 @@ params:
             link: /about/
           - text: Theme GitHub
             link: https://github.com/scientific-python/scientific-python-hugo-theme
+            is_external: true
       column2:
         links:
           - text: Scientific Python Forum
             link: https://discuss.scientific-python.org
+            is_external: true
       column3:
         links: