SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

style: Improve code formatting and readability across multiple components
All checks were successful
SteamWarCI Build successful
Details

Browse Source
This commit is contained in:
Chaoscaot
2025-05-07 14:33:48 +02:00
parent b3598e1ee1
commit 6377799e1b
7 changed files with 169 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Card.svelte
View File

@ -18,13 +18,13 @@
--> -->
<script lang="ts"> <script lang="ts">
import {twMerge} from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import {onMount} from "svelte"; import { onMount } from "svelte";
let cardElement: HTMLDivElement = $state(); let cardElement: HTMLDivElement = $state();
function rotateElement(event: MouseEvent) { function rotateElement(event: MouseEvent) {
if(!hoverEffect) return; if (!hoverEffect) return;
const x = event.clientX; const x = event.clientX;
const y = event.clientY; const y = event.clientY;
@ -36,23 +36,23 @@
const rotateX = (centerY - y) / 20; const rotateX = (centerY - y) / 20;
const rotateY = -(centerX - x) / 20; const rotateY = -(centerX - x) / 20;
cardElement.style.setProperty('--rotate-x', `${rotateX}deg`); cardElement.style.setProperty("--rotate-x", `${rotateX}deg`);
cardElement.style.setProperty('--rotate-y', `${rotateY}deg`); cardElement.style.setProperty("--rotate-y", `${rotateY}deg`);
} }
function resetElement() { function resetElement() {
cardElement.style.setProperty('--rotate-x', "0"); cardElement.style.setProperty("--rotate-x", "0");
cardElement.style.setProperty('--rotate-y', "0"); cardElement.style.setProperty("--rotate-y", "0");
} }
interface Props { interface Props {
hoverEffect?: boolean; hoverEffect?: boolean;
extraClasses?: string; extraClasses?: string;
children?: import('svelte').Snippet; children?: import("svelte").Snippet;
} }
let { hoverEffect = true, extraClasses = '', children }: Props = $props(); let { hoverEffect = true, extraClasses = "", children }: Props = $props();
let classes = $derived(twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)) let classes = $derived(twMerge("w-72 border-2 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses));
</script> </script>
<div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect> <div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect>
@ -61,20 +61,20 @@
<style lang="scss"> <style lang="scss">
div { div {
transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important; transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
transition: scale 300ms cubic-bezier(.2, 3, .67, .6); transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);
:global(h1) { :global(h1) {
@apply text-xl font-bold mt-4; @apply text-xl font-bold mt-4;
} }
:global(svg) { :global(svg) {
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
} }
} }
.hoverEffect:hover { .hoverEffect:hover {
scale: 105%; scale: 105%;
} }
</style> </style>

44
src/components/Navbar.svelte
View File

@ -19,18 +19,18 @@
<script lang="ts"> <script lang="ts">
import "../styles/button.css"; import "../styles/button.css";
import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons"; import { CaretDownOutline, SearchOutline } from "flowbite-svelte-icons";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
import {l} from "../util/util"; import { l } from "../util/util";
import {onMount} from "svelte"; import { onMount } from "svelte";
import {loggedIn} from "@repo/authv2.ts"; import { loggedIn } from "@repo/authv2.ts";
interface Props { interface Props {
logo?: import('svelte').Snippet; logo?: import("svelte").Snippet;
} }
let { logo }: Props = $props(); let { logo }: Props = $props();
let navbar = $state<HTMLDivElement>(); let navbar = $state<HTMLElement>();
let searchOpen = $state(false); let searchOpen = $state(false);
let accountBtn = $state<HTMLAnchorElement>(); let accountBtn = $state<HTMLAnchorElement>();
@ -41,11 +41,11 @@
} else { } else {
accountBtn!.href = l("/login"); accountBtn!.href = l("/login");
} }
}) });
onMount(() => { onMount(() => {
handleScroll(); handleScroll();
}) });
function handleScroll() { function handleScroll() {
if (window.scrollY > 0) { if (window.scrollY > 0) {
@ -56,13 +56,17 @@
} }
</script> </script>
<svelte:window onscroll={handleScroll}/> <svelte:window onscroll={handleScroll} />
<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top" bind:this={navbar}> <nav
data-pagefind-ignore
class="z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"
bind:this={navbar}
>
<div class="flex flex-row items-center justify-evenly md:justify-between match"> <div class="flex flex-row items-center justify-evenly md:justify-between match">
<a class="flex items-center" href={l("/")}> <a class="flex items-center" href={l("/")}>
{@render logo?.()} {@render logo?.()}
<span class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block"> <span class="text-2xl uppercase font-bold text-white hidden md:inline-block">
{t("navbar.title")} {t("navbar.title")}
<span class="before:scale-y-100" style="display: none" aria-hidden="true"></span> <span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
</span> </span>
@ -73,7 +77,7 @@
<a href={l("/")}> <a href={l("/")}>
<span class="btn__text">{t("navbar.links.home.title")}</span> <span class="btn__text">{t("navbar.links.home.title")}</span>
</a> </a>
<CaretDownOutline class="ml-2 mt-auto"/> <CaretDownOutline class="ml-2 mt-auto" />
</button> </button>
<div> <div>
<a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a> <a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
@ -87,7 +91,7 @@
<a rel="prefetch" href={l("/rules")}> <a rel="prefetch" href={l("/rules")}>
<span class="btn__text">{t("navbar.links.rules.title")}</span> <span class="btn__text">{t("navbar.links.rules.title")}</span>
</a> </a>
<CaretDownOutline class="ml-2 mt-auto"/> <CaretDownOutline class="ml-2 mt-auto" />
</button> </button>
<div> <div>
<a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a> <a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
@ -96,10 +100,8 @@
<a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a> <a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
<a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a> <a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2> <h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
<a href={l("/rules/megawargear")} <a href={l("/rules/megawargear")} class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
class="btn btn-gray">{t("navbar.links.rules.megawg")}</a> <a href={l("/rules/microwargear")} class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
<a href={l("/rules/microwargear")}
class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
<a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a> <a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.ranked")}</h2> <h2 class="px-2 text-gray-300">{t("navbar.links.rules.ranked")}</h2>
<a href={l("/rangliste/missilewars")} class="btn btn-gray">{t("navbar.links.ranked.mw")}</a> <a href={l("/rangliste/missilewars")} class="btn btn-gray">{t("navbar.links.ranked.mw")}</a>

56
src/components/PostComponent.astro
View File

@ -1,49 +1,59 @@
--- ---
import type {CollectionEntry} from "astro:content"; import type { CollectionEntry } from "astro:content";
import {l} from "../util/util"; import { l } from "../util/util";
import {astroI18n} from "astro-i18n"; import { astroI18n } from "astro-i18n";
import {Image} from "astro:assets"; import { Image } from "astro:assets";
import TagComponent from "./TagComponent.astro"; import TagComponent from "./TagComponent.astro";
import P from "./P.astro"; import P from "./P.astro";
import Card from "@components/Card.svelte"; import Card from "@components/Card.svelte";
interface Props { interface Props {
post: CollectionEntry<"announcements"> post: CollectionEntry<"announcements">;
} }
const { post, slim }: { const {
post: CollectionEntry<"announcements">, post,
slim: boolean, slim,
}: {
post: CollectionEntry<"announcements">;
slim: boolean;
} = Astro.props as Props; } = Astro.props as Props;
const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`); const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
--- ---
<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1" : ""}`} hoverEffect={false}> <Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1 backdrop-blur-xl bg-transparent" : ""}`} hoverEffect={false}>
<div class={`flex flex-row ${slim ? "":"p-4"}`}> <div class={`flex flex-row ${slim ? "" : "p-4"}`}>
{post.data.image != null {
? ( post.data.image != null ? (
<a href={postUrl}> <a href={postUrl}>
<div class="flex-shrink-0 pr-2"> <div class="flex-shrink-0 pr-2">
<Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" /> <Image
transition:name={post.data.title + "-image"}
src={post.data.image}
alt="Post Image"
class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
/>
</div> </div>
</a> </a>
) ) : null
: null} }
<div> <div>
<a href={postUrl} class="flex flex-col items-start"> <a href={postUrl} class="flex flex-col items-start">
<h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2> <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
<P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, { <P class="text-gray-500"
day: "numeric", >{
month: "long", Intl.DateTimeFormat(astroI18n.locale, {
year: "numeric", day: "numeric",
}).format(post.data.created)}</P> month: "long",
year: "numeric",
}).format(post.data.created)
}</P
>
<P>{post.data.description}</P> <P>{post.data.description}</P>
</a> </a>
<div class="mt-1" transition:name={post.data.title + "-tags"}> <div class="mt-1" transition:name={post.data.title + "-tags"}>
{post.data.tags.map((tag) => ( {post.data.tags.map((tag) => <TagComponent tag={tag} />)}
<TagComponent tag={tag} />
))}
</div> </div>
</div> </div>
</div> </div>

