Changes
This commit is contained in:
Chaoscaot
54
src/pages/[...slug].astro
Normal file
54
src/pages/[...slug].astro
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content'
|
||||
import {astroI18n} from "astro-i18n";
|
||||
import NavbarLayout from "../layouts/NavbarLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
let posts = await getCollection("pages");
|
||||
|
||||
return posts.filter(value => value.id.split("/")[0] === astroI18n.langCode).map((page) => ({
|
||||
props: { page }, params: { slug: page.slug }
|
||||
}) )
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
const { Content } = await page.render();
|
||||
---
|
||||
|
||||
|
||||
<NavbarLayout title={page.data.title}>
|
||||
<article>
|
||||
<h1 class="text-left">{page.data.title}</h1>
|
||||
<p class="text-left border-b-2 border-neutral-800">{page.data.description}</p>
|
||||
<Content />
|
||||
</article>
|
||||
</NavbarLayout>
|
||||
|
||||
<style is:global>
|
||||
article {
|
||||
width: clamp(75%, 25rem, 100vw);
|
||||
@apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
|
||||
dark:text-white dark:bg-neutral-900;
|
||||
|
||||
h1 {
|
||||
@apply text-4xl font-bold mt-4 text-center;
|
||||
}
|
||||
h2 {
|
||||
@apply text-3xl font-bold mt-4;
|
||||
}
|
||||
h3 {
|
||||
@apply text-2xl font-bold mt-4;
|
||||
}
|
||||
h4 {
|
||||
@apply text-xl font-bold mt-4;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue-500 hover:text-blue-700;
|
||||
}
|
||||
|
||||
pre.astro-code {
|
||||
@apply w-fit p-4 rounded-md border-2 border-gray-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
src/pages/about.astro
Normal file
8
src/pages/about.astro
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
|
||||
import NavbarLayout from "../layouts/NavbarLayout.astro";
|
||||
---
|
||||
|
||||
<NavbarLayout title="About Us">
|
||||
|
||||
</NavbarLayout>
|
||||
8
src/pages/admin/index.astro
Normal file
8
src/pages/admin/index.astro
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import App from '../../components/admin/App.svelte'
|
||||
import Basic from "../../layouts/Basic.astro";
|
||||
---
|
||||
|
||||
<Basic>
|
||||
<App client:only="svelte" />
|
||||
</Basic>
|
||||
@@ -4,14 +4,17 @@ import NavbarLayout from "../layouts/NavbarLayout.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import localBau from "../images/2022-03-28_13.18.25.png";
|
||||
import {l, t} from "astro-i18n";
|
||||
import {CaretRight} from "@astropub/icons"
|
||||
import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
|
||||
---
|
||||
|
||||
<NavbarLayout title="SteamWar.de - Home">
|
||||
<NavbarLayout title={t("home.page")}>
|
||||
<div class="w-screen h-screen relative mb-4">
|
||||
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl" style="height: calc(100vh + 1rem)" draggable="false" />
|
||||
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
|
||||
<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-2xl sm:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black">{t("home.title")}</h1>
|
||||
<h1 class="text-2xl sm:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
|
||||
<span class="text-yellow-400">{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")}<player-count /></h2>
|
||||
<h2>{t("home.subtitle.2")}</h2>
|
||||
@@ -22,12 +25,8 @@ import {CaretRight} from "@astropub/icons"
|
||||
class TextCarousel extends HTMLElement {
|
||||
current = 0;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.children[this.current].classList.add("!opacity-100")
|
||||
this._current.classList.add("!opacity-100")
|
||||
|
||||
for (let i = 0; i < this.children.length; i++) {
|
||||
if (i !== this.current) {
|
||||
@@ -40,32 +39,28 @@ import {CaretRight} from "@astropub/icons"
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
get _current() {
|
||||
return this.children[this.current]
|
||||
}
|
||||
|
||||
next() {
|
||||
this.children[this.current].classList.remove("!opacity-100")
|
||||
this.children[this.current].classList.add("translate-y-8")
|
||||
this.children[this.current].classList.remove("!delay-500")
|
||||
this._current.classList.remove("!opacity-100")
|
||||
this._current.classList.add("translate-y-8")
|
||||
this._current.classList.remove("!delay-500")
|
||||
this.current = (this.current + 1) % this.children.length
|
||||
this.children[this.current].classList.add("!opacity-100")
|
||||
this.children[this.current].classList.remove("translate-y-8")
|
||||
this.children[this.current].classList.add("!delay-500")
|
||||
this._current.classList.add("!opacity-100")
|
||||
this._current.classList.remove("translate-y-8")
|
||||
this._current.classList.add("!delay-500")
|
||||
}
|
||||
}
|
||||
|
||||
class PlayerCount extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerText = String(Math.floor(Math.random() * 100))
|
||||
}
|
||||
}
|
||||
|
||||
class DropIn extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
for (let child of this.children) {
|
||||
if(child.classList.contains("opacity-0")) {
|
||||
@@ -85,15 +80,37 @@ import {CaretRight} from "@astropub/icons"
|
||||
</script>
|
||||
</drop-in>
|
||||
</div>
|
||||
<h2>HELLO!</h2>
|
||||
<section class="w-screen flex flex-col items-center justify-center">
|
||||
<div class="py-10 flex flex-col lg:flex-row">
|
||||
<div class="card">
|
||||
<Archive heigth="64" width="64" />
|
||||
<h1>{t("home.benefits.historic.title")}</h1>
|
||||
<p>{t("home.benefits.historic.description.1")}</p>
|
||||
<p>{t("home.benefits.historic.description.2")}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<Rocket heigth="64" width="64" />
|
||||
<h1>{t("home.benefits.server.title")}</h1>
|
||||
<p>{t("home.benefits.server.description")}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<Bell heigth="64" width="64" />
|
||||
<h1>{t("home.benefits.events.title")}</h1>
|
||||
<p>{t("home.benefits.events.description.1")}</p>
|
||||
<p>{t("home.benefits.events.description.2")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn px-8 flex" href={l("/about")}>Read More <CaretRight width="24" heigth="24" /></a>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
</section>
|
||||
</NavbarLayout>
|
||||
|
||||
<style>
|
||||
@import url("/fonts/barlow-condensed/barlow-condensed.css");
|
||||
|
||||
text-carousel{
|
||||
>* {
|
||||
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl underline 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;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
@@ -102,4 +119,15 @@ import {CaretRight} from "@astropub/icons"
|
||||
.barlow {
|
||||
font-family: Barlow Condensed;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply 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;
|
||||
>h1 {
|
||||
@apply text-xl font-bold underline mt-4;
|
||||
}
|
||||
>p {
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
|
||||
import NavbarLayout from "../layouts/NavbarLayout.astro";---
|
||||
|
||||
<NavbarLayout title="Join">
|
||||
|
||||
</NavbarLayout>
|
||||
Reference in New Issue
Block a user