redesign

Author: user-lezi

docs/404.html

@@ -6,84 +6,61 @@
   <link rel="icon" type="image/png" href="https://avatars.githubusercontent.com/u/257225591?v=4" />
   <title>404 — ForgeExtensions</title>
   <meta name="robots" content="noindex" />
-  <meta name="color-scheme" content="dark" />
-  <meta name="theme-color" content="#0d0d0d" />
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="style.css" />
 
   <style>
     body { display: flex; flex-direction: column; min-height: 100vh; }
 
     .center {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      padding: 40px 24px;
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      text-align: center; padding: 40px 24px;
     }
 
-    .code {
-      font-size: 72px;
-      font-weight: 600;
-      color: var(--surface);
+    .code-big {
+      font-family: 'IBM Plex Mono', monospace;
+      font-size: clamp(72px, 15vw, 120px);
+      font-weight: 400; line-height: 1;
+      color: transparent;
+      -webkit-text-stroke: 1.5px var(--border2);
+      margin-bottom: 24px;
       letter-spacing: -0.04em;
-      line-height: 1;
-      margin-bottom: 20px;
-      /* stack real text on top with the grid showing through */
-      position: relative;
+      animation: fadeUp 0.4s ease both;
     }
-    /* outlined version behind */
-    .code::before {
-      content: '404';
-      position: absolute;
-      inset: 0;
-      -webkit-text-stroke: 1px var(--border);
-      color: transparent;
+
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to   { opacity: 1; transform: none; }
     }
 
     h1 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--white);
-      margin-bottom: 6px;
+      font-size: 18px; font-weight: 600;
+      color: var(--white); margin-bottom: 8px;
+      animation: fadeUp 0.4s 0.1s ease both;
     }
 
     .sub {
-      font-size: 13px;
-      color: var(--muted);
-      margin-bottom: 28px;
-      max-width: 300px;
-      line-height: 1.6;
+      font-size: 13px; color: var(--muted);
+      margin-bottom: 32px; max-width: 280px; line-height: 1.65;
+      animation: fadeUp 0.4s 0.18s ease both;
     }
 
     .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    footer {
-      text-align: center;
-      padding: 20px 24px;
-      font-size: 12px;
-      color: var(--muted);
+      display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
+      animation: fadeUp 0.4s 0.25s ease both;
     }
-    footer a { color: var(--dim); transition: color 0.15s; }
-    footer a:hover { color: var(--text); }
   </style>
 </head>
 <body>
 
 <div class="center">
-  <div class="code">404</div>
+  <div class="code-big">404</div>
   <h1>Page not found</h1>
-  <p class="sub">The page you're looking for doesn't exist or may have been moved.</p>
+  <p class="sub">The page you're looking for doesn't exist or may have moved.</p>
   <div class="actions">
     <a href="index.html" class="btn btn-primary">
       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
@@ -94,8 +71,13 @@ <h1>Page not found</h1>
 </div>
 
 <footer>
-  <a href="https://github.com/ForjSkript">ForjSkript</a> · <a href="https://github.com/ForjSkript/ForgeExtensions">ForgeExtensions</a>
+  <a href="https://github.com/ForjSkript">ForjSkript</a> &nbsp;·&nbsp;
+  <a href="https://github.com/ForjSkript/ForgeExtensions">ForgeExtensions</a>
 </footer>
 
+<script>
+  const t = localStorage.getItem('forge-theme') || 'dark';
+  document.documentElement.setAttribute('data-theme', t);
+</script>
 </body>
-</html>
+</html>