Refactor SCSS structure

src/pydata_sphinx_theme/assets/styles/_base.scss → src/pydata_sphinx_theme/assets/styles/base/_base.scss

@@ -124,17 +124,3 @@ pre {
   border-radius: 0.2rem;
   box-shadow: 1px 1px 1px var(--pst-color-preformatted-shadow);
 }
-
-// Override bootstrap by restoring the basic theme default.
-dd {
-  margin-top: 3px;
-  margin-bottom: 10px;
-  margin-left: 30px;
-}
-
-// Prevent field lists from stretching too much on narrow screens
-// ref: https://css-tricks.com/preventing-a-grid-blowout/
-dl.field-list {
-  display: grid;
-  grid-template-columns: fit-content(30%) minmax(0, 1fr);
-}

src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss

@@ -0,0 +1,34 @@
+/**
+ * Icon links in the navbar
+ */
+
+#navbar-icon-links {
+  i {
+    &.fa,
+    &.fab,
+    &.far,
+    &.fas {
+      vertical-align: middle;
+      font-style: normal;
+      font-size: 1.5rem;
+      line-height: 1.25;
+    }
+
+    /* Social media buttons */
+    &.fa-twitter-square:before {
+      color: #55acee;
+    }
+
+    &.fa-gitlab:before {
+      color: #548;
+    }
+
+    &.fa-bitbucket:before {
+      color: #0052cc;
+    }
+  }
+
+  img.icon-link-image {
+    height: 1.5em;
+  }
+}

src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss

@@ -0,0 +1,56 @@
+/* Previous / Next buttons */
+.prev-next-area {
+  margin: 20px 0px;
+
+  p {
+    margin: 0 0.3em;
+    line-height: 1.3em;
+  }
+
+  i {
+    font-size: 1.2em;
+  }
+
+  a {
+    // So that buttons align with icons
+    display: flex;
+    align-items: center;
+    border: none;
+    padding: 10px;
+    max-width: 45%;
+    overflow-x: hidden;
+    color: var(--pst-color-prev-next-btn);
+    text-decoration: none;
+
+    p.prev-next-title {
+      color: var(--pst-color-prev-next);
+      font-weight: 600;
+      font-size: 1.1em;
+    }
+
+    &:hover p.prev-next-title {
+      text-decoration: underline;
+    }
+
+    .prev-next-info {
+      flex-direction: column;
+      margin: 0 0.5em;
+
+      .prev-next-subtitle {
+        text-transform: capitalize;
+      }
+    }
+
+    &.left-prev {
+      float: left;
+    }
+
+    &.right-next {
+      float: right;
+
+      div.prev-next-info {
+        text-align: right;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+.bd-search {
+  position: relative;
+  padding: 1rem 15px;
+  margin-right: -15px;
+  margin-left: -15px;
+
+  .icon {
+    position: absolute;
+    color: var(--pst-color-search);
+    left: 25px;
+  }
+
+  input {
+    background-color: var(--pst-color-search-background);
+    border-radius: 0.2rem;
+    border: 1px solid var(--pst-color-search-border);
+    padding-left: 35px;
+
+    // Inner-text of the search bar
+    &::placeholder {
+      color: var(--pst-color-search);
+    }
+
+    // Background should always be same color regardless of active or nor
+    &:active,
+    &:focus {
+      background-color: var(--pst-color-search-background);
+    }
+  }
+}

src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

@@ -0,0 +1,29 @@
+// the icons for theme change
+#theme-switch {
+  border-color: var(--pst-color-navbar-link-hover);
+  margin-right: 0.4rem;
+
+  a {
+    color: var(--pst-color-navbar-link-hover);
+    display: none;
+  }
+
+  &:hover {
+    border-color: var(--pst-color-navbar-background);
+    background-color: var(--pst-color-navbar-link-hover);
+
+    a {
+      color: var(--pst-color-navbar-background);
+    }
+  }
+}
+
+html[data-mode="auto"] #theme-switch a[data-mode="auto"] {
+  display: block;
+}
+html[data-mode="light"] #theme-switch a[data-mode="light"] {
+  display: block;
+}
+html[data-mode="dark"] #theme-switch a[data-mode="dark"] {
+  display: block;
+}

src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss

