refactor: update typography to EB Garamond, add punch-link styling, and refine landing page content and components.

app/error.vue

@@ -10,12 +10,28 @@ useHead({
 
 <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-bg"></div>
             <div class="error-content">
                 <h1>{{ error.status }}</h1>
-                <p>Sorry, something went wrong.</p>
-                <NuxtLink to="/">Back to the homepage.</NuxtLink>
+                <p>
+                    {{ error.message ?? 'Sorry, something went wrong.' }}
+                </p>
+                <p>
+                    <NuxtLink to="/" class="punch-link"
+                        >Back to the homepage.</NuxtLink
+                    >
+                </p>
             </div>
         </div>
     </div>
@@ -39,65 +55,21 @@ useHead({
     justify-content: center;
     padding: 2rem 16rem;
     color: var(--bg);
+    isolation: isolate;
+}
+
+.error-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
     background: url('/blend.jpeg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     filter: url(#grainy);
-}
-
-.error-bg {
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* glass effect on background */
-    /* background: rgba(0, 0, 0, 0.16);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(5px); */
+    z-index: -1;
 }
 
 .error-content {
-    z-index: 1;
-}
-
-a {
-    position: relative;
-    color: var(--bg);
-    text-decoration: underline;
-    text-underline-offset: 4px;
-    z-index: 1;
-}
-
-a::before {
-    content: '';
-    background-color: var(--bg);
-    position: absolute;
-    top: -3px;
-    /* left: -4px; */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* width: calc(100% + 8px); */
-    width: 100%;
-    /* height: 0; */
-    height: calc(100% + 6px);
-    transform: scaleY(0);
-    transform-origin: bottom;
-    transition: transform 200ms ease;
-}
-
-a:hover::before {
-    /* transform: scaleY(1); */
-}
-
-a:hover {
-    mix-blend-mode: screen;
-    color: var(--text);
-    background-color: var(--bg);
 }
 </style>