Skip to content

Commit

Permalink
add 404 page
Browse files Browse the repository at this point in the history
  • Loading branch information
oliver-ni committed Nov 7, 2023
1 parent 2eeeacd commit 0e3b088
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 5 deletions.
29 changes: 29 additions & 0 deletions static/input.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,39 @@
}
}

.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%)),
url(/assets/banner.jpg);
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);
}
43 changes: 43 additions & 0 deletions templates/404.html
Original file line number Diff line number Diff line change
@@ -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 %}
6 changes: 3 additions & 3 deletions templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/katex.min.css">
Expand All @@ -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>
Expand All @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions templates/macros.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 0e3b088

Please sign in to comment.