simplification

packages/i18n/strings/en.json

@@ -402,7 +402,7 @@
       },
 
       "guesser": {
-        "name": "Guess",
+        "name": "Guesser",
         "description": "Silhouette mini-game",
         "seo_description": "Play a tank guessing game with a silhouette in World of Tanks Blitz",
         "search": {

packages/website/src/components/HomeCosmetics.astro

@@ -2,6 +2,7 @@
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { Heading } from "./Heading";
+import { Section } from "./Section";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,9 +16,10 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="5">{strings.home.cosmetics}</Heading>
+<Section>
+  <Heading size="2">{strings.home.cosmetics}</Heading>
 
-<ToolCardLayoutRoot minor>
+  <ToolCardLayoutRoot minor>
     <ToolCardLayoutColumn>
       <ToolCard {locale} tool={tools.avatars} />
     </ToolCardLayoutColumn>
@@ -25,4 +27,5 @@ const strings = getStrings(locale);
     <ToolCardLayoutColumn>
       <ToolCard {locale} tool={tools.backgrounds} />
     </ToolCardLayoutColumn>
-</ToolCardLayoutRoot>
+  </ToolCardLayoutRoot>
+</Section>

packages/website/src/components/HomeGames.astro

@@ -2,6 +2,7 @@
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { Heading } from "./Heading";
+import { Section } from "./Section";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,9 +16,10 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="5" className="title">{strings.home.games}</Heading>
+<Section>
+  <Heading size="2" className="title">{strings.home.games}</Heading>
 
-<ToolCardLayoutRoot>
+  <ToolCardLayoutRoot>
     <ToolCardLayoutColumn major>
       <ToolCard {locale} tool={tools.mixer} />
     </ToolCardLayoutColumn>
@@ -25,4 +27,5 @@ const strings = getStrings(locale);
     <ToolCardLayoutColumn>
       <ToolCard {locale} tool={tools.guesser} />
     </ToolCardLayoutColumn>
-</ToolCardLayoutRoot>
+  </ToolCardLayoutRoot>
+</Section>

packages/website/src/components/HomePlayers.astro

@@ -2,6 +2,7 @@
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { Heading } from "./Heading";
+import { Section } from "./Section";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,15 +16,17 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="5">{strings.home.players}</Heading>
+<Section>
+  <Heading size="2">{strings.home.players}</Heading>
 
-<ToolCardLayoutRoot>
+  <ToolCardLayoutRoot>
     <ToolCardLayoutColumn>
-    <ToolCard {locale} tool={tools.session} />
+      <ToolCard {locale} minor tool={tools.session} />
-    <ToolCard {locale} tool={tools.playlist} />
+      <ToolCard {locale} minor tool={tools.playlist} />
     </ToolCardLayoutColumn>
 
     <ToolCardLayoutColumn major>
       <ToolCard {locale} tool={tools.players} />
     </ToolCardLayoutColumn>
-</ToolCardLayoutRoot>
+  </ToolCardLayoutRoot>
+</Section>

packages/website/src/components/HomeTanks.astro

@@ -2,6 +2,7 @@
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { Heading } from "./Heading";
+import { Section } from "./Section";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -14,15 +15,17 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="5">{strings.home.tanks}</Heading>
+<Section>
+  <Heading size="2">{strings.home.tanks}</Heading>
 
-<ToolCardLayoutRoot>
+  <ToolCardLayoutRoot>
     <ToolCardLayoutColumn major>
       <ToolCard {locale} tool={tools.tanks} />
     </ToolCardLayoutColumn>
 
     <ToolCardLayoutColumn>
-    <ToolCard {locale} tool={tools.compare} />
+      <ToolCard {locale} minor tool={tools.compare} />
-    <ToolCard {locale} tool={tools.performance} />
+      <ToolCard {locale} minor tool={tools.performance} />
     </ToolCardLayoutColumn>
-</ToolCardLayoutRoot>
+  </ToolCardLayoutRoot>
+</Section>

packages/website/src/components/HomeTechnical.astro

@@ -2,6 +2,7 @@
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { Heading } from "./Heading";
+import { Section } from "./Section";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,9 +16,10 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="5">{strings.home.technical}</Heading>
+<Section>
+  <Heading size="2">{strings.home.technical}</Heading>
 
-<ToolCardLayoutRoot minor>
+  <ToolCardLayoutRoot minor>
     <ToolCardLayoutColumn>
       <ToolCard {locale} tool={tools.api} />
     </ToolCardLayoutColumn>
@@ -25,4 +27,5 @@ const strings = getStrings(locale);
     <ToolCardLayoutColumn>
       <ToolCard {locale} tool={tools.changelogs} />
     </ToolCardLayoutColumn>
-</ToolCardLayoutRoot>
+  </ToolCardLayoutRoot>
+</Section>

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

@@ -0,0 +1,14 @@
+.section {
+  display: flex;
+  justify-content: center;
+
+  .content {
+    flex: 1;
+    max-width: var(--page-width);
+
+    gap: var(--space-4);
+
+    display: flex;
+    flex-direction: column;
+  }
+}

packages/website/src/components/Section/index.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+export interface SectionProps extends ComponentProps<"div"> {}
+
+export function Section({ className, children, ...props }: SectionProps) {
+  return (
+    <div className={classNames(styles.section, className)} {...props}>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}

packages/website/src/components/ToolCard.astro

@@ -3,14 +3,14 @@ import type { Tool } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { Heading } from "./Heading";
 import { LinkI18n } from "./LinkI18n";
-import { Text } from "./Text";
 
 interface Props {
   tool: Tool;
   locale: string;
+  minor?: boolean;
 }
 
-const { locale, tool } = Astro.props;
+const { locale, tool, minor } = Astro.props;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
@@ -20,12 +20,13 @@ const toolStrings =
 
 <style>
   .container {
+    flex: 1;
+
     display: flex;
 
-    border-radius: var(--radius-3);
+    border-radius: var(--space-3);
     background-size: cover;
     background-position: center;
-    height: 16rem;
 
     position: relative;
     overflow: hidden;
@@ -56,7 +57,15 @@ const toolStrings =
 
       width: 100%;
 
-      gap: var(--space-4);
+      padding: var(--space-5);
+      box-sizing: border-box;
+
+      backdrop-filter: blur(64px);
+      -webkit-backdrop-filter: blur(64px);
+
+      &[data-minor="true"] {
+        padding: var(--space-4);
+      }
 
       .wrapper {
         display: flex;
@@ -74,7 +83,7 @@ const toolStrings =
   <LinkI18n
     {locale}
     className="link"
-    underline="none"
+    underline="never"
     href={tool.href ?? `/${tool.id}`}
     target={tool.href ? "_blank" : undefined}
   >
@@ -84,22 +93,11 @@ const toolStrings =
     >
     </div>
 
-    <div
+    <div class="content" data-minor={minor}>
-      class="content"
-      style={{
-        backgroundColor: "var(--color-panel-translucent)",
-        backdropFilter: "blur(64px) brightness(50%)",
-        WebkitBackdropFilter: "blur(64px)",
-      }}
-    >
       <div class="wrapper">
-        <Heading weight="medium">
+        <Heading size={minor ? "3" : "2"} weight="medium">
           {toolStrings.name}
         </Heading>
-
-        <Text color="gray">
-          {toolStrings.description}
-        </Text>
       </div>
     </div>
   </LinkI18n>

packages/website/src/layouts/BaseLayout.astro

@@ -49,6 +49,9 @@ const { accent, locale } = Astro.props;
           flex-direction: column;
 
           background-color: var(--gray-1);
+
+          padding: var(--space-5);
+          gap: var(--space-6);
         }
       }
     </style>

packages/website/src/types/space.ts

@@ -0,0 +1 @@
+export type Space = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;