feat: fancier navbar

packages/website-ue/src/components/BaseStyles.astro

@@ -16,7 +16,7 @@ import "@fontsource-variable/roboto-flex";
     --space-8: 16rem;
     --space-9: 32rem;
 
-    --page-width: 52rem;
+    --page-width: 64rem;
 
     --max-size: max(100vw, 100vh);
 
@@ -74,8 +74,11 @@ import "@fontsource-variable/roboto-flex";
     --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4)
       var(--black-a11);
     --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5);
+    --shadow-none: 0 0 0 transparent;
 
     --blur-glass: blur(4rem);
-    --blur-tint: blur(16rem);
+    --blur-tint: blur(8rem);
+
+    --duration-brief: 200ms;
   }
 </style>

packages/website-ue/src/components/Navbar.astro

@@ -11,7 +11,7 @@ const { locale } = Astro.props;
 ---
 
 <style>
-  .navbar {
+  #navbar {
     position: sticky;
     top: 0;
     left: 0;
@@ -21,7 +21,15 @@ const { locale } = Astro.props;
 
     z-index: 1;
     backdrop-filter: var(--blur-glass) brightness(25%);
-    box-shadow: var(--shadow-subtle);
+    background-color: var(--accent-2);
+    box-shadow: var(--shadow-none);
+
+    transition-duration: var(--duration-brief);
+
+    &[data-sticky="true"] {
+      background-color: var(--gray-a2);
+      box-shadow: var(--shadow-subtle);
+    }
 
     .content {
       flex: 1;
@@ -55,7 +63,18 @@ const { locale } = Astro.props;
   }
 </style>
 
-<div class="navbar">
+<script>
+  const navbar = document.getElementById("navbar")!;
+
+  function handleScroll() {
+    navbar.dataset.sticky = `${window.scrollY > 0}`;
+  }
+
+  handleScroll();
+  window.addEventListener("scroll", handleScroll);
+</script>
+
+<div id="navbar">
   <div class="content">
     <div class="side">
       <LinkI18n {locale} href="/" className="action" tabIndex={0}>

packages/website-ue/src/components/ToolBanner.astro

@@ -30,6 +30,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
       backdrop-filter: var(--blur-tint);
 
+      @media (width > 40rem) {
+        padding: var(--space-6) var(--space-4);
+      }
+
       .centered {
         flex: 1;
         max-width: var(--page-width);
@@ -45,7 +49,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         width: 100%;
         height: 100%;
 
-        background-image: url(/assets/patterns/avatars.svg);
         mask-image: linear-gradient(
           90deg,
           transparent 25%,
@@ -67,7 +70,13 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   }}
 >
   <div class="content">
-    <div class="pattern"></div>
+    <div
+      class="pattern"
+      style={{
+        backgroundImage: `url(/assets/patterns/${tool.id}.svg)`,
+      }}
+    >
+    </div>
 
     <div class="centered">
       <Heading weight="medium" size="2">