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);

resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content

@@ -8467,14 +8467,15 @@ body {
 .docs-content {
   padding-bottom: 3rem;
   order: 1;
-  background: #fff; }
+  background: var(--card-muted);
+  border-radius: var(--radius); }
+  @media only screen and (min-width: 992px) {
+    .docs-content {
+      padding: 0 48px 24px;
+      margin: 48px 0; } }
   .docs-content a {
     font-weight: 500; }
 
-.dark .docs-content {
-  border-right: 0;
-  background: #262a2d; }
-
 .docs-navigation {
   border-top: 1px solid #e9ecef;
   margin-top: 2rem;
@@ -8584,11 +8585,13 @@ body.dark .btn-outline-primary {
 body.dark .btn-outline-primary:hover {
   color: #212529; }
 
+/*
 body.dark .navbar {
-  background: #212529;
+  background: $body-bg-dark;
   opacity: 0.975;
-  border-bottom: 1px solid #1b1f22; }
-
+  border-bottom: 1px solid $border-dark;
+}
+*/
 body.dark.home .navbar {
   border-bottom: 0; }
 
@@ -9249,9 +9252,9 @@ table {
   height: 0; }
 
 .navbar {
-  background-color: rgba(255, 255, 255, 0.95);
-  border-bottom: 1px solid #e9ecef;
-  margin-top: 4px; }
+  background-color: hsla(var(--card-hsl), 0.95);
+  margin-top: 6px;
+  backdrop-filter: blur(4px); }
 
 .header-bar {
   border-top: 6px solid;
@@ -9539,14 +9542,12 @@ p.meta {
   font-size: 1rem;
   margin: 1.25rem 0 0.5rem 0;
   padding: 1.5rem 0 0 0; }
-
-@media (min-width: 992px) {
-  .docs-links h3, .docs-links .h3,
-  .page-links h3,
-  .page-links .h3 {
-    margin: 1.125rem 1.5rem 0.75rem 0;
-    padding: 1.375rem 0 0 0; } }
-
+  @media only screen and (min-width: 992px) {
+    .docs-links h3, .docs-links .h3,
+    .page-links h3,
+    .page-links .h3 {
+      margin: 1.125rem 36px 0.75rem 0;
+      padding: 1.375rem 0 0 0; } }
 .docs-links h3:not(:first-child), .docs-links .h3:not(:first-child) {
   border-top: 2px solid var(--bg-muted); }
 
@@ -9555,10 +9556,13 @@ a.docs-link,
   color: var(--text-muted);
   display: block;
   padding: 6px 12px;
-  margin: 0 24px 0 0;
   font-size: 1rem;
   line-height: 24px;
   border-radius: var(--radius); }
+  @media only screen and (min-width: 992px) {
+    a.docs-link,
+    .page-links a {
+      margin: 0 36px 0 0; } }
   a.docs-link:hover,
   .page-links a:hover {
     color: var(--text);
@@ -9690,6 +9694,10 @@ a.docs-link,
     --hub-hsl: 200, 93%, 77%;
     --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%; }
   @media only screen and (min-width: 768px) {
@@ -9704,7 +9712,7 @@ a.docs-link,
   Usage:
   @extend %box-shadow;
 */
-.navbar {
+.docs-content, .navbar {
   box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.04), 0px 3px 4px rgba(0, 0, 0, 0.1);
   border-radius: var(--radius); }
 
@@ -9773,9 +9781,12 @@ p {
       line-height: 30px; } }
   p.lead {
     color: var(--text-light);
-    margin: -18px 0 24px;
+    margin: -12px 0 24px;
     font-size: 18px;
     line-height: 24px; }
+    @media only screen and (min-width: 992px) {
+      p.lead {
+        margin: -18px 0 24px; } }
     @media only screen and (min-width: 1200px) {
       p.lead {
         font-size: 22px;
@@ -9819,10 +9830,8 @@ img {
     height: 100%;
     border: 0; }
 
-.navbar {
-  margin-top: 6px; }
-  .navbar .navbar-nav .nav-link, .navbar .navbar-nav .banner .nav a, .banner .nav .navbar .navbar-nav a {
-    color: var(--text-muted); }
+.navbar .navbar-nav .nav-link, .navbar .navbar-nav .banner .nav a, .banner .nav .navbar .navbar-nav a {
+  color: var(--text-muted); }
 
 .footer {
   box-shadow: 0 -4px 34px rgba(0, 0, 0, 0.04), 0 -3px 4px rgba(0, 0, 0, 0.1);