website: redesign part 5

2026-06-08 14:11:56 -07:00 · 2026-06-03 16:50:52 +02:00
parent 1bcf3235b6
commit 98bbfec525
3 changed files with 35 additions and 2 deletions
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-loading>
  <head>
    <meta charset="utf-8" />
    <title>bitview</title>
@@ -14,6 +14,33 @@
    />
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="mobile-web-app-capable" content="yes" />
+    <style>
+      html,
+      body {
+        background: var(--black);
+      }
+
+      body::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        z-index: 100;
+        background: var(--black);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 150ms ease;
+      }
+
+      html[data-loading] body::before {
+        opacity: 1;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        body::before {
+          transition: none;
+        }
+      }
+    </style>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="shortcut icon" href="/favicon.ico" />
@@ -103,3 +103,9 @@ document.addEventListener("click", (event) => {
 window.addEventListener("popstate", renderPage);

 renderPage();
+
+requestAnimationFrame(() => {
+  setTimeout(() => {
+    delete document.documentElement.dataset.loading;
+  }, 150);
+});
@@ -16,7 +16,7 @@ body {
    opacity: 0;
    pointer-events: none;
    scroll-behavior: smooth;
-    transition: opacity 180ms ease;
+    transition: opacity 150ms ease;
  }

  > main[data-active] {