Eduard Iten
796d236d79
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 11s
55 lines
1.8 KiB
Plaintext
55 lines
1.8 KiB
Plaintext
---
|
|
// src/pages/404.astro
|
|
import MainLayout from "../layouts/MainLayout.astro";
|
|
import { getPath } from "../utils/paths";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
interface props {
|
|
title: string;
|
|
}
|
|
|
|
const { title = "404" } = Astro.props;
|
|
---
|
|
|
|
<div class="flex flex-col items-center justify-center min-h-[60vh] w-full py-12 error-component">
|
|
<div
|
|
class="w-full sm:max-w-lg -mx-4 sm:mx-0 bg-red-50 text-red-500 p-0 sm:rounded-lg sm:shadow border-y-2 sm:border-2 border-red-500 text-center"
|
|
>
|
|
<h1
|
|
class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3"
|
|
>
|
|
<span class="relative grid h-9 w-9">
|
|
<Icon
|
|
name="tabler:triangle-filled"
|
|
class="col-start-1 row-start-1 size-9 animate-ping opacity-75 translate-x-[-0.25px] translate-y-[-1.5px] blur-[1px]"
|
|
/>
|
|
<Icon
|
|
name="tabler:alert-triangle"
|
|
class="col-start-1 row-start-1 size-9 relative"
|
|
/>
|
|
</span>
|
|
Fehler {title}
|
|
</h1>
|
|
|
|
<p class="mb-4 text-red-500 py-2 px-4 text-lg">
|
|
<slot />
|
|
<a
|
|
href={getPath("/")}
|
|
class="flex items-center justify-center gap-1 font-semibold text-red-500 hover:text-white hover:bg-red-500 rounded-full px-4 py-2 hover:drop-shadow transition-colors duration-300 mt-2"
|
|
>
|
|
<Icon name="tabler:arrow-big-left" class="size-5" />
|
|
Zurück zur Startseite
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
@reference "../styles/global.css";
|
|
.error-component :global(br) {
|
|
@apply mb-3;
|
|
}
|
|
|
|
.error-component .animate-ping {
|
|
animation-duration: 2s;
|
|
}
|
|
</style> |