Revamp 404.html

_pages/404.html

@@ -1,11 +1,16 @@
 ---
 permalink: /404
-layout: default
+layout: base
+no_header: false
 _preview_description: The page you have requested no longer or has never existed.
 ---
 
 <div class="container">
-  <h1>404</h1>
+    <div class="inner-container">
-  <p><strong>Page not found :(</strong></p>
+        <h1>404</h1>
-  <p>The requested page could not be found.</p>
+        <p>The requested page could not be found.</p>
+        <span>
+            > <a href="/">Return to ~/</a>
+        </span>
+    </div>
 </div>

_sass/main.scss

@@ -17,6 +17,14 @@ img {
   image-orientation: from-image;
 }
 
+html, body {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
 html {
   overflow-y: scroll;
   font-size: 16pt;
@@ -24,8 +32,6 @@ html {
 }
 
 body {
-  max-width: 46em;
-  margin: 1em auto 2em auto;
   padding: 0 1em;
   font-family: CMU Serif, serif;
   line-height: 1.5;
@@ -33,6 +39,11 @@ body {
   color: white;
 }
 
+.body-container {
+  max-width: 46em;
+  margin: 0 auto;
+}
+
 p,
 table {
   margin: 0.5em 0;
@@ -346,14 +357,31 @@ article {
 }
 
 .container {
-  margin: 10px auto;
+  height: 100%;
-  max-width: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
 
-  h1 {
+  .inner-container {
-    margin: 30px 0;
+    max-width: 600px;
-    font-size: 4em;
+
-    line-height: 1;
+    h1 {
-    letter-spacing: -1px;
+      margin: 0;
+      font-size: 6em;
+      line-height: 1;
+      letter-spacing: -1px;
+    }
+
+    span {
+      font-family: CMU Typewriter Text, sans-serif;
+
+
+      a {
+        text-decoration: none;
+        font-style: italic;
+        //color: #90bcff;
+      }
+    }
   }
 }