Code Cleanup™
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import NavbarLayout from "@layouts/NavbarLayout.astro";
|
||||
|
||||
import { Image } from "astro:assets";
|
||||
import {Image} from "astro:assets";
|
||||
import localBau from "@images/2023-10-08_20.43.43.png";
|
||||
import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
|
||||
import {t} from "astro-i18n";
|
||||
@@ -35,95 +35,105 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
|
||||
<div class="w-full h-screen relative mb-4">
|
||||
<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
|
||||
<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
|
||||
class="w-full 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-4xl sm:text-6xl md: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 class="text-4xl sm:text-6xl md: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")}</h2>
|
||||
<h2>{t("home.subtitle.2")}<PlayerCount client:only="svelte" /></h2>
|
||||
<h2>{t("home.subtitle.2")}
|
||||
<PlayerCount client:only="svelte"/>
|
||||
</h2>
|
||||
<h2>{t("home.subtitle.3")}</h2>
|
||||
</text-carousel>
|
||||
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
|
||||
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16"
|
||||
style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")}
|
||||
<CaretRight width="24" heigth="24"/>
|
||||
</a>
|
||||
<script>
|
||||
class TextCarousel extends HTMLElement {
|
||||
current = 0;
|
||||
class TextCarousel extends HTMLElement {
|
||||
current = 0;
|
||||
|
||||
connectedCallback() {
|
||||
this._current.classList.add("!opacity-100");
|
||||
connectedCallback() {
|
||||
this._current.classList.add("!opacity-100");
|
||||
|
||||
for (let i = 0; i < this.children.length; i++) {
|
||||
if (i !== this.current) {
|
||||
this.children[i].classList.add("translate-y-8");
|
||||
for (let i = 0; i < this.children.length; i++) {
|
||||
if (i !== this.current) {
|
||||
this.children[i].classList.add("translate-y-8");
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
this.next();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
get _current() {
|
||||
return this.children[this.current];
|
||||
}
|
||||
|
||||
next() {
|
||||
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._current.classList.add("!opacity-100");
|
||||
this._current.classList.remove("translate-y-8");
|
||||
this._current.classList.add("!delay-500");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
this.next();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
get _current() {
|
||||
return this.children[this.current];
|
||||
}
|
||||
|
||||
next() {
|
||||
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._current.classList.add("!opacity-100");
|
||||
this._current.classList.remove("translate-y-8");
|
||||
this._current.classList.add("!delay-500");
|
||||
}
|
||||
}
|
||||
|
||||
class DropIn extends HTMLElement {
|
||||
connectedCallback() {
|
||||
for (let child of this.children) {
|
||||
if(child.classList.contains("opacity-0")) {
|
||||
child.classList.remove("opacity-0");
|
||||
child.classList.remove("-translate-y-16");
|
||||
} else {
|
||||
child.children[0].classList.remove("opacity-0");
|
||||
child.children[0].classList.remove("-translate-y-16");
|
||||
class DropIn extends HTMLElement {
|
||||
connectedCallback() {
|
||||
for (let child of this.children) {
|
||||
if (child.classList.contains("opacity-0")) {
|
||||
child.classList.remove("opacity-0");
|
||||
child.classList.remove("-translate-y-16");
|
||||
} else {
|
||||
child.children[0].classList.remove("opacity-0");
|
||||
child.children[0].classList.remove("-translate-y-16");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("text-carousel", TextCarousel);
|
||||
customElements.define("drop-in", DropIn);
|
||||
customElements.define("text-carousel", TextCarousel);
|
||||
customElements.define("drop-in", DropIn);
|
||||
</script>
|
||||
</drop-in>
|
||||
</div>
|
||||
<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">
|
||||
<div class="card">
|
||||
<Archive heigth="64" width="64" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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")}>{t("home.benefits.read")}<CaretRight width="24" heigth="24" /></a>
|
||||
<a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}
|
||||
<CaretRight width="24" heigth="24"/>
|
||||
</a>
|
||||
</section>
|
||||
<section class="w-full py-12">
|
||||
{mapMap(groupedTeamMember, (key, value) => (
|
||||
@@ -136,7 +146,9 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
|
||||
dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
|
||||
<figure class="flex flex-col items-center">
|
||||
<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
|
||||
<Image src={`https://visage.surgeplay.com/bust/150/${v.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={v.name + "s bust"} width="150" height="150" />
|
||||
<Image src={`https://visage.surgeplay.com/bust/150/${v.uuid}`}
|
||||
class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl"
|
||||
alt={v.name + "s bust"} width="150" height="150"/>
|
||||
</figure>
|
||||
</div>
|
||||
))}
|
||||
@@ -147,30 +159,33 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
|
||||
</NavbarLayout>
|
||||
|
||||
<style>
|
||||
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;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
}
|
||||
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;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
}
|
||||
|
||||
.barlow {
|
||||
font-family: Barlow Condensed, serif;
|
||||
}
|
||||
.barlow {
|
||||
font-family: Barlow Condensed, serif;
|
||||
}
|
||||
|
||||
.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 transition-transform duration-300 ease-in-out
|
||||
dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100
|
||||
hover:scale-105;
|
||||
>h1 {
|
||||
@apply text-xl font-bold mt-4;
|
||||
}
|
||||
>p {
|
||||
@apply mt-4;
|
||||
}
|
||||
>svg {
|
||||
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
|
||||
}
|
||||
}
|
||||
.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 transition-transform duration-300 ease-in-out
|
||||
dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100
|
||||
hover:scale-105;
|
||||
|
||||
> h1 {
|
||||
@apply text-xl font-bold mt-4;
|
||||
}
|
||||
|
||||
> p {
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
> svg {
|
||||
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user