ALTER TABLE design (or something(

static/css/main.css

@@ -3,6 +3,10 @@
 :root {
     /* naturally */
     --liquidex-brand-blue: #058ef0;
+    /* but also: */
+    --liquidex-brand-red: #eb134a;
+    --liquidex-brand-yellow: #ffc31f;
+    --liquidex-brand-green: #06ca4a;
 
     --text-color-light: #55423e;
     --link-color-light: #004ec8;
@@ -107,7 +111,7 @@ kbd {
     --recursive-mono: 0.0;
     --recursive-casl: 1.0;
     --recursive-wght: 400;
-    --recursive-slnt: -2.0;
+    --recursive-slnt: 0.0;
     --recursive-crsv: 0.5;
 
     --recursive-simplified-f: "ss03";

static/css/page/index.css

@@ -0,0 +1,52 @@
+.index\:hobby-corners {
+    &>li {
+        margin: 8px 0px;
+
+        &>details {
+            border-top: 4px solid var(--section-color);
+        }
+
+        &>details>summary {
+            position: relative;
+            overflow: clip;
+            box-sizing: border-box;
+
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+
+            &>th-bb>.icon {
+                opacity: 100%;
+            }
+
+            & .background-icon {
+                position: absolute;
+                right: calc(var(--button-bar-icon-size) * 2);
+                bottom: 0;
+                color: var(--text-color);
+                opacity: 40%;
+
+                width: 96px;
+                height: auto;
+
+                pointer-events: none;
+            }
+        }
+    }
+
+}
+
+#index\:programming {
+    --section-color: var(--liquidex-brand-red);
+}
+
+#index\:design {
+    --section-color: var(--liquidex-brand-yellow);
+}
+
+#index\:music {
+    --section-color: var(--liquidex-brand-green);
+}
+
+#index\:games {
+    --section-color: var(--liquidex-brand-blue);
+}

static/css/tree.css

@@ -27,6 +27,7 @@
 :root {
     --tree-indent-width: 28px;
     --transition-duration: 0.15s;
+    --button-bar-icon-size: 24px;
 }
 
 /*** Breadcrumbs ***/
@@ -293,6 +294,10 @@ th-bb {
 
 /* For media without hover functionality, th-bb should always be visible. */
 @media (hover: none) {
+    :root {
+        --button-bar-icon-size: 32px;
+    }
+
     .tree th-bb {
         opacity: 100%;
 
@@ -326,8 +331,8 @@ th-bb .branch-date {
         background-position: 50% 50%;
         opacity: 35%;
 
-        width: 24px;
-        height: 24px;
+        width: var(--button-bar-icon-size);
+        height: var(--button-bar-icon-size);
     }
 
     & .icon-permalink {