39
src/layouts/NavbarLayout.astro
View File

@ -1,31 +1,33 @@
--- ---
import {Image} from "astro:assets"; import { Image } from "astro:assets";
import Basic from "./Basic.astro"; import Basic from "./Basic.astro";
import "../styles/button.css"; import "../styles/button.css";
import localLogo from "../images/logo.png"; import localLogo from "../images/logo.png";
import {YoutubeSolid, DiscordSolid, FileCodeSolid} from "flowbite-svelte-icons"; import { YoutubeSolid, DiscordSolid, FileCodeSolid } from "flowbite-svelte-icons";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
import {l} from "../util/util"; import { l } from "../util/util";
import Navbar from "@components/Navbar.svelte"; import Navbar from "@components/Navbar.svelte";
import ServerStatus from "../components/ServerStatus.svelte"; import ServerStatus from "../components/ServerStatus.svelte";
const {title, description} = Astro.props; const { title, description, transparentFooter = true } = Astro.props;
--- ---
<Basic title={title} description={description}> <Basic title={title} description={description} autoDarkMode={false}>
<slot name="head" slot="head"/> <slot name="head" slot="head" />
<Fragment> <Fragment>
<div class="min-h-screen flex flex-col"> <div class="min-h-screen flex flex-col">
<Navbar client:idle> <Navbar client:idle>
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" slot="logo" />
class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
</Navbar> </Navbar>
<main class="flex-1" data-pagefind-body> <main class="flex-1" data-pagefind-body>
<slot/> <slot />
</main> </main>
<footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900"> <footer
class={`min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col ${transparentFooter ? "backdrop-blur-3xl" : "bg-neutral-900"}`}
style="width: min(100%, 75em); margin-left: auto; margin-right: auto;"
>
<div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4"> <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
<div class="footer-card"> <div class="footer-card">
<h1>Serverstatus</h1> <h1>Serverstatus</h1>
@ -45,14 +47,17 @@ const {title, description} = Astro.props;
<div class="footer-card"> <div class="footer-card">
<h1>Social Media</h1> <h1>Social Media</h1>
<a class="flex" href="/youtube"> <a class="flex" href="/youtube">
<YoutubeSolid class="mr-2"/> <YoutubeSolid class="mr-2" />
YouTube</a> YouTube</a
>
<a class="flex" href="/discord"> <a class="flex" href="/discord">
<DiscordSolid class="mr-2"/> <DiscordSolid class="mr-2" />
Discord</a> Discord</a
>
<a class="flex" href="https://git.steamwar.de"> <a class="flex" href="https://git.steamwar.de">
<FileCodeSolid class="mr-2"/> <FileCodeSolid class="mr-2" />
Gitea</a> Gitea</a
>
</div> </div>
</div> </div>
<span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span> <span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>

