add: better layout

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 {