1 files changed, 81 insertions, 53 deletions

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 42916dc0..76d2ca87 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -1,14 +1,48 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type
-
-// Body resets
-//
-// Update the foundational and global aspects of the page.
+// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-id
+
+@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 "syntax";
 @import "buttons";
 @import "navbar";
-@import "subnav";
 @import "footer";
 @import "theme";
 @import "ads";
@@ -16,15 +50,17 @@
 .f0 { font-size: 3rem; }
 .f2 { font-size: 2rem; }
 .f3 { font-size: 1.75rem; }
+.f4 { font-size: 1.5rem; }
 .f5 { font-size: 1.25rem; }
 .fw-500 { font-weight: 500; }
 .fw-600 { font-weight: 600; }
 
 .highlight pre.chroma {
-  padding: 1rem;
+  padding: 1.25rem;
   margin: 0 0 1rem;
-  background-color: #f5f5f5;
-  border-radius: .25rem;
+  font-size: .875rem;
+  background-color: var(--bs-gray-100);
+  border-radius: var(--bs-border-radius);
 
   code {
     word-wrap: normal;
@@ -65,19 +101,32 @@ tbody tr:nth-child(odd) th {
   background-color: #f9f9f9;
 }
 
+.s-32 {
+  width: 32px;
+  height: 32px;
+}
 
 // Container
 //
 // Center the page content.
 
+#content {
+  grid-template-columns: 1.15fr 3fr;
+  gap: 3rem;
+}
+
 .posts-container {
   max-width: 760px;
 
-  @media (min-width: 40em) {
+  @media (min-width: 1024px) {
     font-size: 18px;
   }
 }
 
+.bd-gutter {
+  --bs-gutter-x: #{$bd-gutter-x};
+}
+
 
 // Posts and pages
 //
@@ -104,9 +153,14 @@ tbody tr:nth-child(odd) th {
   color: #767676;
 }
 
-// Break long links
-.post a {
-  word-break: break-word;
+.post {
+  a {
+    word-break: break-word;
+  }
+
+  li {
+    margin-bottom: .25rem;
+  }
 }
 
 // Related posts
@@ -135,7 +189,7 @@ tbody tr:nth-child(odd) th {
   color: $gray-700;
 }
 
-.post .embed-responsive {
+.post .ratio {
   margin-bottom: 2rem;
 }
 
@@ -149,7 +203,7 @@ tbody tr:nth-child(odd) th {
   margin-right: -1rem;
   margin-left: -1rem;
   overflow: hidden; // clearfix
-  color: #767676;
+  color: var(--bs-gray-600);
   text-align: center;
 }
 
@@ -158,7 +212,8 @@ tbody tr:nth-child(odd) th {
   position: relative;
   display: block;
   padding: 1rem;
-  border: 1px solid #eee;
+  text-decoration: none;
+  border: 1px solid var(--bs-gray-200);
 }
 .pagination-item:first-child {
   margin-bottom: -1px;
@@ -168,9 +223,8 @@ tbody tr:nth-child(odd) th {
 a.pagination-item:hover {
   z-index: 2;
   color: #fff;
-  text-decoration: none;
-  background-color: $blue-500;
-  border-color: $blue-500;
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
 }
 
 @media (min-width: 30em) {
@@ -183,43 +237,13 @@ a.pagination-item:hover {
   }
   .pagination-item:first-child {
     margin-bottom: 0;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
   }
   .pagination-item:last-child {
     margin-left: -1px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-}
-
-.embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-
-  .no-js & {
-    display: none;
-  }
-
-  .embed-responsive-item,
-  iframe,
-  embed,
-  object,
-  video {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-
-  &.embed-responsive-16by9 {
-    padding-bottom: 56.25%;
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
   }
 }
 
@@ -234,3 +258,7 @@ iframe[data-url^="https://jsbin.com"] {
     margin-left: -226px;
   }
 }
+
+.bd-text-purple {
+  color: var(--bd-violet);
+}