@@ -0,0 +1,4 @@
+#version_switcher_button {
+  background-color: var(--pst-color-active-navigation);
+  border-color: var(--pst-color-active-navigation);
+}

src/pydata_sphinx_theme/assets/styles/_admonitions.scss → src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss

@@ -195,3 +195,19 @@ div.admonition,
     }
   }
 }
+
+// Similar content blocks that are not technically admonitions.
+.topic {
+  background-color: var(--pst-color-background-up);
+  border-color: var(--pst-color-border);
+}
+
+aside.sidebar {
+  background-color: var(--pst-color-background-up-up);
+  border-color: var(--pst-color-border);
+}
+
+.seealso dd {
+  margin-top: 0;
+  margin-bottom: 0;
+}

src/pydata_sphinx_theme/assets/styles/_api.scss → src/pydata_sphinx_theme/assets/styles/content/_api.scss

@@ -92,3 +92,13 @@ table.field-list {
 dt:target {
   background-color: var(--pst-color-target);
 }
+
+.viewcode-back {
+  font-family: var(--pst-font-family-base);
+}
+
+.viewcode-block:target {
+  background-color: #f4debf;
+  border-top: 1px solid #ac9;
+  border-bottom: 1px solid #ac9;
+}

src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss

@@ -0,0 +1,15 @@
+// For consistency, add bracket around footnotes/citations which are
+// cited more than once. E.g. [Newton](1,2) instead of Newton(1,2)
+dt.label > span.brackets:not(:only-child):before {
+  content: "[";
+}
+
+dt.label > span.brackets:not(:only-child):after {
+  content: "]";
+}
+
+// Make footnote as a supercript
+a.footnote-reference {
+  vertical-align: super;
+  font-size: small;
+}

src/pydata_sphinx_theme/assets/styles/content/_hacks.scss

@@ -0,0 +1,16 @@
+/**
+ * Hacky fixes that don't fit cleanly into other sections
+ */
+
+// Ensure user highlighting/selecting behaves properly
+// From https://stackoverflow.com/a/34372191
+table.highlighttable td.linenos,
+span.linenos,
+div.doctest > div.highlight span.gp {
+  /* gp: Generic.Prompt */
+  user-select: none;
+  -webkit-user-select: text; /* Safari fallback only */
+  -webkit-user-select: none; /* Chrome/Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+ */
+}

src/pydata_sphinx_theme/assets/styles/content/_lists.scss

@@ -0,0 +1,13 @@
+// Override bootstrap by restoring the basic theme default.
+dd {
+  margin-top: 3px;
+  margin-bottom: 10px;
+  margin-left: 30px;
+}
+
+// Prevent field lists from stretching too much on narrow screens
+// ref: https://css-tricks.com/preventing-a-grid-blowout/
+dl.field-list {
+  display: grid;
+  grid-template-columns: fit-content(30%) minmax(0, 1fr);
+}

src/pydata_sphinx_theme/assets/styles/content/_quotes.scss

@@ -0,0 +1,6 @@
+// GitHub blockquote style
+blockquote {
+  padding: 0 1em;
+  color: var(--pst-color-deactivate);
+  border-left: 0.25em solid var(--pst-color-blockquote-border);
+}

src/pydata_sphinx_theme/assets/styles/content/_spans.scss

@@ -0,0 +1,14 @@
+/**
+ * Span-level styling within content
+ */
+
+span.guilabel {
+  border: 1px solid var(--pst-color-guilabel-border);
+  background: var(--pst-color-guilabel-background);
+  color: var(--pst-color-guilabel-text);
+  font-size: 80%;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 2.4px 6px;
+  margin: auto 2px;
+}

src/pydata_sphinx_theme/assets/styles/extensions/_bootstrap.scss

@@ -0,0 +1,11 @@
+/**
+ * Special cases for Bootstrap functionality
+ */
+
+// Bootstrap adds margin to their general container class. However, sphinx/docutils
+// can also generate output with the container class, but in those cases we should
+// not add the margin from bootstrap.
+.docutils.container {
+  padding-left: unset;
+  padding-right: unset;
+}

src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss

@@ -0,0 +1,8 @@
+/**
+ * Special-cases for packages in the PyData ecosystem
+ */
+
+// xarray output display in bootstrap
+.xr-wrap[hidden] {
+  display: block !important;
+}