From 9ba19a425c8290ee9fd30a4a4e0ffdbeb56d78f2 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 31 Oct 2026 14:02:26 -0500
Subject: [PATCH] sizing

---
 packages/website/src/components/HomeCosmetics.astro |  6 +++---
 packages/website/src/components/HomeGames.astro     |  6 +++---
 packages/website/src/components/HomePlayers.astro   |  6 +++---
 packages/website/src/components/HomeSection.astro   | 11 +++++++++++
 packages/website/src/components/HomeTanks.astro     |  6 +++---
 packages/website/src/components/HomeTechnical.astro |  6 +++---
 .../website/src/components/Section/index.module.css |  2 +-
 packages/website/src/layouts/base.css               |  9 ---------
 .../[...chunk_default]/[...locale]/index.astro      | 13 ++++++++-----
 9 files changed, 35 insertions(+), 30 deletions(-)
 create mode 100644 packages/website/src/components/HomeSection.astro
 delete mode 100644 packages/website/src/layouts/base.css

diff --git a/packages/website/src/components/HomeCosmetics.astro b/packages/website/src/components/HomeCosmetics.astro
index 09609ba5f..e22723aab 100644
--- a/packages/website/src/components/HomeCosmetics.astro
+++ b/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>
diff --git a/packages/website/src/components/HomeGames.astro b/packages/website/src/components/HomeGames.astro
index 8a1da2071..678811f35 100644
--- a/packages/website/src/components/HomeGames.astro
+++ b/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>
diff --git a/packages/website/src/components/HomePlayers.astro b/packages/website/src/components/HomePlayers.astro
index 46d538e82..0d738684b 100644
--- a/packages/website/src/components/HomePlayers.astro
+++ b/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>
diff --git a/packages/website/src/components/HomeSection.astro b/packages/website/src/components/HomeSection.astro
new file mode 100644
index 000000000..e9a310a58
--- /dev/null
+++ b/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>
diff --git a/packages/website/src/components/HomeTanks.astro b/packages/website/src/components/HomeTanks.astro
index bfbe66f0e..af040fafe 100644
--- a/packages/website/src/components/HomeTanks.astro
+++ b/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>
diff --git a/packages/website/src/components/HomeTechnical.astro b/packages/website/src/components/HomeTechnical.astro
index bdbe7e70a..e42afdc7a 100644
--- a/packages/website/src/components/HomeTechnical.astro
+++ b/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>
diff --git a/packages/website/src/components/Section/index.module.css b/packages/website/src/components/Section/index.module.css
index 85725229d..269c73e7d 100644
--- a/packages/website/src/components/Section/index.module.css
+++ b/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;
diff --git a/packages/website/src/layouts/base.css b/packages/website/src/layouts/base.css
deleted file mode 100644
index 30210660b..000000000
--- a/packages/website/src/layouts/base.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "@radix-ui/themes/styles.css";
-
-.radix-themes {
-  --default-font-family: "Inter";
-}
-
-body {
-  margin: 0;
-}
diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/index.astro b/packages/website/src/pages/[...chunk_default]/[...locale]/index.astro
index ab9c215e9..09a4e002f 100644
--- a/packages/website/src/pages/[...chunk_default]/[...locale]/index.astro
+++ b/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} />
-  <HomePlayers {locale} />
-  <HomeGames {locale} />
-  <HomeCosmetics {locale} />
-  <HomeTechnical {locale} />
+  <Section>
+    <HomeTanks {locale} />
+    <HomePlayers {locale} />
+    <HomeGames {locale} />
+    <HomeCosmetics {locale} />
+    <HomeTechnical {locale} />
+  </Section>
 </BaseLayout>