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

Changes

Browse Source
This commit is contained in:
Chaoscaot
2023-10-01 10:04:04 +02:00
parent 7728d9e177
commit e0f2702eca
49 changed files with 2589 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/layouts/Basic.astro
View File

@@ -4,18 +4,19 @@ import {astroI18n} from "astro-i18n";
const { title, description } = Astro.props.frontmatter || Astro.props;
---
<html lang={astroI18n.langCode}>
<html lang={astroI18n.langCode} class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content={description}/>
<link rel="stylesheet" href="/fonts/barlow-condensed/barlow-condensed.css" />
<title>{title}</title>
<slot name="head" />
</head>
<body>
<body class="dark:bg-zinc-800">
<slot />
</body>
</html>

109
src/layouts/NavbarLayout.astro
View File

@@ -11,25 +11,61 @@ const { title } = Astro.props;
<Basic title={title}>
<slot name="head" slot="head" />
<Fragment>
<div>
<nav-bar class="h-24 sm:h-12 fixed top-0 left-0 right-0 flex flex-col sm:flex-row items-center justify-evenly sm:justify-between px-4 transition-colors z-10 \
<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-transparent before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:bg-black before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
<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" />
<h1 class="text-2xl uppercase font-bold inline-block">
{t("navbar.title")}
</h1>
</a>
<div class="flex items-center">
<a class="btn btn-gray" href={l("/")}>
<span class="btn__text">Start</span>
</a>
<a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
<span class="btn__text">Blog</span>
</a>
<a class="btn">
<span class="btn__text">Login</span>
<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" />
<h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
{t("navbar.title")}
</h1>
</a>
<div class="flex items-center flex-wrap">
<div class="btn-dropdown my-1">
<a class="btn btn-gray" href={l("/")}>
<span class="btn__text">{t("navbar.links.home.title")}</span>
</a>
<div>
<a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
<a class="btn btn-gray">{t("navbar.links.home.downloads")}</a>
<a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
</div>
</div>
<a class="btn btn-gray my-1" href={l("/")}>
<span class="btn__text">{t("navbar.links.announcements")}</span>
</a>
<div class="btn-dropdown my-1">
<a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
<span class="btn__text">{t("navbar.links.rules.title")}</span>
</a>
<div>
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.gamemode")}</h2>
<a class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
<a class="btn btn-gray">{t("navbar.links.rules.mwg")}</a>
<a class="btn btn-gray">{t("navbar.links.rules.ws")}</a>
<a class="btn btn-gray">{t("navbar.links.rules.as")}</a>
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
<a class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
<a class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
<a 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">{t("navbar.links.rules.coc")}</a>
</div>
</div>
<div class="btn-dropdown my-1">
<a class="btn btn-gray" rel="prefetch">
<span class="btn__text">Help</span>
</a>
<div>
<a class="btn btn-gray">Helpcenter</a>
<a class="btn btn-gray">Docs</a>
</div>
</div>
<a class="btn my-1">
<span class="btn__text">Login</span>
</a>
</div>
</div>
</nav-bar>
<script>
@@ -54,14 +90,47 @@ const { title } = Astro.props;
customElements.define('nav-bar', Navbar);
</script>
<main>
<main class="flex-1">
<slot />
</main>
<footer class="bg-gray-900 w-screen h-80 mt-4 rounded-t-2xl flex flex-col dark:bg-neutral-900">
<div class="flex-1 flex justify-evenly mt-4 ">
<div class="footer-card">
<h1>Serverstatus</h1>
</div>
<div class="footer-card">
<h1>Links</h1>
<a href={l("/")}>Startseite</a>
<a href={l("/join")}>Join Now</a>
<a href={l("/")}>Announcements</a>
<a href={l("/")}>Gamemodes</a>
<a href={l("/")}>Stats</a>
<a href={l("/")}>Code of conduct</a>
<a href={l("/")}>Privacy Policy</a>
<a href={l("/")}>Imprint</a>
</div>
<div class="footer-card">
<h1>Social Media</h1>
<a>YouTube</a>
</div>
</div>
<span class="text-sm text-white text-center">© SteamWar.de</span>
</footer>
</div>
</Fragment>
</Basic>
<style>
.footer-card {
@apply w-36 text-gray-400 flex flex-col;
>h1 {
@apply text-xl font-bold text-gray-100;
}
>a {
@apply underline;
}
}
.scrolled {
@apply text-white;
@@ -69,4 +138,8 @@ const { title } = Astro.props;
@apply scale-y-100;
}
}
.match {
width: clamp(75%, 25rem, 100vw);
}
</style>