10
src/layouts/PageLayout.astro
View File

@ -2,16 +2,16 @@
import NavbarLayout from "./NavbarLayout.astro"; import NavbarLayout from "./NavbarLayout.astro";
import BackgroundImage from "../components/BackgroundImage.astro"; import BackgroundImage from "../components/BackgroundImage.astro";
const {title, description} = Astro.props; const { title, description } = Astro.props;
--- ---
<NavbarLayout title={title} description={description}> <NavbarLayout title={title} description={description}>
<slot name="head" slot="head"/> <slot name="head" slot="head" />
<div class="h-screen w-screen fixed -z-10"> <div class="h-screen w-screen fixed -z-10">
<BackgroundImage /> <BackgroundImage />
</div> </div>
<div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-14 relative <div class="mx-auto p-8 rounded-b-md border-x-gray-100 shadow-md pt-14 relative
dark:text-white dark:bg-neutral-900" style="width: min(100%, 75em);"> text-white backdrop-blur-3xl" style="width: min(100%, 75em);">
<slot/> <slot />
</div> </div>
</NavbarLayout> </NavbarLayout>

103
src/pages/index.astro
View File

@ -1,29 +1,28 @@
--- ---
import dayjs from "dayjs"; import dayjs from "dayjs";
import NavbarLayout from "@layouts/NavbarLayout.astro"; import NavbarLayout from "@layouts/NavbarLayout.astro";
import {getCollection} from "astro:content"; import { getCollection } from "astro:content";
import {astroI18n} from "astro-i18n"; import { astroI18n } from "astro-i18n";
import {Image} from "astro:assets"; import { Image } from "astro:assets";
import Card from "@components/Card.svelte"; import Card from "@components/Card.svelte";
import {CaretRight, Pause, Rocket, Crosshair1} from "@astropub/icons"; import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
import {l} from "@utils/util"; import { l } from "@utils/util";
import PlayerCount from "@components/PlayerCount.svelte"; import PlayerCount from "@components/PlayerCount.svelte";
import "../../public/fonts/barlow-condensed/barlow-condensed.css"; import "../../public/fonts/barlow-condensed/barlow-condensed.css";
import {type Player} from "../components/types/data"; import { type Player } from "../components/types/data";
import PostComponent from "../components/PostComponent.astro"; import PostComponent from "../components/PostComponent.astro";
import BackgroundImage from "../components/BackgroundImage.astro"; import BackgroundImage from "../components/BackgroundImage.astro";
const teamMember: { [key: string]: Player[]} = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team") const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());
.then(value => value.json());
const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale); const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale); const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
germanPosts.forEach(value => { germanPosts.forEach((value) => {
if (posts.find(post => post.data.key === value.data.key)) { if (posts.find((post) => post.data.key === value.data.key)) {
return; return;
} else { } else {
posts.push(value); posts.push(value);
@ -43,27 +42,29 @@ const prefixColorMap: {
}; };
--- ---
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage"> <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
<div class="w-full h-screen relative mb-4"> <div class="w-full h-screen relative mb-4 z-10">
<div style="height: calc(100vh + 1rem)"> <div style="height: calc(100vh + 1rem)">
<BackgroundImage /> <BackgroundImage />
</div> </div>
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"> <drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider" <h1
style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);"> class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
<span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);"
class="text-neutral-600">{t("home.title.second")}</span> >
<span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
</h1> </h1>
<text-carousel class="h-20 w-full relative select-none"> <text-carousel class="h-20 w-full relative select-none">
<h2 class="-translate-y-16">{t("home.subtitle.1")}</h2> <h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
<h2>{t("home.subtitle.2")} <h2>
{t("home.subtitle.2")}
<PlayerCount client:idle /> <PlayerCount client:idle />
</h2> </h2>
<h2>{t("home.subtitle.3")}</h2> <h2>{t("home.subtitle.3")}</h2>
</text-carousel> </text-carousel>
<a href={l("join")} class="btn btn-ghost mt-32 px-8 flex" <a href={l("join")} class="btn btn-ghost mt-32 px-8 flex" style="animation: normal flyIn forwards 1.2s ease-out"
style="animation: normal flyIn forwards 1.2s ease-out">{t("home.join")} >{t("home.join")}
<CaretRight width="24" height="24"/> <CaretRight width="24" height="24" />
</a> </a>
<style> <style>
@keyframes flyIn { @keyframes flyIn {
@ -141,18 +142,18 @@ const prefixColorMap: {
<section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8"> <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
<div class="py-10 flex flex-col lg:flex-row"> <div class="py-10 flex flex-col lg:flex-row">
<Card client:idle> <Card client:idle>
<Crosshair1 height="64" width="64"/> <Crosshair1 height="64" width="64" />
<h1>{t("home.benefits.fights.title")}</h1> <h1>{t("home.benefits.fights.title")}</h1>
<p class="mt-4">{t("home.benefits.fights.description.1")}</p> <p class="mt-4">{t("home.benefits.fights.description.1")}</p>
<p class="mt-4">{t("home.benefits.fights.description.2")}</p> <p class="mt-4">{t("home.benefits.fights.description.2")}</p>
</Card> </Card>
<Card client:idle> <Card client:idle>
<Rocket height="64" width="64"/> <Rocket height="64" width="64" />
<h1>{t("home.benefits.bau.title")}</h1> <h1>{t("home.benefits.bau.title")}</h1>
<p class="mt-4">{t("home.benefits.bau.description")}</p> <p class="mt-4">{t("home.benefits.bau.description")}</p>
</Card> </Card>
<Card client:idle> <Card client:idle>
<Pause height="64" width="64"/> <Pause height="64" width="64" />
<h1>{t("home.benefits.minigames.title")}</h1> <h1>{t("home.benefits.minigames.title")}</h1>
<p class="mt-4">{t("home.benefits.minigames.description.1")}</p> <p class="mt-4">{t("home.benefits.minigames.description.1")}</p>
<p class="mt-4">{t("home.benefits.minigames.description.2")}</p> <p class="mt-4">{t("home.benefits.minigames.description.2")}</p>
@ -160,23 +161,29 @@ const prefixColorMap: {
</div> </div>
</section> </section>
<section class="w-full py-12 flex flex-wrap justify-center"> <section class="w-full py-12 flex flex-wrap justify-center">
{Object.entries(teamMember).map(([prefix, players]) => ( {
<Fragment> Object.entries(teamMember).map(([prefix, players]) => (
{players.map((v, index) => ( <Fragment>
<div class="inline-flex flex-col justify-end"> {players.map((v, index) => (
{index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix)}</h2> : null} <div class="inline-flex flex-col justify-end">
<Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} client:idle> {index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix)}</h2> : null}
<figure class="flex flex-col items-center" style="width: 150px"> <Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} client:idle>
<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption> <figure class="flex flex-col items-center" style="width: 150px">
<Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`} <figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl" <Image
alt={v.name + "s bust"} width="150" height="150"/> src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
</figure> class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
</Card> alt={v.name + "s bust"}
</div> width="150"
))} height="150"
</Fragment> />
))} </figure>
</Card>
</div>
))}
</Fragment>
))
}
</section> </section>
</NavbarLayout> </NavbarLayout>
@ -184,13 +191,17 @@ const prefixColorMap: {
text-carousel { text-carousel {
> * { > * {
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0; @apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0;
transition: transform .5s ease-out, opacity .5s linear; transition:
transform 0.5s ease-out,
opacity 0.5s linear;
text-shadow: 2px 2px 5px black; text-shadow: 2px 2px 5px black;
} }
} }
.barlow { .barlow {
font-family: Barlow Condensed, sans-serif; font-family:
Barlow Condensed,
sans-serif;
} }
.card { .card {
@ -207,7 +218,7 @@ const prefixColorMap: {
} }
> svg { > svg {
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
} }
} }
</style> </style>

2
src/styles/table.css
View File

@ -31,7 +31,7 @@ table {
text-align: center; text-align: center;
tr:nth-child(odd) { tr:nth-child(odd) {
@apply bg-neutral-200 dark:bg-neutral-800; @apply backdrop-brightness-125;
} }
} }
} }