121 lines
2.6 KiB
Plaintext
121 lines
2.6 KiB
Plaintext
---
|
|
import Base from "../layouts/Base.astro";
|
|
|
|
const path = Astro.url.pathname;
|
|
const file = `zach${path}.md`;
|
|
const routes = ["projects", "notes", "contact"];
|
|
---
|
|
|
|
<Base title="404 — not found" description="that page doesn't exist.">
|
|
<section class="fof" aria-labelledby="fof-heading">
|
|
<h1 id="fof-heading" class="sr-only">404 — page not found</h1>
|
|
|
|
<p class="fof__cmd">
|
|
<span class="fof__sig">$</span> cat {file}<span
|
|
class="fof__caret"
|
|
aria-hidden="true"></span>
|
|
</p>
|
|
<p class="fof__err">cat: {file}: No such file or directory</p>
|
|
|
|
<p class="fof__cmd fof__cmd--2"><span class="fof__sig">$</span> ls zach/</p>
|
|
<nav class="fof__ls" aria-label="pages">
|
|
<a href="/">~/</a>
|
|
{routes.map((r) => <a href={`/${r}`}>{r}/</a>)}
|
|
</nav>
|
|
</section>
|
|
</Base>
|
|
|
|
<script>
|
|
const fof = document.querySelector<HTMLElement>(".fof");
|
|
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
if (fof && !reduce.matches) {
|
|
fof.classList.add("fof--running");
|
|
window.setTimeout(() => fof.classList.remove("fof--running"), 550);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.fof {
|
|
min-height: 44vh;
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.fof__cmd {
|
|
margin: 0;
|
|
font-family: var(--mono);
|
|
font-size: clamp(1.05rem, 4.4vw, 1.55rem);
|
|
line-height: 1.4;
|
|
color: var(--ink);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.fof__sig {
|
|
color: var(--accent);
|
|
margin-right: 0.7ch;
|
|
}
|
|
.fof__caret {
|
|
display: inline-block;
|
|
width: 0.5ch;
|
|
height: 1.05em;
|
|
margin-left: 0.12ch;
|
|
vertical-align: -0.16em;
|
|
background: var(--faint);
|
|
animation: fof-blink 1.1s steps(1) infinite;
|
|
}
|
|
@keyframes fof-blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fof__err {
|
|
margin: 0.6rem 0 0;
|
|
font-family: var(--mono);
|
|
font-size: clamp(0.82rem, 3vw, 1.05rem);
|
|
line-height: 1.5;
|
|
color: var(--faint);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.fof__cmd--2 {
|
|
margin-top: 1.7rem;
|
|
}
|
|
.fof__ls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem 1.7rem;
|
|
margin: 0.55rem 0 0;
|
|
font-family: var(--mono);
|
|
font-size: clamp(0.85rem, 3vw, 1.05rem);
|
|
}
|
|
.fof__ls a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
transition: color 0.16s ease;
|
|
}
|
|
.fof__ls a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.fof__err,
|
|
.fof__cmd--2,
|
|
.fof__ls {
|
|
transition:
|
|
opacity 0.25s ease,
|
|
transform 0.3s ease;
|
|
}
|
|
.fof--running .fof__err,
|
|
.fof--running .fof__cmd--2,
|
|
.fof--running .fof__ls {
|
|
opacity: 0;
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fof__caret {
|
|
animation: none;
|
|
}
|
|
}
|
|
</style>
|