Add 404 and 500 pages

layouts/404.html

@@ -0,0 +1,16 @@
+{{ define "main" }}
+    <div class="centered top-fade" style="height:100vh">
+        <div class="intro-content">
+            <h1 data-value="command not found" data-show="error-message" class="typewriter"></h1>
+            <div id="error-message">
+                <p data-value="Page not found, sorry about that"></p>
+            </div>
+            <div class="link-block">
+                <a href="javascript:history.back()">&lt;--&nbsp;Go back</a>
+                <p>&nbsp;|&nbsp;</p>
+                <a href="{{ .Site.BaseURL }}">Home&nbsp;--&gt;</a>
+            </div>
+        </div>
+    </div>
+
+{{ end }}

layouts/500.html

@@ -0,0 +1,16 @@
+{{ define "main" }}
+    <div class="centered top-fade" style="height:100vh">
+        <div class="intro-content">
+            <h1 data-value="kernel panic!" data-show="error-message" class="typewriter"></h1>
+            <div id="error-message">
+                <p data-value="Error on our side, my bad"></p>
+            </div>
+            <div class="link-block">
+                <a href="javascript:history.back()">&lt;--&nbsp;Go back</a>
+                <p>&nbsp;|&nbsp;</p>
+                <a href="{{ .Site.BaseURL }}">Home&nbsp;--&gt;</a>
+            </div>
+        </div>
+    </div>
+
+{{ end }}

static/css/styles.css

@@ -185,6 +185,12 @@ html {
     object-fit: contain;
 }
 
+.link-block {
+    display: inline-flex;
+    align-items: center;
+
+}
+
 article > a {
     text-decoration: none;
     display: flex;
@@ -198,13 +204,17 @@ article > a {
 
 article > a:hover {
     background: black;
+    transition: background 200ms linear;
 }
 
 .post {
-    margin-right: 10vw;
+    margin-right: 7vw;
-    margin-left: 10vw;
+    margin-left: 7vw;
     margin-top: 3vh;
     margin-bottom: 1vh;
+    padding: 3vh 3vw;
+    background-color: rgba(11,11,12,0.4);
+    border-radius: 5px;
 }
 
 img {