From 9c2a704c295337c19d5edad5b7d3712faff8dfbb Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Sat, 16 May 2026 00:41:14 +0200 Subject: [PATCH] docs: add animated 404 page --- docs/404.html | 91 +++++++++++++++++++++++++++++++++++++++++++++++++ docs/styles.css | 59 +++++++++++++++++++++++++++++++- 2 files changed, 149 insertions(+), 1 deletion(-) create mode 100644 docs/404.html diff --git a/docs/404.html b/docs/404.html new file mode 100644 index 0000000..9e88332 --- /dev/null +++ b/docs/404.html @@ -0,0 +1,91 @@ + + + + + + Page not found — Pi Web + + + + + + + + + + + + +
+ +
+ +
+
+
+

404 · hallucinated route

+

+ + +

+

The route was hallucinated, deleted, or never shipped.

+
+ Back to Pi Web +
+
+
+
+ + + + + diff --git a/docs/styles.css b/docs/styles.css index c8154ad..0a3a1f2 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -52,7 +52,12 @@ body::after { .home-page .hero-actions, .home-page .hero-stats, .home-page .terminal, -.home-page main > section:not(.hero) { +.home-page main > section:not(.hero), +.error-page .site-header, +.error-page .site-footer, +.error-page .error-code, +.error-page .error-copy, +.error-page .error-actions { opacity: 0; animation: page-reveal 700ms ease-out 2.45s forwards; } @@ -118,6 +123,11 @@ body::after { .home-page .hero-stats, .home-page .terminal, .home-page main > section:not(.hero), + .error-page .site-header, + .error-page .site-footer, + .error-page .error-code, + .error-page .error-copy, + .error-page .error-actions, .intro-word { opacity: 1; transform: none; @@ -611,6 +621,53 @@ code .comment, padding: 76px 0 26px; } +.error-page main { + display: grid; + align-items: center; + min-height: calc(100vh - 175px); +} + +.error-hero { + overflow: hidden; + padding: clamp(64px, 10vw, 122px) 0; +} + +.error-code { + display: inline-flex; + align-items: center; + gap: 10px; + margin: 0 0 22px; + padding: 8px 12px; + border: 1px solid var(--line); + background: var(--panel); + color: var(--muted); + font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; + font-size: 0.86rem; +} + +.error-title { + max-width: 980px; +} + +.error-title-line { + display: block; +} + +.error-copy { + max-width: 680px; + margin: 28px 0 0; + color: var(--muted); + font-size: clamp(1.12rem, 2vw, 1.36rem); + line-height: 1.62; +} + +.error-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 30px; +} + .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr);