From 0e3b0881974e283202960609667dd04d9181639a Mon Sep 17 00:00:00 2001
From: Oliver Ni <oliver.ni@gmail.com>
Date: Mon, 6 Nov 2023 19:30:22 -0800
Subject: [PATCH] add 404 page

---
 static/input.css      | 29 +++++++++++++++++++++++++++++
 templates/404.html    | 43 +++++++++++++++++++++++++++++++++++++++++++
 templates/base.html   |  6 +++---
 templates/macros.html |  4 ++--
 4 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 templates/404.html

diff --git a/static/input.css b/static/input.css
index fa30217..fd73617 100644
--- a/static/input.css
+++ b/static/input.css
@@ -12,6 +12,15 @@
   }
 }
 
+.shadow-link {
+  @apply font-medium text-blue-500 transition-shadow;
+  box-shadow: inset 0 -0.3em theme("colors.blue.100");
+}
+
+.shadow-link:hover {
+  box-shadow: inset 0 -0.5em theme("colors.blue.200");
+}
+
 #banner {
   background-image:
     linear-gradient(rgba(0 0 0 / 75%), rgba(0 0 0 / 75%)),
@@ -19,3 +28,23 @@
   background-size: cover;
   background-position: center;
 }
+
+#text-404 {
+  @apply bg-gradient-to-br from-teal-400 to-emerald-300 bg-clip-text text-transparent;
+  font-size: 12rem;
+  font-weight: bold;
+  position: relative;
+  --text-shadow: 1px 1px theme("colors.emerald.500"), 2px 2px theme("colors.emerald.500"), 3px 3px theme("colors.emerald.500"), 4px 4px theme("colors.emerald.500"), 5px 5px theme("colors.emerald.500");
+}
+
+#text-404::after {
+  @apply inset-0;
+  @apply transition-all;
+  transition-duration: 25ms;
+  position: absolute;
+  content: "404";
+  z-index: -1;
+  font-size: 12rem;
+  font-weight: bold;
+  text-shadow: var(--text-shadow);
+}
diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..4b3bdc8
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex-1 flex flex-col items-center justify-center">
+  <p id="text-404">404</p>
+  <p class="text-gray-500 text-lg font-light">
+    Page Not Found.
+    <a href="/" class="shadow-link">Go home?</a>
+  </p>
+</div>
+
+<script type="module">
+  const text404 = document.getElementById("text-404");
+  const gradient = getComputedStyle(text404).backgroundImage;
+  const shadowColor = getComputedStyle(text404).getPropertyValue("--text-shadow").split(",")[0].replace("1px 1px", "").trim();
+
+  function normalizeOffset(xOffset, yOffset) {
+    const length = Math.sqrt(xOffset ** 2 + yOffset ** 2);
+    const effLength = Math.min(length / 200, 1)
+    return [xOffset / length * effLength, yOffset / length * effLength];
+  }
+
+
+  function layerShadow(xOffset, yOffset) {
+    // Repeat 10 times, with increasing offset and color
+    return [...Array(10).keys()].map((i) =>
+      `${xOffset * i}px ${yOffset * i}px ${shadowColor}`
+    ).join(", ");
+  }
+
+  document.addEventListener("mousemove", function (e) {
+    const box = text404.getBoundingClientRect();
+    const [xOffset, yOffset] = normalizeOffset(
+      (box.left + box.right) / 2 - e.clientX,
+      (box.top + box.bottom) / 2 - e.clientY
+    );
+    const shadow = layerShadow(xOffset, yOffset);
+    const angle = Math.atan2(yOffset, xOffset) - Math.PI * 1 / 2;
+    text404.style.backgroundImage = gradient.replace("to right bottom", `${angle}rad`);
+    text404.style.setProperty("--text-shadow", shadow);
+  }, false);
+</script>
+{% endblock %}
diff --git a/templates/base.html b/templates/base.html
index 6d5ed5c..54d6a81 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -41,7 +41,7 @@
   <meta property="og:type" content="website" />
   <meta property="og:site_name" content="Berkeley Math Tournament" />
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.min.css">
   <link rel="preconnect" href="https://rsms.me/">
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
@@ -67,7 +67,7 @@
 </head>
 
 <body>
-  <div class="max-w-4xl p-4 md:p-8 mx-auto flex flex-col gap-4 md:gap-8">
+  <div class="max-w-4xl min-h-screen p-4 md:p-8 mx-auto flex flex-col gap-4 md:gap-8">
     {% block header %}
     <header class="flex flex-col gap-4 text-center">
       <a class="mx-auto" href="/"><img src="/assets/logo.png" alt="BMT Logo" width="80"></a>
@@ -88,7 +88,7 @@
 
     <hr>
 
-    <div class="flex flex-col gap-4 md:gap-8">
+    <div class="flex-1 flex flex-col gap-4 md:gap-8">
       {% block content %}{% endblock %}
     </div>
 
diff --git a/templates/macros.html b/templates/macros.html
index 92c4c6f..24f97d6 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -3,12 +3,12 @@
 
 {# Desktop version #}
 <p class="hidden md:block first:hidden text-gray-400">⁄</p>
-<a href="{{ href }}" class="hidden md:block {% if current_url == href %} font-semibold {% endif %}">
+<a href="{{ href }}" class="hidden md:block {% if current_url | default(value='') == href %} font-semibold {% endif %}">
   {{ label }}
 </a>
 
 {# Mobile version #}
-{% if current_url == href %}
+{% if current_url | default(value="") == href %}
 <button class="md:hidden order-1 font-semibold border py-2 px-3 rounded-xl relative" onclick="thing()">
   {{ label }}
   <i class="bi bi-chevron-down [.open_&]:-scale-y-100 transition-transform absolute right-4"></i>