feat: bumps

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

@@ -34,9 +34,14 @@ import "@fontsource-variable/roboto-flex";
     --outline-focus: var(--space-1) solid var(--accent-6);
 
     --shadow-cavity:
-      inset var(--space-1) var(--space-1) var(--space-1) var(--gray-2),
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
-      inset calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1)
+        var(--space-1) var(--black-a3),
-        var(--gray-4);
+      inset calc(var(--space-1) * sin(45deg) * -1)
-    --shadow-focus: 0 0 var(--space-3) var(--accent-4);
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--white-a1);
+    --shadow-bump:
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--white-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
   }
 </style>

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

@@ -3,11 +3,18 @@ import * as colors from "@radix-ui/colors";
 import type { Color } from "../core/ui/color";
 
 interface Props {
-  color: Color;
+  color: Color | AlphaOnlyColor;
+  alpha?: boolean;
 }
 
-const { color } = Astro.props;
+const ALPHA_ONLY_COLORS = ["black", "white"] as const;
-const scale = colors[`${color}Dark`];
+type AlphaOnlyColor = (typeof ALPHA_ONLY_COLORS)[number];
+
+const { color, alpha } = Astro.props;
+const name = `${color}${
+  ALPHA_ONLY_COLORS.includes(color as AlphaOnlyColor) ? "" : "Dark"
+}${alpha ? "A" : ""}`;
+const scale = colors[name as keyof typeof colors];
 
 let styles = "";
 
@@ -15,8 +22,8 @@ styles += ":root{";
 
 for (let i = 0; i < 12; i++) {
   const n = i + 1;
-  const value = scale[`${color}${n}` as keyof typeof scale];
+  const value = scale[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scale];
-  styles += `--${color}-${n}:${value};`;
+  styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`;
 }
 
 styles += "}";

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

@@ -0,0 +1,19 @@
+<style>
+  .footer {
+    display: flex;
+    justify-content: center;
+
+    padding: var(--space-6) var(--space-4);
+
+    background-color: var(--gray-3);
+
+    .content {
+      flex: 1;
+      max-width: 52rem;
+    }
+  }
+</style>
+
+<div class="footer">
+  <div class="content">poopy</div>
+</div>

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

@@ -1,12 +1,22 @@
 <style>
   .section {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
-    gap: var(--space-4);
     padding: 0 var(--space-4);
+
+    .content {
+      flex: 1;
+      max-width: 52rem;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
   }
 </style>
 
 <div class="section">
-  <slot />
+  <div class="content">
+    <slot />
+  </div>
 </div>

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

@@ -21,6 +21,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
     display: flex;
     flex-direction: column;
     height: 10rem;
+    position: relative;
 
     border-radius: var(--space-3);
 
@@ -47,6 +48,17 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         flex-direction: column;
       }
     }
+
+    .shadow {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      border-radius: var(--space-3);
+      box-shadow: var(--shadow-bump);
+    }
   }
 </style>
 
@@ -78,4 +90,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       <CaretRightIcon />
     </Button>
   </div>
+
+  <div class="shadow"></div>
 </LinkI18n>

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

@@ -3,6 +3,7 @@ import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
 import ColorScale from "../components/ColorScale.astro";
+import Footer from "../components/Footer.astro";
 import Navbar from "../components/Navbar.astro";
 import type { Color } from "../core/ui/color";
 
@@ -42,6 +43,9 @@ const { accent, noNavbar } = Astro.props;
 
   <body class="dark">
     {!noNavbar && <Navbar />}
+
     <slot />
+
+    {(<Footer />)}
   </body>
 </html>

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

@@ -8,6 +8,8 @@ import {
 } from "typescript";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
+export { getStaticPaths } from "../index.astro";
+
 const root = `/src/pages/api`;
 const globbed = import.meta.glob("/src/pages/api/**/*.ts", {
   eager: true,

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

@@ -4,6 +4,8 @@ import { Grade } from "@protos/blitz_static_standard_grades_enum";
 import { api } from "../../../core/api/dynamic";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
+export { getStaticPaths } from "../index.astro";
+
 const avatars = await api.avatars();
 ---
 

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

@@ -3,6 +3,8 @@ import { Grade } from "@protos/blitz_static_standard_grades_enum";
 import { api } from "../../../core/api/dynamic";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
+export { getStaticPaths } from "../index.astro";
+
 const backgrounds = await api.backgrounds();
 ---
 

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

@@ -25,6 +25,8 @@ const { locale } = Astro.props;
   <ColorScale color="purple" slot="head" />
   <ColorScale color="gold" slot="head" />
   <ColorScale color="lime" slot="head" />
+  <ColorScale color="black" alpha slot="head" />
+  <ColorScale color="white" alpha slot="head" />
 
   <HomeHero {locale} />
 

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

@@ -3,6 +3,8 @@ import "@radix-ui/colors/violet-dark.css";
 import { api } from "../../../core/api/dynamic";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
+export { getStaticPaths } from "../index.astro";
+
 const tankList = await api.tankList();
 ---