sizing

packages/website/src/components/HomeCosmetics.astro

@@ -2,7 +2,7 @@
 import { api } from "../api/dynamic";
 import { tools } from "../constants/tools";
 import { Heading } from "./Heading";
-import { Section } from "./Section";
+import HomeSection from "./HomeSection.astro";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -16,7 +16,7 @@ const { locale } = Astro.props;
 const strings = await api.strings(locale);
 ---
 
-<Section>
+<HomeSection>
   <Heading size="2">{strings.home.cosmetics}</Heading>
 
   <ToolCardLayoutRoot minor>
@@ -28,4 +28,4 @@ const strings = await api.strings(locale);
       <ToolCard {locale} tool={tools.backgrounds} />
     </ToolCardLayoutColumn>
   </ToolCardLayoutRoot>
-</Section>
+</HomeSection>

packages/website/src/components/HomeGames.astro

@@ -2,7 +2,7 @@
 import { api } from "../api/dynamic";
 import { tools } from "../constants/tools";
 import { Heading } from "./Heading";
-import { Section } from "./Section";
+import HomeSection from "./HomeSection.astro";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -16,7 +16,7 @@ const { locale } = Astro.props;
 const strings = await api.strings(locale);
 ---
 
-<Section>
+<HomeSection>
   <Heading size="2" className="title">{strings.home.games}</Heading>
 
   <ToolCardLayoutRoot>
@@ -28,4 +28,4 @@ const strings = await api.strings(locale);
       <ToolCard {locale} tool={tools.guesser} />
     </ToolCardLayoutColumn>
   </ToolCardLayoutRoot>
-</Section>
+</HomeSection>

packages/website/src/components/HomePlayers.astro

@@ -2,7 +2,7 @@
 import { api } from "../api/dynamic";
 import { tools } from "../constants/tools";
 import { Heading } from "./Heading";
-import { Section } from "./Section";
+import HomeSection from "./HomeSection.astro";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -16,7 +16,7 @@ const { locale } = Astro.props;
 const strings = await api.strings(locale);
 ---
 
-<Section>
+<HomeSection>
   <Heading size="2">{strings.home.players}</Heading>
 
   <ToolCardLayoutRoot>
@@ -29,4 +29,4 @@ const strings = await api.strings(locale);
       <ToolCard {locale} tool={tools.players} />
     </ToolCardLayoutColumn>
   </ToolCardLayoutRoot>
-</Section>
+</HomeSection>

packages/website/src/components/HomeSection.astro

@@ -0,0 +1,11 @@
+<style>
+  .home-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+</style>
+
+<div class="home-section">
+  <slot />
+</div>

packages/website/src/components/HomeTanks.astro

@@ -2,7 +2,7 @@
 import { api } from "../api/dynamic";
 import { tools } from "../constants/tools";
 import { Heading } from "./Heading";
-import { Section } from "./Section";
+import HomeSection from "./HomeSection.astro";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,7 +15,7 @@ const { locale } = Astro.props;
 const strings = await api.strings(locale);
 ---
 
-<Section>
+<HomeSection>
   <Heading size="2">{strings.home.tanks}</Heading>
 
   <ToolCardLayoutRoot>
@@ -28,4 +28,4 @@ const strings = await api.strings(locale);
       <ToolCard {locale} minor tool={tools.performance} />
     </ToolCardLayoutColumn>
   </ToolCardLayoutRoot>
-</Section>
+</HomeSection>

packages/website/src/components/HomeTechnical.astro

@@ -2,7 +2,7 @@
 import { api } from "../api/dynamic";
 import { tools } from "../constants/tools";
 import { Heading } from "./Heading";
-import { Section } from "./Section";
+import HomeSection from "./HomeSection.astro";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -16,7 +16,7 @@ const { locale } = Astro.props;
 const strings = await api.strings(locale);
 ---
 
-<Section>
+<HomeSection>
   <Heading size="2">{strings.home.technical}</Heading>
 
   <ToolCardLayoutRoot minor>
@@ -28,4 +28,4 @@ const strings = await api.strings(locale);
       <ToolCard {locale} tool={tools.changelogs} />
     </ToolCardLayoutColumn>
   </ToolCardLayoutRoot>
-</Section>
+</HomeSection>

packages/website/src/components/Section/index.module.css

@@ -12,7 +12,7 @@
     flex: 1;
     max-width: var(--page-width);
 
-    gap: var(--space-4);
+    gap: var(--space-5);
 
     display: flex;
     flex-direction: column;

packages/website/src/layouts/base.css

@@ -1,9 +0,0 @@
-@import "@radix-ui/themes/styles.css";
-
-.radix-themes {
-  --default-font-family: "Inter";
-}
-
-body {
-  margin: 0;
-}

packages/website/src/pages/[...chunk_default]/[...locale]/index.astro

@@ -11,6 +11,7 @@ import HomeGames from "../../../components/HomeGames.astro";
 import HomePlayers from "../../../components/HomePlayers.astro";
 import HomeTanks from "../../../components/HomeTanks.astro";
 import HomeTechnical from "../../../components/HomeTechnical.astro";
+import { Section } from "../../../components/Section";
 import { tools, type Tool } from "../../../constants/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import { getStaticPaths as _getStaticPaths } from "../_index";
@@ -68,9 +69,11 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
 
   {environment === "preview" && <AesonPlug />}
 
-  <HomeTanks {locale} />
+  <Section>
-  <HomePlayers {locale} />
+    <HomeTanks {locale} />
-  <HomeGames {locale} />
+    <HomePlayers {locale} />
-  <HomeCosmetics {locale} />
+    <HomeGames {locale} />
-  <HomeTechnical {locale} />
+    <HomeCosmetics {locale} />
+    <HomeTechnical {locale} />
+  </Section>
 </BaseLayout>