Fix grid layout (#475)

assets/theme-css/scientific-python-hugo-theme.scss

@@ -1,7 +1,3 @@
-@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 "./sphinx-design/index";
 @import "./pst/pydata-sphinx-theme";
 @import "./spht/code";

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

@@ -0,0 +1,34 @@
+// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)
+// Copyright 2011-2019 The Bootstrap Authors
+// Copyright 2011-2019 Twitter, Inc.
+// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+
+.sd-badge {
+  display: inline-block;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Remove underline
+a.sd-badge {
+  text-decoration: none;
+}
+
+// Quick fix for badges in buttons
+.sd-btn .sd-badge {
+  position: relative;
+  top: -1px;
+}
+
+// note badge colors were removed in v5

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

@@ -0,0 +1,58 @@
+$borders: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px,
+);
+
+@each $name, $value in $borders {
+  .sd-border-#{$name} {
+    border: $value solid !important;
+  }
+  .sd-border-top-#{$name} {
+    border-top: $value solid !important;
+  }
+  .sd-border-bottom-#{$name} {
+    border-bottom: $value solid !important;
+  }
+  .sd-border-right-#{$name} {
+    border-right: $value solid !important;
+  }
+  .sd-border-left-#{$name} {
+    border-left: $value solid !important;
+  }
+}
+
+$rounded: (
+  0: 0,
+  1: 0.2rem,
+  2: 0.3rem,
+  3: 0.5rem,
+  pill: 50rem,
+  circle: 50%,
+);
+
+@each $name, $value in $rounded {
+  .sd-rounded-#{$name} {
+    border-radius: $value !important;
+  }
+}
+
+// shadows
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.sd-shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem var(--sd-color-shadow) !important;
+}
+
+.sd-shadow-md {
+  box-shadow: 0 0.5rem 1rem var(--sd-color-shadow) !important;
+}
+
+.sd-shadow-lg {
+  box-shadow: 0 1rem 3rem var(--sd-color-shadow) !important;
+}

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

@@ -0,0 +1,97 @@
+// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)
+// Copyright 2011-2019 The Bootstrap Authors
+// Copyright 2011-2019 Twitter, Inc.
+// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+
+.sd-btn {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  //   color: var(--sd-color-dark);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  vertical-align: middle;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  //   &:focus {
+  //     box-shadow: 0 0 0 0.2rem rgba(mix($blue, $blue, 15%), .25);
+  //     outline: 0;
+  //   }
+
+  //   &:visited {
+  //     color: var(--sd-color-dark);
+  //   }
+
+  //   // override alabaster theme
+  //   &.reference {
+  //     border-bottom: inherit;
+  //   }
+  //   &.reference:hover {
+  //     border-bottom: inherit;
+  //   }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-btn {
+    transition: none;
+  }
+}
+
+@each $color, $value in $semantic-colors {
+  .sd-btn-#{$color},
+  .sd-btn-outline-#{$color}:hover,
+  .sd-btn-outline-#{$color}:focus {
+    color: var(--sd-color-#{$color}-text) !important;
+    background-color: var(--sd-color-#{$color}) !important;
+    border-color: var(--sd-color-#{$color}) !important;
+    border-width: 1px !important;
+    border-style: solid !important;
+  }
+  .sd-btn-#{$color}:hover,
+  .sd-btn-#{$color}:focus {
+    color: var(--sd-color-#{$color}-text) !important;
+    background-color: var(--sd-color-#{$color}-highlight) !important;
+    border-color: var(--sd-color-#{$color}-highlight) !important;
+    border-width: 1px !important;
+    border-style: solid !important;
+  }
+  .sd-btn-outline-#{$color} {
+    color: var(--sd-color-#{$color}) !important;
+    border-color: var(--sd-color-#{$color}) !important;
+    border-width: 1px !important;
+    border-style: solid !important;
+  }
+}
+
+// make parent clickable
+.sd-stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+.sd-hide-link-text {
+  font-size: 0;
+}