Proper 410/404 pages

2026-02-16 01:18:38 -03:00
parent f91531b5fa
commit c963e34766
8 changed files with 284 additions and 4 deletions
--- a/static/404.html
+++ b/static/404.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>404 Not Found — mifi Ventures</title>
+    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="stylesheet" href="/assets/error-pages.css">
+</head>
+<body class="error-page">
+    <main>
+        <div class="emoji" aria-hidden="true">🔍</div>
+        <h1>404 Not Found</h1>
+        <p>This page went off to find itself. We’re not sure it’s coming back.</p>
+        <p><a href="/">Back to mifi Ventures →</a></p>
+    </main>
+</body>
+</html>
--- a/static/410.html
+++ b/static/410.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>410 Gone — mifi Ventures</title>
+    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="stylesheet" href="/assets/error-pages.css">
+</head>
+<body class="error-page">
+    <main>
+        <div class="emoji" aria-hidden="true">👋</div>
+        <h1>410 Gone</h1>
+        <p>This page has left the building. We’ve moved on—and so should you.</p>
+        <p><a href="/">Back to mifi Ventures →</a></p>
+    </main>
+</body>
+</html>
--- a/static/assets/error-pages.css
+++ b/static/assets/error-pages.css
@@ -0,0 +1,102 @@
+/**
+ * Shared styles for static error pages (404, 410).
+ * Uses same theme tokens and local fonts as the main site.
+ * Linked from 404.html and 410.html; Critters inlines critical CSS at build time.
+ */
+
+/* Theme: light (default) — matches src/app.css :root */
+:root {
+    color-scheme: light dark;
+    --ep-bg: #ffffff;
+    --ep-bg-alt: #faf9ff;
+    --ep-text: #14121a;
+    --ep-text-secondary: #3f3a4a;
+    --ep-primary: #6d28d9;
+    --ep-primary-hover: #5b21b6;
+    --ep-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    --ep-font-heading: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
+    --ep-size-base: 18px;
+    --ep-line-height: 1.75;
+}
+
+/* Theme: dark — matches src/app.css @media (prefers-color-scheme: dark) */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ep-bg: #0b0b12;
+        --ep-bg-alt: #121226;
+        --ep-text: #f3f2ff;
+        --ep-text-secondary: #c9c6e4;
+        --ep-primary: #a78bfa;
+        --ep-primary-hover: #c4b5fd;
+    }
+}
+
+/* Local fonts — same paths as +layout.svelte preloads */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
+}
+@font-face {
+    font-family: 'Fraunces';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
+}
+
+/* Error page layout */
+.error-page {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--ep-font);
+    font-size: var(--ep-size-base);
+    line-height: var(--ep-line-height);
+    color: var(--ep-text);
+    background-color: var(--ep-bg-alt);
+}
+.error-page main {
+    text-align: center;
+    padding: 2rem 1.5rem;
+    max-width: 28rem;
+}
+.error-page .emoji {
+    font-size: 4rem;
+    margin-bottom: 0.5rem;
+}
+.error-page h1 {
+    font-family: var(--ep-font-heading);
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0 0 0.75rem;
+    color: var(--ep-text);
+}
+.error-page p {
+    margin: 0 0 1.5rem;
+    color: var(--ep-text-secondary);
+}
+.error-page a {
+    color: var(--ep-primary);
+    font-weight: 500;
+    text-decoration: none;
+}
+.error-page a:hover {
+    color: var(--ep-primary-hover);
+    text-decoration: underline;
+}
+.error-page a:focus-visible {
+    outline: 2px solid var(--ep-primary);
+    outline-offset: 2px;
+}