404: switch to tailwind for (minimal) styling

Author: nbogie

src/pages/404.astro

@@ -3,50 +3,37 @@ import Layout from "../layouts/BaseLayout.astro";
 
 /**
  * Returns the last (non-empty) segment from the slash-separated path, or ""
- * 
+ *
  * @param path string to extract the last part of
  * @returns the last non-empty segment or an empty string
- * 
- * @example 
+ *
+ * @example
  * an input of `/reference/p5/basematerialshader/` will return `basematerialshader`
  */
 function getLastPathElementOrEmptyString(path: string): string {
     return path.split("/").filter(Boolean).pop() ?? "";
 }
 
-
 const currentPath = Astro.url.pathname;
 const finalTerm = getLastPathElementOrEmptyString(currentPath);
 ---
 
 <Layout title="404: Page Not Found">
-    <main class="error-container">
-        <p>Sorry, we couldn't find your exact page <code>{currentPath}</code>.</p>
+    <main class="flex flex-col items-start gap-8 py-8 px-2 prose max-w-none">
+        <p>
+            Sorry, we couldn't find your exact page
+            <code>{currentPath}</code>.
 
-        <div class="actions">
-            <a
-                href={`https://beta.p5js.org/search/?term=${finalTerm}`}
-                class="btn secondary"
-            >
-                Search here for <code>{finalTerm}</code>
-            </a>
-or
-            <a href="/" class="btn">go home</a>
-        </div>
+            <div class="flex flex-col gap-4">
+                <a
+                    href={`https://beta.p5js.org/search/?term=${finalTerm}`}
+                    class="btn"
+                >
+                    Search here for <code>{finalTerm}</code>
+                </a>
+                or
+                <a href="/" class="btn secondary">go home</a>
+            </div>
+        </p>
     </main>
 </Layout>
-<style>
-  .error-container {
-    display: flex;
-    flex-direction:column;
-    align-items: flex-start;
-    padding: 2rem 1rem;    
-    gap: 2rem;
-  }
-  .actions {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    justify-content: center;
-  }
-</style>