404 page, assets exclusion, e g g tips hat, blog responsive

src/pages/404.astro

@@ -10,7 +10,47 @@ const description = "Error. This shouldn't happen :/"
   currentpage="404"
   descriptionOverride={description}
 >
-  <BaseSection title=":(" />
+  <BaseSection title="Firq has run into an error">
+    <div>
+      <img src="/assets/shishousad.webp" alt="Sad Shishou" />
+      <h2>Well ... you were not supposed to end up here.</h2>
+      <a href="/" aria-label="Home"
+        ><i class="iconoir-fast-arrow-left"></i>Go back home</a
+      >
+    </div>
+  </BaseSection>
 </Layout>
 
-<style></style>
+<style>
+  div {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+  }
+  h2 {
+    color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-top: 1rem;
+    max-width: max-content;
+  }
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 75%;
+    text-align: center;
+    color: white;
+    background-color: var(--c-gray);
+    padding: 0.5rem 0px;
+    margin-bottom: 2rem;
+    text-decoration: none;
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  a:hover {
+    color: var(--c-darkpurple);
+  }
+</style>