add: better layout

app/public/app.js

@@ -224,3 +224,109 @@ globalThis.check_exists_input = (e) => {
         e.target.reportValidity();
     }, 1000);
 };
+
+// components
+function close_dropdowns() {
+    for (const dropdown of Array.from(
+        document.querySelectorAll(".inner.open"),
+    )) {
+        dropdown.classList.remove("open");
+    }
+}
+
+globalThis.open_dropdown = (event) => {
+    event.stopImmediatePropagation();
+    let target = event.target;
+
+    while (!target.matches(".dropdown")) {
+        target = target.parentElement;
+    }
+
+    // close all others
+    close_dropdowns();
+
+    // open
+    setTimeout(() => {
+        for (const dropdown of Array.from(target.querySelectorAll(".inner"))) {
+            // check y
+            const box = target.getBoundingClientRect();
+
+            let parent = dropdown.parentElement;
+
+            while (!parent.matches("html, .window")) {
+                parent = parent.parentElement;
+            }
+
+            let parent_height = parent.getBoundingClientRect().y;
+
+            if (parent.nodeName === "HTML") {
+                parent_height = window.screen.height;
+            }
+
+            const scroll = window.scrollY;
+            const height = parent_height;
+            const y = box.y + scroll;
+
+            if (y > height - scroll - 375) {
+                dropdown.classList.add("top");
+            } else {
+                dropdown.classList.remove("top");
+            }
+
+            // open
+            dropdown.classList.add("open");
+
+            if (dropdown.classList.contains("open")) {
+                dropdown.removeAttribute("aria-hidden");
+            } else {
+                dropdown.setAttribute("aria-hidden", "true");
+            }
+        }
+    }, 5);
+};
+
+globalThis.init_dropdowns = (bind_to) => {
+    for (const dropdown of Array.from(document.querySelectorAll(".inner"))) {
+        dropdown.setAttribute("aria-hidden", "true");
+    }
+
+    bind_to.addEventListener("click", (event) => {
+        if (
+            event.target.matches(".dropdown") ||
+            event.target.matches("[exclude=dropdown]")
+        ) {
+            return;
+        }
+
+        for (const dropdown of Array.from(
+            document.querySelectorAll(".inner.open"),
+        )) {
+            dropdown.classList.remove("open");
+        }
+    });
+};
+
+globalThis.METADATA_CSS_ENABLED = true;
+globalThis.toggle_metadata_css = (e) => {
+    e.target.classList.add("yellow");
+
+    METADATA_CSS_ENABLED = !METADATA_CSS_ENABLED;
+    if (!METADATA_CSS_ENABLED) {
+        media_theme_pref(); // user user theme
+        document.getElementById("metadata_css").remove(); // remove css
+
+        // reset colored text
+        for (const element of Array.from(
+            document.querySelectorAll(".color_block"),
+        )) {
+            element.removeAttribute("style");
+            element.classList.remove("color_block");
+        }
+
+        // strikethrough auto theme since it's disabled
+        document.getElementById("auto_theme").style.textDecoration =
+            "line-through";
+    } else {
+        window.location.reload();
+    }
+};

app/public/reference

@@ -0,0 +1 @@
+../../target/doc

app/public/style.css

@@ -12,7 +12,7 @@
     --color-shadow: rgba(0, 0, 0, 0.08);
     --color-red: hsl(0, 84%, 40%);
     --color-green: hsl(100, 84%, 20%);
-    --color-yellow: hsl(41, 63%, 75%);
+    --color-yellow: oklch(47% 0.157 37.304);
     --color-purple: hsl(284, 84%, 20%);
     --color-primary: oklch(67.3% 0.182 276.935);
 
@@ -24,6 +24,9 @@
     --pad-2: 0.35rem;
     --pad-3: 0.5rem;
     --pad-4: 1rem;
+
+    --radius: 0.2rem;
+    --nav-height: 36px;
 }
 
 * {
@@ -45,7 +48,7 @@
     --color-link: #93c5fd;
     --color-red: hsl(0, 94%, 82%);
     --color-green: hsl(100, 94%, 82%);
-    --color-yellow: hsl(41, 63%, 65%);
+    --color-yellow: oklch(90.1% 0.076 70.697);
     --color-purple: hsl(284, 94%, 82%);
 }
 
