86 lines
3.3 KiB
Plaintext
86 lines
3.3 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
import Basic from "./Basic.astro";
|
|
import "../styles/button.css";
|
|
import localLogo from "../images/logo.png";
|
|
import { YoutubeSolid, DiscordSolid, FileCodeSolid } from "flowbite-svelte-icons";
|
|
import { t } from "astro-i18n";
|
|
import { l } from "../util/util";
|
|
|
|
import Navbar from "@components/Navbar.svelte";
|
|
|
|
import ServerStatus from "../components/ServerStatus.svelte";
|
|
|
|
const { title, description, transparentFooter = true } = Astro.props;
|
|
---
|
|
|
|
<Basic title={title} description={description} autoDarkMode={false}>
|
|
<slot name="head" slot="head" />
|
|
<Fragment>
|
|
<div class="min-h-screen flex flex-col">
|
|
<Navbar client:idle>
|
|
<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" />
|
|
</Navbar>
|
|
<main class="flex-1" data-pagefind-body>
|
|
<slot />
|
|
</main>
|
|
<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="footer-card">
|
|
<h1>Serverstatus</h1>
|
|
<ServerStatus client:only="svelte" />
|
|
</div>
|
|
<div class="footer-card">
|
|
<h1>Links</h1>
|
|
<a href={l("/")}>{t("navbar.links.home.title")}</a>
|
|
<a href={l("/join")}>{t("footer.join")}</a>
|
|
<a href={l("/announcements")}>{t("footer.announcements")}</a>
|
|
<a href={l("/rules")}>{t("footer.gamemodes")}</a>
|
|
<a href={l("/stats/fight")}>{t("footer.stats")}</a>
|
|
<a href={l("/code-of-conduct")}>{t("footer.coc")}</a>
|
|
<a href={l("/privacy-policy")}>{t("footer.privacy")}</a>
|
|
<a href={l("/imprint")}>{t("footer.imprint")}</a>
|
|
</div>
|
|
<div class="footer-card">
|
|
<h1>Social Media</h1>
|
|
<a class="flex" href="/youtube">
|
|
<YoutubeSolid class="mr-2" />
|
|
YouTube</a
|
|
>
|
|
<a class="flex" href="/discord">
|
|
<DiscordSolid class="mr-2" />
|
|
Discord</a
|
|
>
|
|
<a class="flex" href="https://git.steamwar.de">
|
|
<FileCodeSolid class="mr-2" />
|
|
Gitea</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>
|
|
</footer>
|
|
</div>
|
|
</Fragment>
|
|
</Basic>
|
|
|
|
<style>
|
|
.footer-card {
|
|
@apply w-40 text-gray-400 flex flex-col;
|
|
|
|
> h1 {
|
|
@apply text-xl font-bold text-gray-100;
|
|
}
|
|
|
|
> a {
|
|
@apply hover:underline;
|
|
}
|
|
}
|
|
|
|
.match {
|
|
width: min(100vw, 70em);
|
|
}
|
|
</style>
|