From f40858ffcbf6ba9b01f40e29103083feb1d5df3a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Wed, 21 Feb 2024 22:58:37 +0000
Subject: [PATCH] Builds simple 404 page

---
 web/src/pages/404.astro | 98 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 web/src/pages/404.astro

diff --git a/web/src/pages/404.astro b/web/src/pages/404.astro
new file mode 100644
index 0000000..9d800ab
--- /dev/null
+++ b/web/src/pages/404.astro
@@ -0,0 +1,98 @@
+---
+
+import Layout from '@layouts/Layout.astro';
+import Buton from '@components/form/Button.astro';
+
+---
+
+<Layout title="404 | Awesome Privacy">
+
+  <article class="oh-crap">
+    <h2>404</h2>
+    <p class="what-happened">Page not found 😢</p>
+    <p class="why-happened">
+      It seems this page doesn't exist (yet). We're sorry about that.
+    </p>
+    <span class="back-you-go-then"><Buton url="/">Go back home</Buton></span>
+
+    <nav class="other-places">
+      Looking for somewhere else?
+      <ul>
+        <li>
+          <a href="/search">Search</a>
+        </li>
+        <li>
+          <a href="/browse">Browse</a>
+        </li>
+        <li>
+          <a href="/about">About</a>
+        </li>
+        <li>
+          <a href="https://github.com/lissy93/awesome-privacy">Source</a>
+        </li>
+        <li>
+          <a href="https://as93.net">More Apps</a>
+        </li>
+      </ul>
+    </nav>
+  </article>
+
+</Layout>
+
+
+<style lang="scss">
+.oh-crap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 6rem);
+  h2 {
+    font-size: 12rem;
+    margin: 0;
+  }
+  .what-happened {
+    font-size: 4rem;
+    margin: 0;
+    opacity: 0.8;
+  }
+  .why-happened {
+    font-size: 1.5rem;
+    text-align: center;
+    margin-bottom: 2rem;
+    opacity: 0.6;
+  }
+  .back-you-go-then :global(a) {
+    font-size: 2rem;
+  }
+
+
+  .other-places {
+    opacity: 0.8;
+    margin: 2rem auto 1rem auto;
+    text-align: center;
+    &:hover {
+      opacity: 1;
+    }
+    ul {
+      list-style: none;
+      display: flex;
+      padding: 0;
+      gap: 0.5rem;
+      li {
+        &:not(:last-child) {
+          border-right: 1px solid var(--accent);
+          padding-right: 0.5rem;
+        }
+      }
+      li a {
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  
+}
+</style>