1 files changed, 39 insertions, 12 deletions
diff --git a/layouts/404.html b/layouts/404.html
index c2f0c31..d249f23 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,17 +1,44 @@
+{{ define "hero" }}
+{{ end }}
+
 {{ define "main" }}
-<div id="content" class="bg-near-white pb2 pt5">
-    <header class="tc ph5 lh-copy">
-        <h1 class="f1 f-headline-l code dib orange">404</h1>
-        <h2 class="tc f1-l fw1">Sorry, we can't find the page you are looking for.</h2>
-    </header>
+  <div class="max-w-screen-md mx-auto px-1 mv4">
+    <h1 class="text-center baskerville">{{ .Title }}</h1>
 
-    <p class="fw1 i tc mt4 mt5-l f4 f3-l">Are you looking for one of these?</p>
+    <p class="text-xl baskerville">{{ T "maybe_look" }}</p>
 
-    <div class="db tc ma3 f6">
-        {{ range .Site.Menus.main }}
-        <a class="dib link dim ph3 pv2 ba br1 ttu f5 ma1" href="{{ .URL | relLangURL }}" title="{{ .Title }}">
-            {{ .Pre }} {{ .Name }}</a>
+    {{ $query := where (where (where (where site.RegularPages.ByDate.Reverse "Title" "!=" "") "Kind" "in" (slice "page" "section")) "Params.private" "!=" true) "Permalink" "!=" "" }}
+    {{ $count := len $query }}
+    {{ if gt $count 0 }}
+      <h3 class="baskerville">{{ T "recent_pages" }}</h3>
+      <ul class="">
+        {{ range first 10 $query }}
+          <li
+            class="transition hover:scale-105 odd:bg-white even:bg-gray-200 p-2"
+          >
+            <a class="hover:opacity-50 block" href="{{ .RelPermalink }}">
+              {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
+              <time
+                datetime="{{ .Date.Format "2006-01-02" }}"
+                class="text-sm float-right ml-2"
+              >
+                <i class="far fa-calendar"></i>
+                {{ time.Format $dateFormat .Date }}
+              </time>
+              {{ .Title }}
+              <sup class="bg-lime-500 text-white uppercase p-1 rounded-full"
+                >{{ .Section }}</sup
+              >
+            </a>
+          </li>
         {{ end }}
-    </div>
-</div>
+      </ul>
+    {{ end }}
+    <a href="/search" class="hover:opacity-50">
+      <h3 class="baskerville">
+        <i class="fas fa-magnifying-glass"></i>
+        {{ T "try_search" }}
+      </h3>
+    </a>
+  </div>
 {{ end }}