style: Improve code formatting and readability across multiple components

src/pages/index.astro

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