[404] adding kirby 404 doodad for now, moving off skypack

nathanlong · Aug 31, 2023 · bef4afc · bef4afc
1 parent e68e44e
commit bef4afc
Show file tree

Hide file tree

Showing 4 changed files with 376 additions and 7 deletions.
diff --git a/content/404.njk b/content/404.njk
@@ -4,11 +4,18 @@ permalink: 404.html
 eleventyExcludeFromCollections: true
 ---
 
-<section class="mt-content">
-  <h1 class="m-0">Content Not Found</h1>
+<section class="mt-content text-center">
+  <div class="flex items-center justify-center relative" data-module="animation404">
+    <span class="animation404-first heading-massive font-bold lh-1">4</span>
+    <canvas class="zdog-canvas"></canvas>
+    <span class="animation404-last heading-massive font-bold lh-1">4</span>
+  </div>
+  <h2 class="mt-n2">Can't find that page.<br/>(Or maybe it got eaten...)</h2>
+  <p class="mt-2">Take it <a href="{{ '/' | url }}">from the top</a>.</p>
 </section>
 
-<p>Go <a href="{{ '/' | url }}">home</a>.</p>
+
+<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
 
 {#
 Read more: https://www.11ty.dev/docs/quicktips/not-found/

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1,3 +1,6 @@
+[warn] --jsx-bracket-same-line is deprecated.
+[warn] Ignored unknown option --loglevel=error. Did you mean --log-level?
+[warn] Ignored unknown option --stdin.
 /* CSS GOALS:
  * - No build step, vanilla can be tasty too!
  * - Fluid layout and type
@@ -351,6 +354,10 @@ h6 {
   margin-top: 0;
 }
 
+.heading-massive {
+  font-size: 20vw;
+}
+
 h1,
 .heading-100 {
   font-size: 3em;
@@ -505,7 +512,9 @@ button {
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
-  transition: background-color 300ms ease-in-out, color 300ms ease-in-out,
+  transition:
+    background-color 300ms ease-in-out,
+    color 300ms ease-in-out,
     border-color 300ms ease-in-out;
 }
 
@@ -738,7 +747,9 @@ button {
   width: 1.5em;
   height: 2px;
   background-color: var(--theme-text);
-  transition: transform 300ms var(--ease-elastic), opacity 300ms ease-out;
+  transition:
+    transform 300ms var(--ease-elastic),
+    opacity 300ms ease-out;
 }
 
 .nav-toggle-line-top {
@@ -952,7 +963,9 @@ button {
   border-radius: 0.5em;
   padding: 0.5em 0.75em;
   font-weight: bold;
-  transition: color 250ms ease-in-out, background-color 250ms ease-in-out,
+  transition:
+    color 250ms ease-in-out,
+    background-color 250ms ease-in-out,
     border-color 250ms ease-in-out;
 }
 
@@ -1626,6 +1639,10 @@ a.color-reduced {
   margin-bottom: 4em;
 }
 
+.mt-n2 {
+  margin-top: -2em;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -1890,3 +1907,35 @@ canvas {
   width: 100%;
   height: 100%;
 }
+
+/* 404 Animation */
+
+.zdog-canvas {
+  position: static;
+  width: 60vw;
+  height: auto;
+  aspect-ratio: 1/1;
+  transform: translateY(-15%);
+}
+
+.animation404-first {
+  margin-right: -15vw;
+}
+
+.animation404-last {
+  margin-left: -15vw;
+}
+
+@media all and (min-width: 768px) {
+  .zdog-canvas {
+    width: 35vw;
+  }
+
+  .animation404-first {
+    margin-right: -8vw;
+  }
+
+  .animation404-last {
+    margin-left: -8vw;
+  }
+}