Code Cleanup™
This commit is contained in:
@@ -2,8 +2,8 @@
|
||||
import icon from "../images/logo.png";
|
||||
import {getImage} from "astro:assets";
|
||||
import {astroI18n} from "astro-i18n";
|
||||
const { title, description } = Astro.props.frontmatter || Astro.props;
|
||||
import { SEO } from "astro-seo";
|
||||
const {title, description} = Astro.props.frontmatter || Astro.props;
|
||||
import {SEO} from "astro-seo";
|
||||
|
||||
import "../../public/fonts/roboto/roboto.css";
|
||||
|
||||
@@ -17,24 +17,24 @@ const iconImage = await getImage({src: icon, height: 32, width: 32, format: "png
|
||||
content="width=device-width, user-scalable=5, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="icbm" content="52.370216;4.895168"/>
|
||||
<link rel="icon" type="imgage/png" href={iconImage.src} />
|
||||
<link rel="icon" type="imgage/png" href={iconImage.src}/>
|
||||
|
||||
<SEO
|
||||
title={title}
|
||||
description={description}
|
||||
twitter={{
|
||||
creator: "@chaoscaot"
|
||||
creator: "@chaoscaot",
|
||||
}}
|
||||
languageAlternates={astroI18n.locales.map((locale) => ({
|
||||
hrefLang: locale,
|
||||
href: `/${locale}/`
|
||||
href: `/${locale}/`,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<slot name="head" />
|
||||
<slot name="head"/>
|
||||
</head>
|
||||
<body class="dark:bg-zinc-800">
|
||||
<slot />
|
||||
<slot/>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import { Image } from "astro:assets";
|
||||
import {Image} from "astro:assets";
|
||||
import Basic from "./Basic.astro";
|
||||
import "../styles/button.css";
|
||||
import localLogo from "../images/logo.png";
|
||||
@@ -9,18 +9,19 @@ import {l} from "../util/util";
|
||||
|
||||
import ServerStatus from "../components/ServerStatus.svelte";
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
const {title, description} = Astro.props;
|
||||
---
|
||||
|
||||
<Basic title={title} description={description}>
|
||||
<slot name="head" slot="head" />
|
||||
<slot name="head" slot="head"/>
|
||||
<Fragment>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<nav-bar class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center \
|
||||
before:bg-black 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">
|
||||
<div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
|
||||
class="mr-2 p-1 bg-black rounded-full"/>
|
||||
<h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
|
||||
{t("navbar.title")}
|
||||
</h1>
|
||||
@@ -31,10 +32,11 @@ const { title, description } = Astro.props;
|
||||
<a href={l("/")}>
|
||||
<span class="btn__text">{t("navbar.links.home.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto" />
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
</button>
|
||||
<div>
|
||||
<a class="btn btn-gray my-1" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
|
||||
<a class="btn btn-gray my-1"
|
||||
href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
|
||||
<a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
|
||||
<a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
|
||||
<a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
|
||||
@@ -45,7 +47,7 @@ const { title, description } = Astro.props;
|
||||
<a rel="prefetch" href={l("/rules")}>
|
||||
<span class="btn__text">{t("navbar.links.rules.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto" />
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
</button>
|
||||
<div>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.gamemode")}</h2>
|
||||
@@ -55,9 +57,11 @@ const { title, description } = Astro.props;
|
||||
<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>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
|
||||
<a href={l("/rules/megawargear")}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/streetfight")}class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
|
||||
<a href={l("/rules/megawargear")}
|
||||
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/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.general")}</h2>
|
||||
<a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>
|
||||
</div>
|
||||
@@ -83,35 +87,35 @@ const { title, description } = Astro.props;
|
||||
</div>
|
||||
</nav-bar>
|
||||
<script>
|
||||
class Navbar extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
class Navbar extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
|
||||
window.onscroll = e => {
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
window.onscroll = e => {
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("nav-bar", Navbar);
|
||||
customElements.define("nav-bar", Navbar);
|
||||
</script>
|
||||
<main class="flex-1">
|
||||
<slot />
|
||||
<slot/>
|
||||
</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">
|
||||
<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" />
|
||||
<ServerStatus client:only="svelte"/>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<h1>Links</h1>
|
||||
@@ -126,8 +130,12 @@ customElements.define("nav-bar", Navbar);
|
||||
</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="/youtube">
|
||||
<YoutubeSolid class="mr-2"/>
|
||||
YouTube</a>
|
||||
<a class="flex" href="/discord">
|
||||
<DiscordSolid class="mr-2"/>
|
||||
Discord</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>
|
||||
@@ -139,10 +147,12 @@ customElements.define("nav-bar", Navbar);
|
||||
<style>
|
||||
.footer-card {
|
||||
@apply w-40 text-gray-400 flex flex-col;
|
||||
>h1 {
|
||||
|
||||
> h1 {
|
||||
@apply text-xl font-bold text-gray-100;
|
||||
}
|
||||
>a {
|
||||
|
||||
> a {
|
||||
@apply hover:underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
---
|
||||
import NavbarLayout from "./NavbarLayout.astro";
|
||||
import localBau from "../images/2023-10-08_20.43.43.png";
|
||||
import { Image } from "astro:assets";
|
||||
import {Image} from "astro:assets";
|
||||
|
||||
const { title, description, image } = Astro.props;
|
||||
const {title, description, image} = Astro.props;
|
||||
---
|
||||
|
||||
<NavbarLayout title={title} description={description}>
|
||||
<slot name="head" slot="head" />
|
||||
<Image src={image || localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
|
||||
<slot name="head" slot="head"/>
|
||||
<Image src={image || localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
|
||||
class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false"/>
|
||||
<div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14 relative
|
||||
dark:text-white dark:bg-neutral-900" style="width: min(100vw, 75em);">
|
||||
<slot />
|
||||
<slot/>
|
||||
</div>
|
||||
</NavbarLayout>
|
||||
Reference in New Issue
Block a user