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

src/components/blogCard.astro

@@ -38,10 +38,14 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
       width: 1.5rem;
       border-radius: 50%;
       background-color: var(--c-darkpurple);
+      transition: transform var(--speed) var(--ease);
     }
 
     a:hover > .circle {
-      transform: none;
+      height: 1.75rem;
+      width: 1.75rem;
+      translate: -0.125rem;
+      margin-right: 0.825rem;
     }
 
     article {

src/layouts/baseSection.astro

@@ -34,7 +34,7 @@ const { title } = Astro.props
     color: white;
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
-    width: max-content;
+    max-width: max-content;
     background-color: var(--c-darkgray);
   }
   @media (min-width: 512px) {

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>