From 77b11e0fdab0046f65ffcdda6310985667b9d2dc Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Jan 2023 01:29:36 +0100
Subject: [PATCH] updated 404

---
 frontend/src/styles/404.scss        | 45 ++++++++++++++++++++---------
 frontend/static/html/pages/404.html | 13 +++++----
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/frontend/src/styles/404.scss b/frontend/src/styles/404.scss
index 9e444d46f..a20c9fcd6 100644
--- a/frontend/src/styles/404.scss
+++ b/frontend/src/styles/404.scss
@@ -4,25 +4,44 @@
   height: 100%;
   align-content: center;
   .content {
-    justify-items: center;
     display: grid;
-    gap: 2rem;
-    width: min-content;
-    text-align: center;
+    grid-auto-flow: column;
+    gap: 4rem;
+    grid-template-columns: 300px 300px;
+
     .image {
-      width: 300px;
+      width: 100%;
+      align-self: center;
       background-image: url("./../images/monkeymeme.jpg");
-      aspect-ratio: 1210/800;
+      aspect-ratio: 300/199;
       background-size: contain;
+      border-radius: var(--roundness);
     }
-    .big {
-      font-size: 10rem;
-      line-height: 10rem;
-      color: var(--sub-color);
+
+    .title {
+      font-size: 5rem;
+      line-height: 4rem;
+      /* margin: -3rem; */
+      color: var(--main-color);
+      align-self: center;
     }
-    .button {
-      padding: 1rem 2rem;
-      width: max-content;
+
+    .side {
+      justify-items: center;
+      display: grid;
+      gap: 1rem;
+      // width: min-content;
+      text-align: center;
+
+      .big {
+        font-size: 10rem;
+        line-height: 10rem;
+        color: var(--sub-color);
+      }
+      .button {
+        padding: 1rem 2rem;
+        width: max-content;
+      }
     }
   }
 }
diff --git a/frontend/static/html/pages/404.html b/frontend/static/html/pages/404.html
index 3b1f3a38f..cfe2409ab 100644
--- a/frontend/static/html/pages/404.html
+++ b/frontend/static/html/pages/404.html
@@ -1,10 +1,13 @@
 <div class="page page404 hidden">
   <div class="content">
     <div class="image"></div>
-    <div>Ooops! Looks like you found a page that doesn't exist.</div>
-    <a href="/" class="button" router-link>
-      <i class="fas fa-home"></i>
-      Go Home
-    </a>
+    <div class="side">
+      <div class="title">404</div>
+      <div>Ooops! Looks like you found a page that doesn't exist.</div>
+      <a href="/" class="button" router-link>
+        <i class="fas fa-home"></i>
+        Go Home
+      </a>
+    </div>
   </div>
 </div>