ALTER TABLE design (or something(

content/about-treehouse.tree

@@ -363,7 +363,7 @@
                             - not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn't ideal.
 
             % id = "01H8V55APD2BPGQXEK7JARYJ9H"
-            - in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).
+            - ~~in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).~~
 
                 % id = "01H8V55APDXZJE3HHH5AQ8ZQHF"
                 + that little bit of slant makes it look just a little more like handwriting.
@@ -382,3 +382,5 @@
 
                         % id = "01H8V55APDB8PC2BF5P9TVYJ35"
                         - not to mention I'd have to handwrite a lot of text, and *then* either use OCR or type it all out again for accessibility. yeah, no thanks methinks.
+
+                - UPDATE: not slanted anymore. `slnt` is 0.

content/index.tree

@@ -1,4 +1,5 @@
 %% title = "liquidex's treehouse"
+   styles = ["page/index.css"]
 
 % id = "treehouse"
 - # liquidex's treehouse
@@ -23,23 +24,57 @@
         + ## about this
 
     % id = "01H8V556P1GRAA3717VH3QJFMV"
+      classes.branch_children = "index:hobby-corners"
     - hobby corners
 
         % id = "programming"
           content.link = "programming"
         + ## programming
+        <svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M8.58579 11L5.29289 7.70711L6.70711 6.29289L11.4142 11L6.70711 15.7071L5.29289 14.2929L8.58579 11Z"
+                fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 18H12V16H18V18Z" fill="currentColor" />
+        </svg>
 
         % id = "design"
           content.link = "design"
         + ## design
+        <svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 18V16H20V18H22V20H20V22H18V20H16V18H18Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H8V6H6V8H4V4Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6H16V4H20V8H18V6Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 16H6V18H8V20H4V16Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 6L10 6V4L14 4V6Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 14V10H6V14H4Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 20H10V18H14V20Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 14V10H20V14H18Z" fill="currentColor" />
+        </svg>
+
 
         % id = "music"
           content.link = "music"
         + ## music
+        <svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M9 7L18 5V5.5V8.20002V15.5C18 16.6046 16.8807 17.5 15.5 17.5C14.1193 17.5 13 16.6046 13 15.5C13 14.3954 14.1193 13.5 15.5 13.5C15.6712 13.5 15.8384 13.5138 16 13.54V8.64446L11 9.75558V17.5C11 18.6046 9.88071 19.5 8.5 19.5C7.11929 19.5 6 18.6046 6 17.5C6 16.3954 7.11929 15.5 8.5 15.5C8.67123 15.5 8.83844 15.5138 9 15.54V10.2V7.5V7Z"
+                fill="currentColor" />
+        </svg>
 
         % id = "games"
           content.link = "games"
         + ## games
+        <svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M4.76469 9.3788C4.11751 11.8531 3.95139 14.9468 3.93837 17.1997C3.93607 17.5979 4.26468 18 4.81836 18H5.55848L5.87471 17.0513C6.28305 15.8263 7.42947 15 8.72076 15H15.2792C16.5705 15 17.717 15.8263 18.1253 17.0513L18.4415 18H19.1816C19.7353 18 20.0639 17.5978 20.0616 17.1997C20.0486 14.9468 19.8825 11.8531 19.2353 9.3788C18.9094 8.13264 18.5025 7.21029 18.0604 6.63842C17.6618 6.12281 17.335 6 17 6H15.8901C15.7929 6.10179 15.6861 6.20981 15.5815 6.30722C15.5085 6.37519 15.3966 6.47582 15.2656 6.57159C15.2019 6.61812 15.0904 6.69566 14.9457 6.76963C14.8536 6.81671 14.4947 7 14 7H10C9.5053 7 9.14639 6.81671 9.05429 6.76963C8.90956 6.69566 8.79809 6.61812 8.73445 6.57159C8.60345 6.47582 8.49146 6.37519 8.4185 6.30722C8.31391 6.20981 8.20711 6.10179 8.10995 6H7C6.66496 6 6.33822 6.12281 5.93959 6.63842C5.49747 7.21029 5.09064 8.13264 4.76469 9.3788ZM15 4H17C21.3983 4 22.0351 12.5978 22.0616 17.1882C22.0708 18.7723 20.7658 20 19.1816 20H17L16.2279 17.6838C16.0918 17.2754 15.7097 17 15.2792 17H8.72076C8.29033 17 7.90819 17.2754 7.77208 17.6838L7 20H4.81836C3.23417 20 1.92925 18.7723 1.9384 17.1882C1.96494 12.5978 2.6017 4 7 4H9C9 4 9.85285 5 10 5H14C14.1472 5 15 4 15 4Z"
+                fill="currentColor" />
+            <circle cx="16" cy="9" r="1" fill="currentColor" />
+            <circle cx="14" cy="11" r="1" fill="currentColor" />
+            <circle cx="16" cy="13" r="1" fill="currentColor" />
+            <circle cx="18" cy="11" r="1" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8.5H7V10H5.5V12H7V13.5H9V12H10.5V10H9V8.5Z"
+                fill="currentColor" />
+        </svg>
 
     % id = "01HFYZKREWE2AM61ZRW3R501H6"
     - various thoughts

content/programming/blog/tairu.tree

@@ -3,7 +3,7 @@ scripts = [
     "components/literate-programming.js",
     "vendor/codejar.js",
 ]
