website: redesign part 3

website/styles/fonts.css

@@ -42,7 +42,9 @@ html {
   font-family: var(--font-mono);
 }
 
-h1 {
+h1,
+h2,
+h3 {
   font-family: var(--font-serif);
 }
 

website/styles/main.css

@@ -0,0 +1,38 @@
+[hidden] {
+  display: none !important;
+}
+
+html,
+body {
+  background: var(--black);
+}
+
+body {
+  > main {
+    position: fixed;
+    inset: 0;
+    overflow: auto;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 180ms ease;
+  }
+
+  > main[data-active] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body > main {
+    transition: none;
+  }
+
+  html {
+    scroll-behavior: auto;
+  }
+}

website/styles/variables.css

@@ -49,8 +49,3 @@
   --font-weight-base: 400;
   --max-main-width: 70dvw;
 }
-
-html,
-body {
-  background: var(--black);
-}