Fehlerseiten hinzugefügt

src/components/ErrorComponent.astro

@@ -0,0 +1,41 @@
+---
+// 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="grid place-items-center min-h-[60vh] w-full error-component">
+    <div
+        class="w-full sm:max-w-lg bg-red-50 text-red-500 p-0 sm:rounded-lg sm:shadow border-b-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"
+        >
+            <Icon name="tabler:alert-triangle" class="size-9" />
+            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 transition-[1s] 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;
+    }
+</style>

src/components/Footer.astro

@@ -24,15 +24,15 @@ const displayYear = currentYear > startYear ? `${startYear}–${currentYear}` :
 
 <style>
     @reference "../styles/global.css";
-    .main-footer {
+    /* .main-footer {
         @apply fixed bottom-0 left-0 w-full z-50 py-2 shadow-top  bg-linear-to-b from-white/80 to-header-bg/80 backdrop-blur-sm;
 
-    }
-
-    /* .main-footer {
-        @apply w-full bg-linear-to-b from-white to-header-bg py-2 mt-auto shadow-top;
     } */
 
+    .main-footer {
+        @apply w-full bg-linear-to-b from-white to-header-bg py-2 mt-auto shadow-top;
+    }
+
     .footer-container {
         @apply container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4;
     }

src/pages/403.astro

@@ -0,0 +1,18 @@
+---
+// src/pages/403.astro
+import MainLayout from "../layouts/MainLayout.astro";
+import ErrorComponent from "../components/ErrorComponent.astro";
+---
+
+<MainLayout title={`Fehler 403 - Zugriff verweigert | iten.pro`}>
+    <ErrorComponent title="403">
+        <span class="font-semibold">
+            Du hast keinen Zugriff auf diese Seite.
+        </span>
+        <br />
+        Du kannst versuchen, dich anzumelden, um Zugriff zu erhalten, oder du hast
+        vielleicht nicht die erforderlichen Berechtigungen, um diese Seite zu sehen.
+        In jedem Fall tut es mir leid, dass du hier gelandet bist. Vielleicht findest
+        du ja auf der Startseite, was du suchst?
+    </ErrorComponent>
+</MainLayout>

src/pages/404.astro

@@ -0,0 +1,18 @@
+---
+// src/pages/404.astro
+import MainLayout from "../layouts/MainLayout.astro";
+import ErrorComponent from "../components/ErrorComponent.astro";
+---
+
+<MainLayout title={`Fehler 404 - Seite nicht gefunden | iten.pro`}>
+    <ErrorComponent title="404">
+        <span class="font-semibold"
+            >Die angeforderte Seite konnte nicht gefunden werden.
+        </span>
+        <br />
+        Das kann an einer Fehlprogrammierung meinerseits liegen oder an einem veralteten
+        Link, der noch auf die alte Seite verweist. In jedem Fall tut es mir leid,
+        dass du hier gelandet bist. Vielleicht findest du ja auf der Startseite, was
+        du suchst?
+    </ErrorComponent>
+</MainLayout>

src/pages/500.astro

@@ -0,0 +1,17 @@
+---
+// src/pages/500.astro
+import MainLayout from "../layouts/MainLayout.astro";
+import ErrorComponent from "../components/ErrorComponent.astro";
+---
+
+<MainLayout title={`Fehler 500 - Interner Serverfehler | iten.pro`}>
+    <ErrorComponent title="500">
+        <span class="font-semibold"
+            >Es ist ein interner Serverfehler aufgetreten.
+        </span>
+        <br />
+        Das kann an einer Fehlprogrammierung meinerseits liegen oder an einem vorübergehenden
+        Problem auf dem Server. In jedem Fall tut es mir leid, dass du hier gelandet
+        bist. Vielleicht findest du ja auf der Startseite, was du suchst?
+    </ErrorComponent>
+</MainLayout>

src/styles/global.css

@@ -2,7 +2,7 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-    --color-header-bg: var(--color-slate-400);
+    --color-header-bg: var(--color-slate-300);
     --color-nav-text: var(--color-slate-400);
     --color-nav-hover: var(--color-blue-400);
     --shadow-top: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);