Use Hugo for our docs Sass and JS. (#29280)

Now there's only one command needed to run the docs: `npm run docs-serve`.

Also, simplify the npm scripts.

1 files changed, 67 insertions, 0 deletions

diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
new file mode 100644
index 0000000000..be6aa91ffb
--- /dev/null
+++ b/site/assets/scss/_brand.scss
@@ -0,0 +1,67 @@
+//
+// Brand guidelines
+//
+
+// Logo series wrapper
+.bd-brand-logos {
+  color: $bd-purple;
+
+  .inverse {
+    color: $white;
+    background-color: $bd-purple;
+  }
+}
+
+// Individual items
+.bd-brand-item {
+  width: 100%;
+  padding: 4rem 1rem;
+
+  + .bd-brand-item {
+    border-top: 1px solid $white;
+  }
+
+  @include media-breakpoint-up(md) {
+    + .bd-brand-item {
+      border-top: 0;
+      border-left: 1px solid $white;
+    }
+  }
+}
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+  display: flex;
+  margin: 0 -5px;
+
+  // Docs colors
+  .bd-purple {
+    background-color: $bd-purple;
+  }
+  .bd-purple-light {
+    background-color: $bd-purple-light;
+  }
+  .bd-purple-lighter {
+    background-color: #e5e1ea;
+  }
+  .bd-gray {
+    background-color: #f9f9f9;
+  }
+}
+
+.color-swatch {
+  width: 4rem;
+  height: 4rem;
+  margin-right: .25rem;
+  margin-left: .25rem;
+  @include border-radius();
+
+  @include media-breakpoint-up(md) {
+    width: 6rem;
+    height: 6rem;
+  }
+}