scientific-python · alphapapa · Feb 9, 2024 · Feb 9, 2024
diff --git a/assets/theme-css/pst-deps/sphinx-design/_dropdown.scss b/assets/theme-css/pst-deps/sphinx-design/_dropdown.scss
@@ -0,0 +1,137 @@
+details.sd-dropdown {
+  position: relative;
+
+  .sd-summary-title {
+    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;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .sd-summary-content {
+    cursor: default;
+  }
+
+  summary {
+    // hide the default triangle marker
+    list-style: none;
+    padding: 1em;
+
+    // Ellipsis added when no title
+    .sd-octicon.no-title {
+      vertical-align: middle;
+    }
+  }
+
+  &[open] summary .sd-octicon.no-title {
+    visibility: hidden;
+  }
+
+  // chrome doesn't yet support list-style
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  summary:focus {
+    outline: none;
+  }
+
+  .sd-summary-icon {
+    margin-right: 0.5em;
+  }
+
+  .sd-summary-icon svg {
+    opacity: 0.8;
+  }
+
+  summary:hover .sd-summary-up svg,
+  summary:hover .sd-summary-down svg {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  .sd-summary-up svg,
+  .sd-summary-down svg {
+    display: block;
+    opacity: 0.6;
+  }
+
+  .sd-summary-up,
+  .sd-summary-down {
+    pointer-events: none;
+    position: absolute;
+    right: 1em;
+    top: 1em;
+  }
+
+  &[open] > .sd-summary-title .sd-summary-down {
+    visibility: hidden;
+  }
+
+  &:not([open]) > .sd-summary-title .sd-summary-up {
+    visibility: hidden;
+  }
+
+  // Hide the card body border when not open
+  &:not([open]).sd-card {
+    border: none;
+  }
+  &:not([open]) > .sd-card-header {
+    border: 1px solid var(--sd-color-card-border);
+    border-radius: 0.25rem;
+  }
+
+  // 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;
+  }
+}
+
+.sd-col > .sd-dropdown {
+  width: 100%;
+}
+
+.sd-summary-content > .sd-tab-set:first-child {
+  margin-top: 0;
+}
+
+@keyframes sd-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes sd-slide-down {
+  0% {
+    transform: translate(0, -10px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
diff --git a/assets/theme-css/pst-deps/sphinx-design/_icons.scss b/assets/theme-css/pst-deps/sphinx-design/_icons.scss
@@ -0,0 +1,26 @@
+.sd-octicon,
+.sd-material-icon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: middle;
+}
+
+$avatar-sizes: (
+  xs: 1rem,
+  sm: 3rem,
+  md: 5rem,
+  lg: 7rem,
+  xl: 10rem,
+  inherit: inherit,
+  initial: initial,
+);
+
+@each $size, $value in $avatar-sizes {
+  .sd-avatar-#{$size} {
+    border-radius: 50%;
+    object-fit: cover; /* Keep the image aspect ratio */
+    object-position: center; /* Center the image within the element */
+    width: $value;
+    height: $value;
+  }
+}
diff --git a/assets/theme-css/pst/extensions/_togglebutton.scss b/assets/theme-css/pst/extensions/_togglebutton.scss
@@ -0,0 +1,20 @@
+/**
+ * Sphinx togglebutton
+ */
+
+.bd-content {
+  // Admonition toggles
+  .admonition {
+    button.toggle-button {
+      color: inherit;
+    }
+  }
+
+  // Details buttons
+  details.toggle-details {
+    // Over-ride border color to re-use our primary color
+    summary {
+      border-left: 3px solid var(--pst-color-primary);
+    }
+  }
+}
diff --git a/assets/theme-css/pst/pydata-sphinx-theme.scss b/assets/theme-css/pst/pydata-sphinx-theme.scss
@@ -70,7 +70,7 @@
 //@import "./extensions/execution";
 //@import "./extensions/pydata";
 @import "./extensions/sphinx_design";
-//@import "./extensions/togglebutton";
+@import "./extensions/togglebutton";
 //@import "./extensions/notebooks";
 //@import "./extensions/leaflet";
 //

diff --git a/assets/theme-css/scientific-python-hugo-theme.scss b/assets/theme-css/scientific-python-hugo-theme.scss
@@ -1,5 +1,7 @@
 @import "./pst-deps/sphinx-design/badges";
 @import "./pst-deps/sphinx-design/card";
 @import "./pst-deps/sphinx-design/grid";
+@import "./pst-deps/sphinx-design/icons";
+@import "./pst-deps/sphinx-design/dropdown";
 @import "./pst/pydata-sphinx-theme";
 @import "./spht/code";
diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html
@@ -0,0 +1,63 @@
+{{/*
+
+doc: Dropdowns
+
+{{< dropdown >}}
+body = 'And with no title and some content!'
+{{< /dropdown >}}
+
+{{< dropdown >}}
+title = 'With a title'
+body = 'And some content!'
+{{< /dropdown >}}
+
+{{< dropdown >}}
+title = 'With a title and icon'
+icon = 'unlock'
+body = 'And some content and an icon!'
+{{< /dropdown >}}
+
+{{< dropdown >}}
+title = 'A primary color dropdown'
+icon = 'unlock'
+color = 'primary'
+body = 'And some content and an icon!'
+{{< /dropdown >}}
+
+{{< dropdown >}}
+title = 'A secondary color dropdown'
+icon = 'unlock'
+color = 'secondary'
+body = 'And some content and an icon!'
+{{< /dropdown >}}
+
+*/}}
+
+{{- $data := .Inner | transform.Unmarshal -}}
+
+<details class="sd-card sd-dropdown sd-mb-3">
+  {{ with $data.color }}
+  <summary class="sd-summary-title sd-card-header sd-bg-{{ . }} sd-bg-text-{{ . }}">
+  {{ else }}
+    <summary class="sd-summary-title sd-card-header">
+  {{ end }}
+    {{ with $data.icon }}
+    <span class="sd-summary-icon"><svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-{{ . }}" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M5.5 4a2.5 2.5 0 014.607-1.346.75.75 0 101.264-.808A4 4 0 004 4v2h-.501A1.5 1.5 0 002 7.5v6A1.5 1.5 0 003.5 15h9a1.5 1.5 0 001.5-1.5v-6A1.5 1.5 0 0012.5 6h-7V4zm-.75 3.5H3.5v6h9v-6H4.75z"></path></svg></span>
+    {{ end }}
+    {{ with $data.title }}
+      {{ . }}
+    {{ else }}
+      <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-kebab-horizontal" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M6 12a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm6 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+    {{ end }}
+      <div class="sd-summary-down">
+<svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg></div>
+     <div class="sd-summary-up">
+<svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg></div>
+  </summary>
+
+  <div class="sd-summary-content sd-card-body">
+    {{ with (trim $data.body "\n") }}
+      {{ . | markdownify }}
+    {{ end }}
+  </div>
+</details>