feat: more things

src/components/Navbar/index.css.ts

@@ -1,6 +1,7 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-const MIN_WIDTH = 640 + 64;
+const MIN_WIDTH = 640 + 128;
+const HEIGHT = 48;
 
 export const hamburger = style({
   display: 'inline-flex',
@@ -21,3 +22,33 @@ export const tools = style({
     },
   },
 });
+
+const navbarBase = style({
+  // 1px overlap with content to bleed color
+  marginBottom: -1,
+  backdropFilter: 'blur(4rem) brightness(0.75)',
+  WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
+  zIndex: 1,
+  transitionDuration: '250ms',
+
+  '@media': {
+    [`screen and (min-width: ${MIN_WIDTH}px)`]: {
+      maxHeight: HEIGHT,
+    },
+  },
+});
+
+export const navbar = styleVariants({
+  false: [
+    navbarBase,
+    {
+      maxHeight: HEIGHT,
+    },
+  ],
+  true: [
+    navbarBase,
+    {
+      maxHeight: '100vh',
+    },
+  ],
+});