rework to 2000's-ish style site

app/error.vue

@@ -9,68 +9,15 @@ useHead({
 </script>
 
 <template>
-    <div class="error-page">
-        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
-            <filter id="grainy" x="0" y="0" width="100%" height="100%">
-                <feTurbulence
-                    type="fractalNoise"
-                    baseFrequency=".85"
-                    numOctaves="3"
-                ></feTurbulence>
-                <feColorMatrix type="saturate" values="0"></feColorMatrix>
-                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
-            </filter>
-        </svg>
-        <div class="error-card">
-            <div class="error-content">
-                <h1>{{ error.status }}</h1>
-                <p>
-                    {{ error.message ?? 'Sorry, something went wrong.' }}
-                </p>
-                <p>
-                    <NuxtLink to="/" class="punch-link"
-                        >Back to the homepage.</NuxtLink
-                    >
-                </p>
-            </div>
-        </div>
-    </div>
+    <NuxtLayout
+        name="main"
+        :title="String(props.error.statusCode ?? 500)"
+        :description="props.error.message ?? 'Sorry, something went wrong.'"
+    >
+        <article>
+            <p>
+                <NuxtLink to="/">Back to the homepage.</NuxtLink>
+            </p>
+        </article>
+    </NuxtLayout>
 </template>
-
-<style scoped>
-.error-page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    text-align: center;
-}
-
-.error-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 16rem;
-    color: var(--bg);
-    isolation: isolate;
-}
-
-.error-card::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: url('~/assets/images/blend.jpeg');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: url(#grainy);
-    z-index: -1;
-}
-
-.error-content {
-    color: var(--text);
-}
-</style>