feat: More glass-like navbar, support for author set in front matter, remove option to disable nav icons

sass/_crt.scss

@@ -41,10 +41,10 @@
 
   @keyframes scanlines {
     from {
-      transform: translateY(0px);
+      transform: translateY(-8px);
     }
     to {
-      transform: translateY(-8px);
+      transform: translateY(0px);
     }
   }
 }

sass/_nav.scss

@@ -1,18 +1,19 @@
 #header {
-  -webkit-backdrop-filter: blur(24px);
-  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
   background-color: var(--nav-bg);
-  border-radius: 999px;
-  box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
+  border-radius: 28px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0px 12px 24px -16px rgba(0, 0, 0, 0.5);
   margin: 1rem auto;
   position: sticky;
   top: 1rem;
   width: min(calc(var(--content-width) + 10rem), 90%);
   z-index: 1;
 
-  @media screen and (max-width: 630px) {
+  @media screen and (max-width: 480px) {
     & {
-      border-radius: 16px;
+      width: auto;
     }
   }
 
@@ -21,7 +22,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    padding: 0.4rem;
+    padding: 0.5rem;
 
     @media screen and (max-width: 630px) {
       & {
@@ -29,6 +30,12 @@
       }
     }
 
+    @media screen and (max-width: 480px) {
+      #title {
+        margin: 0 0.2rem 0 0;
+      }
+    }
+
     ul {
       display: flex;
       flex-wrap: wrap;
@@ -47,13 +54,17 @@
       border-radius: 999px;
       color: var(--fg-muted-4);
       font-weight: 400;
-      padding: 0.4rem 1rem;
+      padding: 0.45rem 1rem;
       text-decoration: none;
       transition: var(--transition);
 
-      @media screen and (max-width: 630px) {
+      @media screen and (max-width: 480px) {
         & {
-          border-radius: var(--rounded-corner);
+          padding: 0.45rem 0.75rem;
+        }
+
+        span {
+          display: none;
         }
       }
 

sass/_variables.scss

@@ -11,14 +11,6 @@ $crt-bg: radial-gradient(
   color.scale($primary-color, $lightness: -90%)
 );
 
-$nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
-$nav-bg-d: color.scale(
-  $bg-color-d,
-  $alpha: -20%,
-  $lightness: 5%,
-  $saturation: -50%
-);
-
 $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
   0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
@@ -33,7 +25,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --fg-muted-3: rgba(0, 0, 0, 0.2);
   --fg-muted-4: rgba(0, 0, 0, 0.5);
   --fg-muted-5: rgba(0, 0, 0, 0.6);
-  --nav-bg: #{$nav-bg-l};
+  --nav-bg: rgba(242, 242, 242, 0.7);
   --orange-bg: rgba(255, 120, 0, 0.1);
   --orange-fg: rgb(255, 120, 0);
   --primary-color-alpha: #{$primary-color-alpha};
@@ -75,7 +67,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
     --fg-muted-3: rgba(255, 255, 255, 0.2);
     --fg-muted-4: rgba(255, 255, 255, 0.5);
     --fg-muted-5: rgba(255, 255, 255, 0.6);
-    --nav-bg: #{$nav-bg-d};
+    --nav-bg: rgba(25, 25, 25, 0.7);
     --orange-bg: rgba(255, 190, 111, 0.1);
     --orange-fg: rgb(255, 190, 111);
     --purple-bg: rgba(220, 138, 221, 0.1);