feat: 404 page

Former-commit-id: 09f020f0c7b8382ae4953041e32221b827fbb82f

1 files changed, 43 insertions, 7 deletions

diff --git a/layouts/404.html b/layouts/404.html
index b58ec77b..3fe16be5 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,7 +1,43 @@
-{{ define "main"}}
-    <main id="main">
-      <div>
-       <h1 id="title"><a href="{{ "/" | relURL }}">Go Home</a></h1>
-      </div>
-    </main>
-{{ end }}
\ No newline at end of file
+{{ define "main" }}
+    <style>
+    .page-404 {
+        position: relative;
+        height: calc(100dvh - var(--page-margin-y) * 2)
+    }
+    .page-404 .title-404 {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        font-size: 5rem;
+        font-style: italic;
+        filter: url(#x);
+        color: var(--secondary-text-color);
+        margin: 0;
+    }
+    .image-404 {
+        width: 10rem;
+        filter: url(#xs)
+    }
+
+    @media screen and (min-width: 768px) {
+        .page-404 {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 5rem;
+        }
+        .image-404 {
+            width: 15rem;
+        }
+    }
+    </style>
+    <article class="page-404">
+        <img src="/img/ghost-window.svg" class="image-404" />
+        <div class="markdown-body">
+            <h1 class="title-404">404</h1>
+            <p>Windows 和幽灵偷走了你的页面</p>
+            <p>可恶的微软和能量体生物！</p>
+            <p><a href="/">Mac 和骷髅为你祈祷</a></p>
+        </div>
+    </article>
+{{ end }}