feat: transparent nav header

components/main/MainContent.vue

@@ -11,7 +11,7 @@ defineProps<{
   <div relative>
     <div
       sticky top-0 z10
-      border="b base" bg-base
+      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" backdrop-blur
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>

styles/vars.css

@@ -6,6 +6,7 @@
   --c-border-dark: #dccfcf;
 
   --c-bg-base: #fafafa;
+  --c-bg-base-rgb: 250, 250, 250;
   --c-bg-active: #f2f2f2;
   --c-bg-code: #00000006;
   --c-bg-selection: #8885;
@@ -34,6 +35,7 @@
   --c-border-dark: #545251;
 
   --c-bg-base: #111;
+  --c-bg-base-rgb: 17, 17, 17;
   --c-bg-active: #191919;
   --c-bg-code: #ffffff06;
   --c-bg-fade: #EA9E4411;