less ugly docs

docs/static/headers.js

@@ -61,7 +61,6 @@ function groupHeadersInDiv(headerTag) {
 }
 
 function slugify(elements) {
-    console.log(elements);
     return elements
         .map((element, i) => {
             if (i === 0) return null;

docs/static/style.css

@@ -1,17 +1,32 @@
-*, ::before, *::after {
+:root {
+    --clr-text: #ebdbb2;
+    --clr-brand: #fabd2f;
+    --clr-bg-0: #282828;
+    --clr-bg-1: #1d2021;
+    color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
 }
 
-:root {
-    color-scheme: dark;
+*:focus-visible {
+    outline: 2px solid var(--clr-brand);
+}
+
+::selection {
+    background-color: var(--clr-text);
+    color: var(--clr-bg-0);
 }
 
 body {
     font-family: system-ui;
-    color: white;
-    background-color: #141414;
+    background-color: var(--clr-bg-0);
+    color: var(--clr-text);
     padding: 1rem;
-    max-width: 90%;
+    max-width: 1000px;
     margin: 0 auto;
 }
 
@@ -33,15 +48,11 @@ h4 {
 
 a {
     font-weight: bold;
-    color: white;
-}
-
-a:has(code) {
-    color: #d5c4a1;
+    color: inherit;
+    text-decoration-color: var(--clr-brand);
 }
 
 p code {
-    color: #d5c4a1;
     background-color: #1d2021;
     padding: 0.25rem 0.5rem;
     border-radius: 0.5rem;
@@ -54,7 +65,6 @@ pre code {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: black;
     isolation: isolate;
     position: relative;
     max-width: max-content;
@@ -64,10 +74,10 @@ h1, h2, h3, h4, h5, h6 {
         top: -0.25em;
         bottom: -0.25em;
         right: -1em;
-        left: -999rem;
+        left: -10rem;
         z-index: -1;
         border-radius: 0.5rem;
-        background-color: #ccc;
+        background: linear-gradient(to left, var(--clr-bg-1) 75%, transparent);
     }
 }