-styles = ["post/tairu.css"]
+styles = ["page/tairu.css"]
 
 % id = "01HPD4XQPWM8ECT2QM6AT9YRWB"
 - I remember since my early days doing programming, I've been interested in how games like Terraria handle automatically tiling their terrain.

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;
+        width: var(--button-bar-icon-size);
-        height: 24px;
+        height: var(--button-bar-icon-size);
     }
 
     & .icon-permalink {

static/svg/object/design.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 18V16H20V18H22V20H20V22H18V20H16V18H18Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H8V6H6V8H4V4Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6H16V4H20V8H18V6Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 16H6V18H8V20H4V16Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 6L10 6V4L14 4V6Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 14V10H6V14H4Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 20H10V18H14V20Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 14V10H20V14H18Z" fill="currentColor" />
+</svg>

static/svg/object/games.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M4.76469 9.3788C4.11751 11.8531 3.95139 14.9468 3.93837 17.1997C3.93607 17.5979 4.26468 18 4.81836 18H5.55848L5.87471 17.0513C6.28305 15.8263 7.42947 15 8.72076 15H15.2792C16.5705 15 17.717 15.8263 18.1253 17.0513L18.4415 18H19.1816C19.7353 18 20.0639 17.5978 20.0616 17.1997C20.0486 14.9468 19.8825 11.8531 19.2353 9.3788C18.9094 8.13264 18.5025 7.21029 18.0604 6.63842C17.6618 6.12281 17.335 6 17 6H15.8901C15.7929 6.10179 15.6861 6.20981 15.5815 6.30722C15.5085 6.37519 15.3966 6.47582 15.2656 6.57159C15.2019 6.61812 15.0904 6.69566 14.9457 6.76963C14.8536 6.81671 14.4947 7 14 7H10C9.5053 7 9.14639 6.81671 9.05429 6.76963C8.90956 6.69566 8.79809 6.61812 8.73445 6.57159C8.60345 6.47582 8.49146 6.37519 8.4185 6.30722C8.31391 6.20981 8.20711 6.10179 8.10995 6H7C6.66496 6 6.33822 6.12281 5.93959 6.63842C5.49747 7.21029 5.09064 8.13264 4.76469 9.3788ZM15 4H17C21.3983 4 22.0351 12.5978 22.0616 17.1882C22.0708 18.7723 20.7658 20 19.1816 20H17L16.2279 17.6838C16.0918 17.2754 15.7097 17 15.2792 17H8.72076C8.29033 17 7.90819 17.2754 7.77208 17.6838L7 20H4.81836C3.23417 20 1.92925 18.7723 1.9384 17.1882C1.96494 12.5978 2.6017 4 7 4H9C9 4 9.85285 5 10 5H14C14.1472 5 15 4 15 4Z"
+        fill="currentColor" />
+    <circle cx="16" cy="9" r="1" fill="currentColor" />
+    <circle cx="14" cy="11" r="1" fill="currentColor" />
+    <circle cx="16" cy="13" r="1" fill="currentColor" />
+    <circle cx="18" cy="11" r="1" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8.5H7V10H5.5V12H7V13.5H9V12H10.5V10H9V8.5Z"
+        fill="currentColor" />
+</svg>

static/svg/object/music.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M9 7L18 5V5.5V8.20002V15.5C18 16.6046 16.8807 17.5 15.5 17.5C14.1193 17.5 13 16.6046 13 15.5C13 14.3954 14.1193 13.5 15.5 13.5C15.6712 13.5 15.8384 13.5138 16 13.54V8.64446L11 9.75558V17.5C11 18.6046 9.88071 19.5 8.5 19.5C7.11929 19.5 6 18.6046 6 17.5C6 16.3954 7.11929 15.5 8.5 15.5C8.67123 15.5 8.83844 15.5138 9 15.54V10.2V7.5V7Z"
+        fill="currentColor" />
+</svg>

static/svg/object/programming.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.58579 11L5.29289 7.70711L6.70711 6.29289L11.4142 11L6.70711 15.7071L5.29289 14.2929L8.58579 11Z"
+        fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 18H12V16H18V18Z" fill="currentColor" />
+</svg>

template/components/_footer.hbs

@@ -6,7 +6,7 @@
                     <rect width="32" height="32" fill="black" />
 
                     <clipPath id="treehouse">
-                        <path fill-rule="evenodd" clip-rule="evenodd" fill="white" transform="translate(0 12)"
+                        <path fill-rule="evenodd" clip-rule="evenodd" fill="white" transform="translate(0.5 12)"
                             d="M2.95266 3.95816C2.74074 1.83892 4.40494 0 6.53475 0C8.68036 0 10.3496 1.86501 10.1127 3.9975L10.0568 4.5L10.352 4.37352C11.7717 3.76506 13.316 4.92718 13.1244 6.45988L13.0568 7C14.1537 6.56127 15.3084 7.4907 15.1142 8.65595L15.0449 9.07153C14.7633 10.7614 13.3012 12 11.588 12H4.05892C2.0541 12 0.358966 10.5159 0.0940032 8.52866L0.0241185 8.00452C-0.210422 6.24546 1.30006 4.74903 3.05685 5L2.95266 3.95816ZM4.55685 7H2.55685V8H4.55685V7ZM4.55685 9H2.55685V10H4.55685V9ZM5.55685 7H7.55685V8H5.55685V7ZM7.55685 9H5.55685V10H7.55685V9ZM5.55685 13H7.55685L8.05685 16L9.55685 13H10.5569L9.49201 16.5495C9.21835 17.4617 9.39407 18.4496 9.96549 19.2115L10.5569 20H7.55685V18H6.55685V20H4.55685L5.35542 18.9352C5.80652 18.3338 6.01534 17.5848 5.94053 16.8367L5.55685 13Z" />
                     </clipPath>