styling: navbar, dark mode, content card, sidebar

assets/scss/_kerberos-config.scss

@@ -64,6 +64,11 @@
     --text-muted: hsl(210, 14%, 89%);
     --text-muted-hsl: 210, 14%, 89%;
 
+    --card: hsl(206, 8%, 18%);
+    --card-hsl: 206, 8%, 18%;
+    --card-muted: hsl(206, 8%, 16%);
+    --card-muted-hsl: 206, 8%, 16%;
+
     --bg: hsl(210, 11%, 15%);
     --bg-hsl: 210, 11%, 15%;
   }

assets/scss/_kerberos.scss

@@ -62,9 +62,12 @@ p {
   }
   &.lead {
     color: var(--text-light);
-    margin: size(-1.5) 0 size(2);
+    margin: size(-1) 0 size(2);
     font-size: 18px;
     line-height: size(2);
+    @include break(d) {
+      margin: size(-1.5) 0 size(2);
+    }
     @include break(w) {
       font-size: 22px;
       line-height: size(3);
@@ -122,8 +125,6 @@ img {
 // ----- Layout ----- //
 
 .navbar {
-  @extend %box-shadow-bigger;
-  margin-top: 6px; // make the whole gradient visible
   .navbar-nav {
     .nav-link {
       color: var(--text-muted);

assets/scss/common/_dark.scss

@@ -42,11 +42,13 @@ body.dark .btn-outline-primary:hover {
   color: $body-bg-dark;
 }
 
+/*
 body.dark .navbar {
   background: $body-bg-dark;
   opacity: 0.975;
   border-bottom: 1px solid $border-dark;
 }
+*/
 
 body.dark.home .navbar {
   border-bottom: 0;

assets/scss/common/_global.scss

@@ -154,20 +154,20 @@ body {
 }
 
 .docs-content {
+  @extend %box-shadow-bigger;
   padding-bottom: 3rem;
   order: 1;
-  background: $white;
-  //border-right: 6px solid $gray-100;
+  background: var(--card-muted);
+  border-radius: var(--radius);
+  @include break(d) {
+    padding: 0 size(4) size(2);
+    margin: size(4) 0;
+  }
   a {
     font-weight: 500;
   }
 }
 
-.dark .docs-content {
-  border-right: 0;
-  background: #262a2d;
-}
-
 .docs-navigation {
   border-top: 1px solid $gray-200;
   margin-top: 2rem;

assets/scss/layouts/_header.scss

@@ -79,9 +79,10 @@
 }
 
 .navbar {
-  background-color: rgba(255, 255, 255, 0.95);
-  border-bottom: 1px solid $gray-200;
-  margin-top: 4px;
+  @extend %box-shadow-bigger;
+  background-color: hsla(var(--card-hsl), 0.95);
+  margin-top: 6px;
+  backdrop-filter: blur(4px);
 }
 
 .header-bar {

assets/scss/layouts/_sidebar.scss

@@ -48,16 +48,13 @@
   font-size: $font-size-base;
   margin: 1.25rem 0 0.5rem 0;
   padding: 1.5rem 0 0 0;
-}
-
-@include media-breakpoint-up(lg) {
-  .docs-links h3,
-  .page-links h3 {
-    margin: 1.125rem 1.5rem 0.75rem 0;
+  @include break(d) {
+    margin: 1.125rem size(3) 0.75rem 0;
     padding: 1.375rem 0 0 0;
   }
 }
 
+
 .docs-links h3:not(:first-child) {
   border-top: 2px solid var(--bg-muted);
 }
@@ -68,10 +65,12 @@ a.docs-link,
   color: var(--text-muted);
   display: block;
   padding: size(0.5) size(1); //0.125rem 0;
-  margin: 0 size(2) 0 0;
   font-size: $font-size-base;
   line-height: size(2);
   border-radius: var(--radius);
+  @include break(d) {
+    margin: 0 size(3) 0 0;
+  }
   &:hover {
     color: var(--text);
     background: var(--bg-muted);