feat: card styles

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

@@ -2,13 +2,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: var(--space-4);
 
   .avatar-image {
     width: 100%;
     aspect-ratio: 7 / 8;
+    border-radius: var(--space-3);
 
     background-size: cover;
     background-position: center;
+
+    outline: var(--outline-interactive);
+    box-shadow: var(--shadow-subtle);
   }
 
   .avatar-label {

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

@@ -47,6 +47,8 @@ import "@fontsource-variable/roboto-flex";
         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);
+    --shadow-subtle: var(--space-1) var(--space-1) var(--space-4)
+      var(--black-a11);
 
     --blur-glass: blur(4rem);
   }

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

@@ -8,7 +8,7 @@ import { BlitzKitIcon } from "../icons/BlitzKit";
     position: sticky;
     top: 0;
     width: 100%;
-    margin-bottom: calc(var(--space-5) * -1);
+    margin-bottom: calc(var(--space-4) * -1);
 
     display: flex;
     justify-content: space-between;

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

@@ -1,4 +1,5 @@
 ---
+import Section from "../../../components/Section.astro";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import { Page } from "./_index";
 
@@ -11,12 +12,14 @@ const { locale } = Astro.props;
   .avatars {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--space-7), 1fr));
-    gap: var(--space-4);
+    gap: var(--space-5) var(--space-4);
   }
 </style>
 
 <BaseLayout {locale} accent="gold">
-  <Page client:only="react">
-    <Page skeleton slot="fallback" />
-  </Page>
+  <Section>
+    <Page client:only="react">
+      <Page skeleton slot="fallback" />
+    </Page>
+  </Section>
 </BaseLayout>

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

@@ -21,7 +21,7 @@ export const getStaticPaths = (() => {
 const { locale } = Astro.props;
 ---
 
-<BaseLayout accent="amber" noNavbar>
+<BaseLayout {locale} accent="amber" noNavbar>
   <ColorScale color="purple" slot="head" />
   <ColorScale color="gold" slot="head" />
   <ColorScale color="lime" slot="head" />