@@ -73,7 +76,7 @@ main {
 
 article {
     margin: var(--pad-2) 0;
-    height: calc(100dvh - var(--pad-4) * 2);
+    height: calc(100dvh - var(--pad-4) - var(--nav-height) * 2);
 }
 
 .tab {
@@ -89,6 +92,14 @@ article {
     animation: fadein ease-in-out 1 0.5s forwards running;
 }
 
+nav {
+    /* background: var(--color-raised); */
+    height: var(--nav-height);
+    /* position: sticky;
+    z-index: 2;
+    top: 2; */
+}
+
 @media screen and (max-width: 900px) {
     main,
     article,
@@ -117,7 +128,7 @@ article {
 }
 
 .content_container {
-    margin: var(--pad-2) auto;
+    margin: 0 auto var(--pad-2);
     width: 100%;
 }
 
@@ -167,7 +178,7 @@ video {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--gap-2);
+    gap: var(--pad-2);
     padding: var(--pad-2) calc(var(--pad-3) * 1.5);
     cursor: pointer;
     background: var(--color-raised);
@@ -187,7 +198,7 @@ video {
     --h: 28px;
 }
 
-.button:hover {
+.button:not(:has(.button:hover)):not(.camo):hover {
     background: var(--color-super-raised);
 }
 
@@ -196,10 +207,70 @@ video {
     color: inherit;
 }
 
-.bar .button.camo:hover {
+.bar .button:not(.simple).camo:hover {
     color: var(--color-link);
 }
 
+.button.simple {
+    --size: 18px;
+    font-weight: 600;
+    padding: var(--pad-2) !important;
+    border-radius: var(--radius);
+    width: var(--size);
+    height: var(--size);
+    aspect-ratio: 1 / 1;
+    font-size: 12px;
+}
+
+.button.surface {
+    background: var(--color-surface);
+}
+
+.button.surface.simple:is(.camo *) {
+    background: var(--color-super-raised);
+}
+
+/* dropdown */
+.dropdown {
+    position: relative;
+}
+
+.dropdown .inner {
+    display: none;
+    flex-direction: column;
+    box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
+        var(--color-shadow);
+    background: var(--color-raised);
+    color: inherit;
+    position: absolute;
+    z-index: 2;
+    top: 100%;
+}
+
+.dropdown .inner.open {
+    display: flex;
+}
+
+.dropdown .inner .button {
+    padding: var(--pad-3) var(--pad-4);
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.dropdown:has(.inner.open) .button:nth-child(1):not(.inner *) {
+    background: var(--color-raised);
+}
+
+.dropdown .inner.top {
+    top: unset;
+    bottom: 100%;
+}
+
+.dropdown .inner.left {
+    left: 0;
+    right: unset;
+}
+
 /* input */
 input {
     --h: 36px;
@@ -276,6 +347,7 @@ pre {
     padding: var(--pad-2) var(--pad-4);
     border-left: solid 5px var(--color-primary);
     background: var(--color-surface);
+    border-radius: var(--radius);
 }
 
 code {
@@ -297,8 +369,22 @@ code * {
     font-size: 0.8rem !important;
 }
 
+code:not(pre *) {
+    padding: var(--pad-1) var(--pad-2);
+    background: oklch(98% 0.016 73.684 / 25%);
+    color: oklch(90.1% 0.076 70.697);
+    border-radius: var(--radius);
+    white-space: break-spaces;
+}
+
+code:not(pre *):not(.dark *) {
+    background: oklch(83.7% 0.128 66.29 / 25%);
+    color: oklch(47% 0.157 37.304);
+}
+
 svg.icon {
     stroke: currentColor;
+    fill: currentColor;
     width: 18px;
     height: 1em;
 }
@@ -307,6 +393,10 @@ svg.icon.filled {
     fill: currentColor;
 }
 
+.no_fill svg.icon {
+    fill: transparent;
+}
+
 button svg {
     pointer-events: none;
 }
@@ -384,6 +474,10 @@ a {
     color: var(--color-link);
 }
 
+.color_block a {
+    color: inherit;
+}
+
 a.flush {
     color: inherit;
 }
@@ -477,12 +571,12 @@ blockquote {
 
 .cm-comment,
 .hljs-keyword {
-    color: rgb(153 27 27) !important;
+    color: oklch(47% 0.157 37.304) !important;
 }
 
 .cm-comment:is(.dark *),
 .hljs-keyword:is(.dark *) {
-    color: rgb(254, 202, 202) !important;
+    color: oklch(90.1% 0.076 70.697) !important;
 }
 
 .cm-link {