Add PST cards in grid (#466)

Author: jarrodmillman

assets/theme-css/pst-deps/sphinx-design/_grid.scss

@@ -0,0 +1,21 @@
+.sd-container,
+.sd-container-fluid,
+.sd-container-lg,
+.sd-container-md,
+.sd-container-sm,
+.sd-container-xl {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--sd-gutter-x, 0.75rem);
+  padding-right: var(--sd-gutter-x, 0.75rem);
+  width: 100%;
+}
+
+.sd-row {
+  --sd-gutter-x: 1.5rem;
+  --sd-gutter-y: 0;
+  display: flex;
+  margin-top: calc(var(--sd-gutter-y) * -1);
+  margin-right: calc(var(--sd-gutter-x) * -0.5);
+  margin-left: calc(var(--sd-gutter-x) * -0.5);
+}

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

@@ -1,4 +1,5 @@
 @import "./pst-deps/sphinx-design/badges";
 @import "./pst-deps/sphinx-design/card";
+@import "./pst-deps/sphinx-design/grid";
 @import "./pst/pydata-sphinx-theme";
 @import "./spht/code";

layouts/shortcodes/grid.html

@@ -0,0 +1,32 @@
+{{/*
+
+doc: Grids.
+
+{{< grid >}}
+
+{{< card title="Only heading" >}}{{< /card >}}
+
+{{< card >}}
+Only body.
+
+But with multiple text paragraphs.
+{{< /card >}}
+
+{{< card title="Heading and body" >}}
+Content of the third card.
+
+{{< badge primary >}}
+Sample badge
+{{< /badge >}}
+
+{{< /card >}}
+
+{{< /grid >}}
+
+*/}}
+
+<div class="sd-container-fluid">
+<div class="sd-row">
+  {{ .Inner }}
+</div>
+</div>