1 files changed, 70 insertions, 8 deletions

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 0e81de2b6..8ab1ed50a 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1,3 +1,42 @@
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/maps";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+// @import "bootstrap/card";
+// @import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+// @import "bootstrap/pagination";
+// @import "bootstrap/badge";
+// @import "bootstrap/alert";
+// @import "bootstrap/progress";
+// @import "bootstrap/list-group";
+@import "bootstrap/close";
+// @import "bootstrap/toasts";
+// @import "bootstrap/modal";
+// @import "bootstrap/tooltip";
+// @import "bootstrap/popover";
+// @import "bootstrap/carousel";
+// @import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+// @import "bootstrap/placeholders";
+@import "bootstrap/helpers";
+@import "bootstrap/utilities/api";
+
 @import "variables";
 @import "buttons";
 @import "clipboard-js";
@@ -7,9 +46,14 @@
 @import "syntax";
 @import "ads";
 
+.bd-gutter {
+  --bs-gutter-x: #{$bd-gutter-x};
+}
+
 .bi {
   display: inline-block;
   vertical-align: -.125em;
+  fill: currentcolor;
 }
 
 .hero-notice {
@@ -23,13 +67,15 @@
 .highlight {
   padding: 1.25rem;
   margin-bottom: 1.5rem;
-  background-color: $gray-100;
-  border-radius: .25rem;
+  background-color: var(--bs-gray-100);
+  border-radius: .5rem;
 
   pre {
     margin-bottom: 0;
     scrollbar-width: none;
 
+    &:focus { outline: 0; }
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -71,15 +117,31 @@
 }
 
 .hero {
-  border-bottom: 1px solid rgba(0, 0, 0, .05);
+  border-bottom: 1px solid rgba(0, 0, 0, .075);
 
-  .highlight pre {
-    padding-right: 4em;
+  .highlight {
     margin-bottom: 0;
-    border-radius: .5rem;
+    color: var(--bs-gray-200);
+    background-color: var(--bs-gray-800);
+
+    pre {
+      margin-bottom: 0;
+
+      @media (min-width: 768px) {
+        padding-right: 4em;
+      }
+    }
   }
+
   .btn-clipboard {
     top: .625em;
+    color: var(--bs-gray-200);
+    background-color: var(--bs-gray-800);
+  }
+
+  .btn {
+    padding: 1rem 1.25rem;
+    border-radius: .5rem;
   }
 
   hr {
@@ -112,10 +174,10 @@
     padding: 100px 2rem;
     margin-right: 15px;
     margin-left: 15px;
-    color: $gray-500;
+    color: var(--bs-gray-500);
     text-align: center;
     content: "Nothing found, try searching again.";
-    background-color: $gray-100;
+    background-color: var(--bs-gray-100);
     border-radius: .5rem;
   }
 }