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/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;
+}