feat: fancier navbar

packages/website-ue/public/assets/patterns/tanks.svg

@@ -0,0 +1,3 @@
+<svg width="70" height="35" viewBox="0 0 70 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70 32L64 35H0L70 0V32ZM0 32V0H64L0 32Z" fill="#EEEEF0"/>
+</svg>

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%);
+    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">

packages/website-ue/src/layouts/BaseLayout.astro

@@ -29,7 +29,10 @@ const { accent, noNavbar, locale } = Astro.props;
     <ColorScale color="white" alpha />
 
     <ColorScale color={accent} />
+    <ColorScale color={accent} alpha />
     <ColorAlias color={accent} alias="accent" />
+    <ColorAlias color={accent} alpha alias="accent" />
+
     <BaseStyles />
 
     <style>

packages/website-ue/src/pages/[...locale]/tanks/index.astro

@@ -1,14 +1,19 @@
 ---
 import "@radix-ui/colors/violet-dark.css";
+import ToolBanner from "../../../components/ToolBanner.astro";
 import { api } from "../../../core/api/dynamic";
+import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 export { getStaticPaths } from "../index.astro";
 
+const { locale } = Astro.props;
 const tankList = await api.tankList();
 ---
 
-<BaseLayout accent="violet">
+<BaseLayout {locale} accent="purple">
+  <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
+
   <h1>tanks</h1>
 
   {