mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
simplification
This commit is contained in:
tresabhi committed
1 parent
cfc0ebb8e5
commit
de8b3959b3
14 files changed
+112
-68
No files matched your search
@@ -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,14 +16,16 @@ 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>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.avatars} />
|
||||
</ToolCardLayoutColumn>
|
||||
<ToolCardLayoutRoot minor>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.avatars} />
|
||||
</ToolCardLayoutColumn>
|
||||
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.backgrounds} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.backgrounds} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
</Section>
|
||||
@@ -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,14 +16,16 @@ 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>
|
||||
<ToolCardLayoutColumn major>
|
||||
<ToolCard {locale} tool={tools.mixer} />
|
||||
</ToolCardLayoutColumn>
|
||||
<ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn major>
|
||||
<ToolCard {locale} tool={tools.mixer} />
|
||||
</ToolCardLayoutColumn>
|
||||
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.guesser} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.guesser} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
</Section>
|
||||
@@ -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>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.session} />
|
||||
<ToolCard {locale} tool={tools.playlist} />
|
||||
</ToolCardLayoutColumn>
|
||||
<ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} minor tool={tools.session} />
|
||||
<ToolCard {locale} minor tool={tools.playlist} />
|
||||
</ToolCardLayoutColumn>
|
||||
|
||||
<ToolCardLayoutColumn major>
|
||||
<ToolCard {locale} tool={tools.players} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn major>
|
||||
<ToolCard {locale} tool={tools.players} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
</Section>
|
||||
@@ -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>
|
||||
<ToolCardLayoutColumn major>
|
||||
<ToolCard {locale} tool={tools.tanks} />
|
||||
</ToolCardLayoutColumn>
|
||||
<ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn major>
|
||||
<ToolCard {locale} tool={tools.tanks} />
|
||||
</ToolCardLayoutColumn>
|
||||
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.compare} />
|
||||
<ToolCard {locale} tool={tools.performance} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} minor tool={tools.compare} />
|
||||
<ToolCard {locale} minor tool={tools.performance} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
</Section>
|
||||
@@ -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,14 +16,16 @@ 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>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.api} />
|
||||
</ToolCardLayoutColumn>
|
||||
<ToolCardLayoutRoot minor>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.api} />
|
||||
</ToolCardLayoutColumn>
|
||||
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.changelogs} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
<ToolCardLayoutColumn>
|
||||
<ToolCard {locale} tool={tools.changelogs} />
|
||||
</ToolCardLayoutColumn>
|
||||
</ToolCardLayoutRoot>
|
||||
</Section>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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
|
||||
class="content"
|
||||
style={{
|
||||
backgroundColor: "var(--color-panel-translucent)",
|
||||
backdropFilter: "blur(64px) brightness(50%)",
|
||||
WebkitBackdropFilter: "blur(64px)",
|
||||
}}
|
||||
>
|
||||
<div class="content" data-minor={minor}>
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user