SteamWar/Website
13
0
Fork 0
Code Issues 5 Pull-Requests Pakete Projekte 1 Releases Wiki Aktivität

Redo some Startpage :D
Alle Prüfungen waren erfolgreich
SteamWarCI Build successful
Details

Quellcode durchsuchen
Dieser Commit ist enthalten in:
Chaoscaot 2024-08-05 00:37:17 +02:00
Ursprung 4778429452
Commit 5409d4a248
3 geänderte Dateien mit 46 neuen und 6 gelöschten Zeilen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

16
src/layouts/Redirect.astro Normale Datei
Datei anzeigen

@ -0,0 +1,16 @@
---
import {astroI18n} from "astro-i18n";
const { url } = Astro.props;
---
<html lang={astroI18n.locale}>
<head data-redirect={url}>
<meta http-equiv="refresh" content={`0; URL=${url}`}/>
<script>
window.location.href = document.head.dataset["redirect"];
</script>
</head>
<body>
<p>Redirecting to <a href={url}>{url}</a></p>
</body>
</html>

30
src/pages/index.astro
Datei anzeigen

@ -45,8 +45,8 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
style="height: calc(100vh + 1rem)" draggable="false" loading="eager"/>
<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 tracking-wider"
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
style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);">
<span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{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">
@ -56,10 +56,28 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
</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")}
<a href={l("join")} class="btn btn-ghost mt-32 px-8 flex"
style="animation: normal flyIn forwards 1.2s ease-out">{t("home.join")}
<CaretRight width="24" heigth="24"/>
</a>
<style>
@keyframes flyIn {
0% {
translate: 0 16px;
opacity: 0;
}
20% {
translate: 0 16px;
opacity: 0;
}
100% {
translate: 0;
opacity: 1;
}
}
</style>
<script>
class TextCarousel extends HTMLElement {
current = 0;
@ -132,7 +150,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
<p class="mt-4">{t("home.benefits.events.description.2")}</p>
</Card>
</div>
<a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}
<a class="btn btn-ghost px-8 my-4 flex" href={l("/about")}>{t("home.benefits.read")}
<CaretRight width="24" heigth="24"/>
</a>
</section>
@ -146,7 +164,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
<figure class="flex flex-col items-center">
<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
<Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl"
class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
alt={v.name + "s bust"} width="150" height="150"/>
</figure>
</Card>

6
src/styles/button.css
Datei anzeigen

@ -49,6 +49,12 @@
}
}
.btn-ghost {
@apply px-6 text-xl;
@apply bg-transparent border-2 border-yellow-400 shadow-2xl shadow-yellow-400 backdrop-blur text-neutral-800 font-bold bg-gradient-to-br from-yellow-400 to-yellow-200 rounded-xl;
@apply hover:border-yellow-300 hover:shadow-yellow-800 hover:scale-110;
}
.btn-gray {
@apply bg-gray-800 text-white;
}