feat: update 404 page

layouts/404.html

@@ -1 +1,27 @@
-404
+{{ define "main" }}
+
+<div id="page-404">
+  <div class="text">
+    <h1>
+      404 - Page Not Found
+    </h1>
+    <div>
+      The content you're looking for doesn't seem to exist.
+    </div>
+  </div>
+
+  <h2 class="read-more">Read More</h2>  
+    {{ $pages := .Site.RegularPages }}
+    {{ $paginator := .Paginate ($pages) }}
+    {{ range $paginator.Pages }}
+        {{ $title := .Title }}
+        {{ $date := dateFormat "Jan 2, 2006" .Date }}
+        <section class="item">
+          <div>
+            <h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>   
+            <div class="date">{{ $date }}</div>
+          </div>
+        </section>
+    {{ end }}
+</div>
+{{ end }}

static/css/style.css

@@ -452,4 +452,44 @@ nav.navigation a.button {
   max-width: 580px;
   margin: 48px auto 0 auto;
   padding: 0 12px;
+}
+
+/* 404 page */
+#page-404 {
+  max-width: 580px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+#page-404 .item {
+  margin: 12px 0 0 0;
+}
+
+#page-404 .title {
+  display: inline-block;
+  color: #404040;
+  font-size: 15px;
+  font-weight: 400;
+  margin: 0;
+  width: 80%;
+}
+
+#page-404 .text {
+  text-align: center;
+  margin-top: 60px;
+}
+
+#page-404 .read-more {
+  font-weight: 300;
+  font-size: 20px;
+  margin-top: 48px;
+  margin-bottom: 12px;
+}
+
+#page-404 .date {
+  width: 20%;
+  float: right;
+  text-align: right;
+  position: relative;
+  top: 1px;
+  color: #bbb;
 }