feat: ahhhhhhhhhh

packages/website-ue/src/components/Heading/index.tsx

@@ -9,7 +9,7 @@ export interface HeadingProps extends Omit<TextProps, "size"> {
 export function Heading({
   className,
   weight,
-  size = "1",
+  size = "2",
   ...props
 }: HeadingProps) {
   return (

packages/website-ue/src/components/Link/index.css

@@ -11,4 +11,13 @@
   &[data-underline="hover"]:focus {
     text-decoration: underline;
   }
+
+  &[data-high-contrast="true"] {
+    color: var(--accent-12);
+  }
+
+  svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
 }

packages/website-ue/src/components/Link/index.tsx

@@ -4,14 +4,21 @@ import "./index.css";
 
 export interface LinkProps extends ComponentProps<"a"> {
   underline?: "always" | "hover" | "never";
+  highContrast?: boolean;
 }
 
-export function Link({ className, underline = "always", ...props }: LinkProps) {
+export function Link({
+  highContrast,
+  className,
+  underline = "always",
+  ...props
+}: LinkProps) {
   return (
     <a
       className={classNames("link", className)}
       {...props}
       data-underline={underline}
+      data-high-contrast={highContrast}
     />
   );
 }

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

@@ -19,26 +19,40 @@ const strings = await api.strings(locale);
 
 <style>
   #navbar {
-    position: sticky;
-    top: 0;
+    position: fixed;
+    bottom: 0;
     left: 0;
+    width: 100%;
 
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
 
     z-index: 1;
-    background-color: var(--gray-3);
+    background-color: var(--gray-a5);
     box-shadow: var(--shadow-none);
+    backdrop-filter: var(--blur-glass) brightness(5%);
+    border-radius: var(--space-4) var(--space-4) 0 0;
 
     transition-duration: var(--duration-brief);
 
     &[data-sticky="true"] {
-      background-color: var(--gray-a2);
-      box-shadow: var(--shadow-subtle);
+      transform: translateY(100%);
+    }
+
+    .bar {
+      width: 100%;
+      max-width: var(--space-6);
+      height: var(--space-2);
+      margin-top: var(--space-3);
+
+      background-color: var(--white-a2);
+
+      border-radius: var(--max-size);
     }
 
     .content {
-      flex: 1;
+      width: 100%;
       max-width: calc(var(--page-width) + 2 * var(--space-4));
 
       display: flex;
@@ -97,9 +111,12 @@ const strings = await api.strings(locale);
 
 <script>
   const navbar = document.getElementById("navbar")!;
+  let lastScrollY = window.scrollY;
 
   function handleScroll() {
-    navbar.dataset.sticky = `${window.scrollY > 0}`;
+    const dy = window.scrollY - lastScrollY;
+    lastScrollY = window.scrollY;
+    navbar.dataset.sticky = `${dy > 0}`;
   }
 
   handleScroll();
@@ -107,6 +124,8 @@ const strings = await api.strings(locale);
 </script>
 
 <div id="navbar">
+  <div class="bar"></div>
+
   <div class="content">
     <LinkI18n {locale} href="/" className="action" tabIndex={0} data-selected>
       <div class="selector">

packages/website-ue/src/components/Section/index.css

@@ -1,7 +1,7 @@
 .section {
   display: flex;
   justify-content: center;
-  padding: 0 var(--space-4);
+  padding: var(--space-4);
 
   .content {
     flex: 1;

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

@@ -1,7 +1,9 @@
 ---
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import { api } from "../core/api/dynamic";
 import type { Tool } from "../core/tools/tools";
 import { Heading } from "./Heading";
+import { LinkI18n } from "./LinkI18n";
 import { Text } from "./Text";
 
 interface Props {
@@ -17,7 +19,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 <style>
   .tool-banner {
     background-size: cover;
-    margin-bottom: calc(var(--space-5) - var(--space-4));
 
     .content {
       width: 100%;
@@ -25,7 +26,8 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       position: relative;
 
       display: flex;
-      justify-content: center;
+      flex-direction: column;
+      gap: var(--space-4);
       padding: var(--space-5) var(--space-4);
       box-sizing: border-box;
 
@@ -35,6 +37,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         padding: var(--space-6) var(--space-4);
       }
 
+      .back {
+        z-index: 1;
+      }
+
       .centered {
         flex: 1;
         max-width: var(--page-width);
@@ -71,11 +77,13 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   }}
 >
   <div class="content">
+    <LinkI18n highContrast className="back" {locale} href="/">
+      <ArrowLeftIcon />
+    </LinkI18n>
+
     <div
       class="pattern"
-      style={{
-        backgroundImage: `url(/assets/patterns/${tool.id}.svg)`,
-      }}
+      style={{ backgroundImage: `url(/assets/patterns/${tool.id}.svg)` }}
     >
     </div>
 

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

@@ -49,7 +49,6 @@ const { accent, noNavbar, locale } = Astro.props;
           display: flex;
           flex: 1;
           flex-direction: column;
-          gap: var(--space-5);
 
           background-color: var(--gray-1);
         }

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

@@ -0,0 +1,15 @@
+---
+import { Heading } from "../../../components/Heading";
+import { Section } from "../../../components/Section";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+
+export { getStaticPaths } from "../index.astro";
+
+const { locale } = Astro.props;
+---
+
+<BaseLayout {locale} accent="amber">
+  <Section>
+    <Heading>Settings</Heading>
+  </Section>
+</BaseLayout>