switch the layout to a wider one that leans slightly to the left of the page

this is to make space on the right for a nice background in the future

content/index.tree

@@ -1,50 +1,35 @@
 %% title = "liquidex's treehouse"
    styles = ["page/index.css"]
 
-% id = "treehouse"
+% id = "01H8V556P1PND8DQ73XBTZZJH7"
-- # liquidex's treehouse
+- welcome! make yourself at home. = --w-- =
 
-::: oops-you-seem-to-have-gotten-stuck
+% id = "01H8VWEHX501SNYQTE61WX7YJC"
-*achievement unlocked:* _I don't want anything to do with this bullshit_\
+- :folder: [_"owo, what's this?"_][page:kuroneko]{.secret}
-...either that, or you folded the entire tree by accident.\
-feel free to go back at any time by clicking here.
-:::
 
-    % id = "01H8V556P1PND8DQ73XBTZZJH7"
+    % id = "about"
-    - welcome! make yourself at home. = --w-- =
+      content.link = "about"
+    + ## about me
 
-    % id = "01H8VWEHX501SNYQTE61WX7YJC"
+    % id = "about-treehouse"
-    - :folder: [_"owo, what's this?"_][page:kuroneko]{.secret}
+      content.link = "about-treehouse"
+    + ## about this
 
-        % id = "about"
+% id = "01H8V556P1GRAA3717VH3QJFMV"
-          content.link = "about"
+  classes.branch_children = "index:hobby-corners"
-        + ## about me
+- :folder: hobby corners
 
-        % id = "about-treehouse"
+``` =html
-          content.link = "about-treehouse"
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
-        + ## about this
+    <defs>
-
+        <g id="index:icon:programming">
-    % id = "01H8V556P1GRAA3717VH3QJFMV"
-      classes.branch_children = "index:hobby-corners"
-    - :folder: hobby corners
-
-        % id = "programming"
-          content.link = "programming"
-        + ## programming
-        ``` =html
-        <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>
+        </g>
-        ```
 
-        % id = "design"
+        <g id="index:icon:design">
-          content.link = "design"
-        + ## design
-        ``` =html
-        <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" />
@@ -53,25 +38,15 @@ feel free to go back at any time by clicking here.
             <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>
+        </g>
-        ```
 
-        % id = "music"
+        <g id="index:icon:music">
-          content.link = "music"
-        + ## music
-        ``` =html
-        <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>
+        </g>
-        ```
 
-        % id = "games"
+        <g id="index:icon:games">
-          content.link = "games"
-        + ## games
-        ``` =html
-        <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" />
@@ -81,16 +56,34 @@ feel free to go back at any time by clicking here.
             <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>
+        </g>
-        ```
+    </defs>
+</svg>
+```
 
-    % id = "01HFYZKREWE2AM61ZRW3R501H6"
+    % id = "programming"
-    - :folder: /var
+      content.link = "programming"
+    + ## `<svg class="hobby-icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#index:icon:programming"></use></svg>`{=html}programming
 
-        % id = "short-thoughts"
+    % id = "design"
-          content.link = "short-thoughts"
+      content.link = "design"
-        + ## [sh](https://www.youtube.com/watch?v=rFL2VOdb944){.secret}ort thoughts
+    + ## `<svg class="hobby-icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#index:icon:design"></use></svg>`{=html}design
 
-        % id = "philosophy"
+    % id = "music"
-          content.link = "philosophy"
+      content.link = "music"
-        + ## philosophy and worldview
+    + ## `<svg class="hobby-icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#index:icon:music"></use></svg>`{=html}music
+
+    % id = "games"
+      content.link = "games"
+    + ## `<svg class="hobby-icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#index:icon:games"></use></svg>`{=html}games
+
+% id = "01HFYZKREWE2AM61ZRW3R501H6"
+- :folder: /var
+
+    % id = "short-thoughts"
+      content.link = "short-thoughts"
+    + ## [sh](https://www.youtube.com/watch?v=rFL2VOdb944){.secret}ort thoughts
+
+    % id = "philosophy"
+      content.link = "philosophy"
+    + ## philosophy and worldview

crates/treehouse/src/html/tree.rs

@@ -220,14 +220,14 @@ pub fn branch_to_html(
                     EscapeAttribute(link),
                 )
                 .unwrap();
+            } else {
+                write!(
+                    s,
+                    "<a class=\"icon icon-permalink\" href=\"/b?{}\" title=\"permalink\"></a>",
+                    EscapeAttribute(&branch.named_id)
+                )
+                .unwrap();
             }
-
-            write!(
-                s,
-                "<a class=\"icon icon-permalink\" href=\"/b?{}\" title=\"permalink\"></a>",
-                EscapeAttribute(&branch.named_id)
-            )
-            .unwrap();
         }
         s.push_str("</th-bb>");
 

static/css/base.css

@@ -0,0 +1,61 @@
+/* Color scheme. */
+
+: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;
+    --link-color-visited-light: #6c2380;
+
+    --background-color: rgb(255, 253, 246);
+    --background-color-tooltip: rgb(226, 223, 214);
+    --text-color: #55423e;
+    --link-color: #004ec8;
+    --link-color-visited: #6c2380;
+
+    --shaded-background: rgba(0, 0, 0, 5%);
+    --border-1: rgba(0, 0, 0, 15%);
+    --border-2: rgba(0, 0, 0, 30%);
+    --hover: rgba(0, 0, 0, 15%);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: rgb(30, 40, 53);
+        --background-color-tooltip: rgb(23, 31, 41);
+        --text-color: #d7cdbf;
+        --link-color: #93cce8;
+        --link-color-visited: #f7afde;
+
+        --shaded-background: #f7e5df0c;
+        --border-0: #f7e5df1a;
+        --border-1: #f7e5df26;
+        --border-1-and-a-half: #f7e5df3a;
+        --border-2: #f7e5df4d;
+    }
+}
+
+:root {
+    /* Font size-responsive measurements. treehouse was designed against a font size of 14px;
+       each of these sizes is (n / 14)rem where n is the number of pixels. */
+    --1px: 0.07142857143rem;
+    --2px: 0.1428571429rem;
+    --3px: 0.2142857143rem;
+    --4px: 0.2857142857rem;
+    --6px: 0.4285714286rem;
+    --8px: 0.5714285714rem;
+    --10px: 0.7142857143rem;
+    --12px: 0.8571428571rem;
+    --16px: 1.142857143rem;
+}
+
+/* Reset things to more sensible sizing rules */
+
+* {
+    box-sizing: border-box;
+}

static/css/main.css

@@ -1,115 +1,129 @@
-/* Color scheme. */
+/* Lay out the main containers. */
-
-: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;
-    --link-color-visited-light: #6c2380;
-
-    --background-color: rgb(255, 253, 246);
-    --background-color-tooltip: rgb(226, 223, 214);
-    --text-color: #55423e;
-    --link-color: #004ec8;
-    --link-color-visited: #6c2380;
-
-    --shaded-background: rgba(0, 0, 0, 5%);
-    --border-1: rgba(0, 0, 0, 15%);
-    --border-2: rgba(0, 0, 0, 30%);
-    --hover: rgba(0, 0, 0, 15%);
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: rgb(30, 40, 53);
-        --background-color-tooltip: rgb(23, 31, 41);
-        --text-color: #d7cdbf;
-        --link-color: #93cce8;
-        --link-color-visited: #f7afde;
-
-        --shaded-background: #f7e5df0c;
-        --border-0: #f7e5df1a;
-        --border-1: #f7e5df26;
-        --border-1-and-a-half: #f7e5df3a;
-        --border-2: #f7e5df4d;
-    }
-}
-
-:root {
-    /* Font size-responsive measurements. treehouse was designed against a font size of 14px;
-       each of these sizes is (n / 14)rem where n is the number of pixels. */
-    --1px: 0.07142857143rem;
-    --2px: 0.1428571429rem;
-    --3px: 0.2142857143rem;
-    --4px: 0.2857142857rem;
-    --6px: 0.4285714286rem;
-    --8px: 0.5714285714rem;
-    --10px: 0.7142857143rem;
-    --12px: 0.8571428571rem;
-    --16px: 1.142857143rem;
-}
-
-/* Article-style layout. Center everything and give it a maximum width */
 
 body {
-    max-width: 1200px;
+    --top-min-spacing: 40px;
-    margin-left: auto;
-    margin-right: auto;
 
-    display: flex;
+    margin: 0;
-    flex-direction: column;
+
+    display: grid;
+    grid-template-columns:
+        [left] minmax(
+            0,
+            clamp(80px, calc(100vw - (1920px - 360px - 160px)), 160px)
+        )
+        [center] minmax(0, auto)
+        [right] minmax(0, calc(100vw - (1920px - 360px)));
+    grid-template-rows:
+        [top] minmax(
+            clamp(
+                var(--top-min-spacing),
+                calc(100vw - (1920px - 360px - 160px)),
+                128px
+            ),
+            min-content
+        )
+        [title] minmax(6rem, min-content)
+        [main] 1fr
+        [bottom] min-content;
+}
+
+html {
+    /* Try to always leave a bunch of empty space at the bottom, but don't overdo it.
+       It's kind of awkward when you scroll to the bottom and your page just turns blank. */
+    --virtual-space-ratio: 1.75;
+
+    height: calc(100% * var(--virtual-space-ratio));
+}
+
+body {
+    min-height: calc(100% / var(--virtual-space-ratio));
+}
+
+.noscript {
+    grid-row: top;
+    grid-column: center;
+}
+
+#nav-logo {
+    grid-row: title;
+    grid-column: left;
+
+    align-self: center;
+    justify-self: end;
+}
+
+section.page-header {
+    grid-row: title;
+    grid-column: center;
+
+    align-self: center;
 }
 
 main {
-    padding: 0 var(--16px);
+    grid-row: main;
+    grid-column: center / center;
+
+    margin-right: 8px;
 }
 
-@media screen and (max-width: 480px) {
+footer {
+    grid-row: bottom;
+    grid-column: center / center;
+}
+
+@media (max-width: 1200px) {
     main {
-        padding: 0 var(--8px);
+        grid-column: left / -1;
+    }
+
+    footer {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 450px) {
+    body {
+        --top-min-spacing: 0px;
+    }
+
+    section.page-header {
+        grid-column: 1 / -1;
+    }
+
+    nav#nav-logo {
+        display: none;
     }
 }
 
 /* Choose more pretty colors than vanilla HTML */
 
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
 :root {
     scrollbar-color: var(--border-2) var(--shaded-background);
     scrollbar-width: auto;
     scrollbar-gutter: stable;
 }
 
-body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-
-}
-
-body::selection {
-    /* Even though this color doesn't yield the most readable text, browsers  */
-    background-color: var(--liquidex-brand-blue);
-}
-
 /* Set up typography */
 
 @font-face {
-    font-family: 'RecVar';
+    font-family: "RecVar";
     /* NOTE: I put the hash in here manually instead of adding the complexity of piping CSS through
        Handlebars because I don't really think it's worth it for this single asset.
        Other assets are referenced rarely enough that caching probably isn't gonna make too much of
        an impact.
        It's unlikely I'll ever update the font anyways, so eh, whatever. */
-    src: url('../font/Recursive_VF_1.085.woff2?cache=b3-445487d5');
+    src: url("../font/Recursive_VF_1.085.woff2?cache=b3-445487d5");
 }
 
 @font-face {
-    font-family: 'RecVarMono';
+    font-family: "RecVarMono";
-    src: url('../font/Recursive_VF_1.085.woff2?cache=b3-445487d5');
+    src: url("../font/Recursive_VF_1.085.woff2?cache=b3-445487d5");
-    font-variation-settings: "MONO" 1.0;
+    font-variation-settings: "MONO" 1;
 }
 
 body,
@@ -117,7 +131,7 @@ pre,
 code,
 kbd,
 button {
-    font-family: 'RecVar', sans-serif;
+    font-family: "RecVar", sans-serif;
     line-height: 1.5;
 }
 
@@ -133,10 +147,10 @@ button {
 }
 
 :root {
-    --recursive-mono: 0.0;
+    --recursive-mono: 0;
-    --recursive-casl: 1.0;
+    --recursive-casl: 1;
     --recursive-wght: 400;
-    --recursive-slnt: 0.0;
+    --recursive-slnt: 0;
     --recursive-crsv: 0.5;
 
     --recursive-simplified-f: "ss03";
@@ -156,17 +170,14 @@ button {
         "slnt" var(--recursive-slnt),
         "CRSV" var(--recursive-crsv);
 
-    font-feature-settings:
+    font-feature-settings: var(--recursive-simplified-f),
-        var(--recursive-simplified-f),
+        var(--recursive-simplified-g), var(--recursive-simplified-l),
-        var(--recursive-simplified-g),
+        var(--recursive-simplified-r), var(--recursive-no-serif-L-Z);
-        var(--recursive-simplified-l),
-        var(--recursive-simplified-r),
-        var(--recursive-no-serif-L-Z);
 }
 
 h1 {
-    --recursive-slnt: 0.0;
+    --recursive-slnt: 0;
-    --recursive-casl: 0.0;
+    --recursive-casl: 0;
     --recursive-wght: 900;
 
     font-size: 3.5rem;
@@ -174,7 +185,7 @@ h1 {
 }
 
 h2 {
-    --recursive-slnt: 0.0;
+    --recursive-slnt: 0;
     --recursive-casl: 0.5;
     --recursive-wght: 800;
 
@@ -182,7 +193,7 @@ h2 {
 }
 
 h3 {
-    --recursive-slnt: 0.0;
+    --recursive-slnt: 0;
     --recursive-casl: 0.5;
     --recursive-wght: 700;
 
@@ -190,7 +201,7 @@ h3 {
 }
 
 h4 {
-    --recursive-slnt: 0.0;
+    --recursive-slnt: 0;
     --recursive-casl: 0.5;
     --recursive-wght: 700;
 
@@ -201,9 +212,9 @@ pre,
 code,
 kbd,
 th-literate-program {
-    --recursive-mono: 1.0;
+    --recursive-mono: 1;
-    --recursive-casl: 0.0;
+    --recursive-casl: 0;
-    --recursive-slnt: 0.0;
+    --recursive-slnt: 0;
     --recursive-wght: 450;
 }
 
@@ -214,10 +225,19 @@ strong {
 
 i,
 em {
-    --recursive-slnt: -16.0;
+    --recursive-slnt: -16;
     font-style: normal;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
 /* Lay out elements a bit more compactly */
 
 p,
@@ -234,12 +254,6 @@ h6 {
     margin: var(--4px) 0;
 }
 
-/* Lay out elements a little less compactly (actually just have some blank space past the end) */
-
-body {
-    padding-bottom: 10rem;
-}
-
 /* Make code examples a little prettier by giving them visual separation from the rest of the page */
 
 code,
@@ -271,7 +285,6 @@ th-literate-program {
 }
 
 @media (prefers-color-scheme: light) {
-
     pre,
     th-literate-program {
         background-color: transparent;
@@ -279,8 +292,8 @@ th-literate-program {
     }
 }
 
-pre>code,
+pre > code,
-th-literate-program>code {
+th-literate-program > code {
     padding: 0;
     background: none;
     border-radius: 0;
@@ -314,29 +327,29 @@ img.pic {
 
 /* Image hints for tweaking rendering */
 img {
-    &[src*='+pixel'] {
+    &[src*="+pixel"] {
         image-rendering: pixelated;
         border-radius: 0;
     }
 
     /* TODO: These could be autogenerated! */
 
-    &[src*='+width72'] {
+    &[src*="+width72"] {
         width: 72px;
         height: auto;
     }
 
-    &[src*='+width160'] {
+    &[src*="+width160"] {
         width: 160px;
         height: auto;
     }
 
-    &[src*='+width640'] {
+    &[src*="+width640"] {
         width: 640px;
         height: auto;
     }
 
-    &[src*='+width752'] {
+    &[src*="+width752"] {
         width: 752px;
         height: auto;
     }
@@ -415,6 +428,12 @@ hr {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+.noscript:empty {
+    display: none;
 }
 
 .noscript p {
@@ -434,48 +453,40 @@ hr {
     color: var(--link-color-visited-light);
 }
 
-/* also, webkit. */
+/* Navigation button */
-#webkit-makes-me-go-insane {
+
-    display: none;
+#nav-logo {
+    width: min-content;
+    height: min-content;
 }
 
-/* Style the navigation bar. */
+#nav-logo .logo {
+    width: 64px;
+    height: 64px;
 
-nav {
-    display: flex;
-    align-items: center;
-}
-
-nav .nav-page {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-}
-
-/* Give the logo on the top some nicer looks */
-nav .logo {
-    width: 48px;
-    height: 48px;
-    padding: 16px;
     display: block;
     opacity: 100%;
     color: var(--text-color);
 }
 
-/* Style page titles */
+/* Navigation header (contains page title & breadcrumbs) */
+
 h1.page-title {
-    --recursive-wght: 800;
+    --recursive-wght: 850;
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 2.25rem;
-    font-size: 1.25rem;
+    font-size: 2.5rem;
 
     & a {
         color: var(--text-color);
-        text-decoration: none;
+        text-decoration: underline;
+        text-decoration-color: transparent;
+
+        transition: var(--transition-duration) text-decoration-color;
 
         &:hover {
-            text-decoration: underline;
+            text-decoration-color: var(--text-color);
         }
     }
 }
@@ -492,8 +503,6 @@ a[data-cast~="new"] {
     color: var(--text-color);
     opacity: 50%;
 
-    margin-right: var(--16px);
-
     &.has-news {
         opacity: 100%;
         text-decoration: none;
@@ -513,7 +522,7 @@ a[data-cast~="new"] {
 span.badge {
     --recursive-wght: 800;
     --recursive-slnt: 0;
-    --recursive-mono: 1.0;
+    --recursive-mono: 1;
     --recursive-casl: 0;
 
     border-radius: 999px;
@@ -536,10 +545,13 @@ span.badge {
 }
 
 /* Style the footer */
+
 footer {
+    padding-left: 1rem;
+    padding-right: 1rem;
+
     margin-top: 4rem;
-    padding-right: 1.75rem;
+    padding-bottom: 4rem;
-    text-align: right;
 
     display: flex;
     flex-direction: row;
@@ -559,31 +571,38 @@ footer {
         justify-content: end;
 
         opacity: 50%;
-        padding-left: 1.75rem;
         transition: var(--transition-duration) opacity;
 
         & .icon-history {
             display: inline-block;
-            width: 24px;
+            width: 32px;
-            height: 24px;
+            height: 32px;
-            padding-right: 1.75rem;
+            margin-right: 0.5rem;
             background-image: var(--icon-history);
             background-repeat: no-repeat;
             background-position: 50% 50%;
         }
-        
+
-        &>ul {
+        & > ul {
             display: flex;
             flex-direction: row;
-            list-style: none;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+
             margin: 0;
             padding-left: 0;
+
+            list-style: none;
             opacity: 0%;
             transition: var(--transition-duration) opacity;
         }
 
-        &>ul>li:not(:first-child)::before {
+        & > ul > li {
-            content: '·';
+            flex-shrink: 0;
+        }
+
+        & > ul > li:not(:first-child)::before {
+            content: "·";
             text-decoration: none;
             display: inline-block;
             padding-left: 0.75em;
@@ -595,28 +614,32 @@ footer {
             color: var(--text-color);
         }
 
-        &:hover>ul {
+        &:hover > ul {
             opacity: 100%;
         }
     }
 
     & #footer-icon {
-        display: flex;
+        & > a {
-        padding-right: 1.75rem;
+            display: block;
-
-        &>a {
-            display: flex;
-            flex-direction: row;
         }
 
-        &>a>svg {
+        & > a > svg {
-            display: flex;
+            display: block;
             color: var(--text-color);
             opacity: 40%;
         }
     }
 }
 
+@media (hover: none) {
+    footer > #version-info {
+        & > ul {
+            opacity: 100%;
+        }
+    }
+}
+
 /* Style emojis to be readable */
 
 img[data-cast~="emoji"] {
@@ -655,7 +678,7 @@ th-emoji-tooltip {
 th-emoji-tooltip.transitioned-in {
     opacity: 100%;
     filter: blur(0);
-    transform: translateX(-50%) scale(1.0);
+    transform: translateX(-50%) scale(1);
 }
 
 th-emoji-tooltip img {
@@ -701,7 +724,10 @@ th-emoji-tooltip p {
     opacity: 0%;
 }
 
-#index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
+#index\:treehouse
+    > details:not([open])
+    > summary
+    .oops-you-seem-to-have-gotten-stuck {
     display: inline;
     animation: 4s hello-there forwards;
 }
@@ -759,7 +785,7 @@ th-literate-program[data-mode="output"] {
         display: none;
     }
 
-    & pre>code {
+    & pre > code {
         display: block;
     }
 
@@ -772,7 +798,7 @@ th-literate-program[data-mode="output"] {
         }
 
         &::after {
-            content: 'Error';
+            content: "Error";
 
             padding: var(--8px);
 
@@ -796,7 +822,7 @@ th-literate-program[data-mode="output"] {
         }
 
         &::after {
-            content: 'Console';
+            content: "Console";
 
             padding: var(--8px);
 
@@ -840,7 +866,7 @@ th-literate-program[data-mode="output"] {
 
 .th-syntax-highlighting span {
     &.comment {
-        --recursive-slnt: -16.0;
+        --recursive-slnt: -16;
         color: var(--syntax-comment);
     }
 

static/css/page/index.css

@@ -1,42 +1,75 @@
-.index\:hobby-corners {
+h1.page-title {
-    &>li {
+    --recursive-wght: 900;
-        margin: var(--8px) 0px;
+    font-size: 3.5rem;
+}
 
-        &>details {
+@media (hover: none) {
-            border-top: var(--4px) solid var(--section-color);
+    h1.page-title a {
+        text-decoration: none;
+    }
+}
+
+@media (max-width: 450px) {
+    body {
+        --top-min-spacing: 40px;
+    }
+
+    nav#nav-logo {
+        display: block;
+
+        & .logo {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 75vw;
+            height: 75vw;
+            transform: translate(-25%, -20%);
+            pointer-events: none;
+            opacity: 15%;
         }
+    }
+}
 
-        &>details>summary {
+#index\:treehouse {
-            position: relative;
+    & > details > summary {
-            overflow: clip;
+        padding-left: 1rem;
-            box-sizing: border-box;
 
-            border-top-left-radius: 0;
+        & > th-bp {
-            border-top-right-radius: 0;
+            display: none;
+        }
+    }
+}
 
-            &>th-bb>.icon {
+.index\:hobby-corners {
-                opacity: 100%;
+    /* Optical text offset to make the icons look less misaligned.
-            }
+       This is adjusted per each hobby corner to fit the icons.
+       
+       Although the icons may be aligned in terms of bounds, optically they do not look
+       very good next to the text, having awkward blank space to the right.
+       
+       This aims to improve the readability of that a bit without being too noticable. */
+    --section-text-offset: 0em;
 
-            & .background-icon {
+    & > li {
-                position: absolute;
+        & > details > summary {
-                right: calc(var(--button-bar-icon-size) * 2);
+            text-decoration: 4px underline var(--section-color);
-                bottom: 0;
+            text-underline-offset: 4px;
-                color: var(--text-color);
-                opacity: 40%;
 
-                width: 6.85rem;
+            & > th-bc .hobby-icon {
-                height: auto;
+                width: auto;
+                height: 48px;
 
-                pointer-events: none;
+                margin-right: calc(0.2em + var(--section-text-offset));
+
+                vertical-align: -38%;
             }
         }
     }
-
 }
 
 #index\:programming {
     --section-color: var(--liquidex-brand-red);
+    --section-text-offset: -0.1em;
 }
 
 #index\:design {
@@ -45,8 +78,10 @@
 
 #index\:music {
     --section-color: var(--liquidex-brand-green);
+    --section-text-offset: -0.05em;
 }
 
 #index\:games {
     --section-color: var(--liquidex-brand-blue);
+    --section-text-offset: 0.05em;
 }

static/css/tree.css

@@ -25,7 +25,7 @@
 }
 
 .breadcrumb::before {
-    content: '';
+    content: "";
     display: inline-block;
 
     background-image: var(--icon-breadcrumb);
@@ -40,8 +40,9 @@
 }
 
 .breadcrumb a {
-    --recursive-mono: 1.0;
+    --recursive-mono: 1;
     --recursive-wght: 500;
+    --recursive-casl: 0;
 
     color: var(--text-color);
     text-decoration: none;
@@ -51,6 +52,29 @@
     text-decoration: underline;
 }
 
+.breadcrumbs > .root-breadcrumb {
+    display: none; /* only when main logo is hidden */
+    margin-right: -8px;
+
+    & a,
+    & svg {
+        display: block;
+    }
+
+    & .logo {
+        width: 48px;
+        height: 48px;
+        padding: 8px;
+        color: var(--text-color);
+    }
+}
+
+@media (max-width: 450px) {
+    .breadcrumbs > .root-breadcrumb {
+        display: block;
+    }
+}
+
 /*** Tree ***/
 
 .tree {
@@ -72,7 +96,11 @@
 
 /* Use an indent level appropriate for the viewport. */
 .tree ul {
-    --tree-responsive-indent-width: clamp(var(--8px), 2vw, var(--tree-indent-width));
+    --tree-responsive-indent-width: clamp(
+        var(--8px),
+        2vw,
+        var(--tree-indent-width)
+    );
 
     /* Draw indent guides. */
     padding-left: calc(var(--tree-responsive-indent-width) / 2);
@@ -82,21 +110,19 @@
     transition: border-left-color var(--transition-duration);
 }
 
-.tree details:has(.branch-container:hover)>ul {
+.tree details:has(.branch-container:hover) > ul {
     border-left-color: var(--tree-indent-guide-highlighted);
 }
 
-
 /* Top level should not have an indent or a border. */
-.tree>ul {
+.tree > ul {
     padding-left: 0;
     border-left: none;
 }
 
 .tree details {
-
     /* Disable the rightwards chevron in <details> elements */
-    &>summary {
+    & > summary {
         list-style: none;
         cursor: pointer;
 
@@ -112,13 +138,13 @@
     list-style: none;
 
     /* Stretch branch content to the full width of the page */
-    &>div,
+    & > div,
-    &>details {
+    & > details {
         width: 100%;
     }
 
     /* Add an underline for leaf branches */
-    &>div {
+    & > div {
         box-sizing: border-box;
 
         margin-bottom: calc(- var(--1px));
@@ -130,18 +156,17 @@
         }
     }
 
-    &>div,
+    & > div,
-    &>details>summary {
+    & > details > summary {
         /* Child elements are laid out horizontally in a flexbox. */
         display: flex;
         align-items: center;
     }
-
 }
 
 /* <summary> is used for the visual content of branches with children. It's the large horizontal bar
     and notably *excludes* children. */
-.tree details>summary {
+.tree details > summary {
     /* Slightly round for elegance */
     border-radius: var(--8px);
 
@@ -156,13 +181,12 @@
 
 /* For media without hover functionality, draw a bottom border everywhere as a visual anchor for where to tap */
 @media (hover: none) {
-
+    .tree li > div:first-child,
-    .tree li>div:first-child,
+    .tree li > details > summary:first-child {
-    .tree li>details>summary:first-child {
         border-bottom: var(--1px) solid var(--border-1);
     }
 
-    .tree details>summary {
+    .tree details > summary {
         /* In that case summaries shall not be rounded. */
         border-radius: 0;
     }
@@ -185,11 +209,11 @@ th-bp {
 }
 
 /* Change image of th-bp if it has children and/or is collapsible */
-.tree details[open]>summary>th-bp {
+.tree details[open] > summary > th-bp {
     background-image: var(--icon-collapse);
 }
 
-.tree details:not([open])>summary>th-bp {
+.tree details:not([open]) > summary > th-bp {
     background-image: var(--icon-expand);
 }
 
@@ -199,8 +223,9 @@ th-bc {
     padding-top: var(--6px);
     padding-bottom: var(--6px);
 
-    /* Grow to fill the entire available space. This pushes out th-bb to the far right. */
+    /* Lines that are too long get very hard to read. */
-    flex-grow: 1;
+    width: 100%;
+    max-width: 72em;
 
     /* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
     &:has(pre, th-literate-program) {
@@ -213,9 +238,8 @@ th-bc {
 /* NOTE: Linked branches have a slightly different structure (extra <noscript> tag) and therefore
    :last-child does not work. */
 .tree li[data-th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
-
     &::after {
-        content: '\00A0';
+        content: "\00A0";
         display: inline-block;
 
         background-image: var(--icon-more);
@@ -234,10 +258,9 @@ th-bc {
 
 /* Display a [draft] pill for branches that are drafts. */
 .tree li.draft {
-
+    & > details > summary > th-bc::before,
-    &>details>summary>th-bc::before,
+    & > div > th-bc::before {
-    &>div>th-bc::before {
+        content: "draft";
-        content: 'draft';
 
         display: block;
         width: min-content;
@@ -257,10 +280,12 @@ th-bb {
 
     /* Should be displayed on the top of the branch rather than in the middle. */
     align-self: start;
+    flex-grow: 1;
 
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: end;
 
     /* Keep the button bar invisible by default. */
     opacity: 0%;
@@ -268,7 +293,7 @@ th-bb {
 }
 
 /* When the parent is hovered over, display the button bar. */
-.tree *:hover>th-bb {
+.tree *:hover > th-bb {
     opacity: 100%;
 }
 
@@ -335,14 +360,18 @@ th-bb .branch-date {
     to the element highlighted by ?. */
 .tree :target,
 .tree .target {
-
+    & > details > summary,
-    &>details>summary,
+    & > div {
-    &>div {
         background-color: var(--shaded-background);
-        background: linear-gradient(to right,
+        background: linear-gradient(
-                transparent 12.5%, var(--shaded-background),
+            to right,
-                transparent, var(--shaded-background),
+            transparent 12.5%,
-                transparent, var(--shaded-background) 87.5%);
+            var(--shaded-background),
+            transparent,
+            var(--shaded-background),
+            transparent,
+            var(--shaded-background) 87.5%
+        );
         background-size: 800% 100%;
         background-position-x: 100%;
         animation: hey-listen 2s linear;
@@ -383,12 +412,11 @@ ul.branch-quote {
 
     position: relative;
 
-
     &::before {
         --recursive-wght: 900;
         --recursive-casl: 0;
 
-        content: '“';
+        content: "“";
         position: absolute;
         right: var(--16px);
         top: var(--1px);

static/svg/object/logo.svg

@@ -0,0 +1,5 @@
+<svg class="logo" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8 3H7H6V4V5H4V6H6V9V10H7H10V12H11V10H12H13V9V8V7H12H11H10V8V9H7V6H8H9V5V4V3H8ZM12 9H11V8H12V9ZM7 5V4H8V5H7ZM3 5H2V6H3V5ZM10 13H11V14H10V13Z"
+        fill="currentColor" />
+</svg>

template/_tree.hbs

@@ -7,28 +7,27 @@
 </head>
 
 <body>
-    {{#> components/_nav.hbs }}
+    <!-- Empty span to push noscript over to the next grid cell.
-
+         Browsers turn <noscript> tags into <span style="display: inline !important;"> with no
-    {{!-- For /index, include a "new" link that goes to the curated news feed page. --}}
+         additional classes, and we can't easily select that in CSS. -->
-    {{#if (eq page.tree_path "index")}}
+    <span></span>
-    <a href="{{ config.site }}/treehouse/new" data-cast="new">new</a>
-    {{/if}}
-
-    {{/ components/_nav.hbs }}
-
     {{> components/_noscript.hbs }}
 
+    {{> components/_nav.hbs }}
+    {{> components/_header.hbs }}
+
     {{!--
     NOTE: ~ because components/_tree.hbs must not include any extra indentation, because it may
     contain pre elements which shouldn't be indented.
     --}}
     {{~> components/_tree.hbs }}
-    <th-emoji-tooltips></th-emoji-tooltips>
 
     {{!-- For all pages except the one linked from the footer, include the footer icon. --}}
     {{#if (ne page.tree_path "treehouse")}}
     {{> components/_footer.hbs }}
     {{/if}}
+
+    <th-emoji-tooltips></th-emoji-tooltips>
 </body>
 
 </html>

template/components/_head.hbs

@@ -6,6 +6,7 @@
 
 <link rel="preload" href="{{ asset 'font/Recursive_VF_1.085.woff2' }}" as="font" type="font/woff2"
     crossorigin="anonymous">
+<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
 <link rel="stylesheet" href="{{ asset 'css/main.css' }}">
 <link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
 <link rel="stylesheet" href="{{ asset 'css/tree.css' }}">

template/components/_header.hbs

@@ -0,0 +1,16 @@
+<section class="page-header">
+    {{#if page.breadcrumbs}}
+    <ol class="breadcrumbs">
+        <li class="root-breadcrumb">
+            <a href="{{ config.site }}/">
+                {{{ include_static 'svg/object/logo.svg' }}}
+            </li>
+        </a>
+        {{{ page.breadcrumbs }}}
+    </ol>
+    {{/if}}
+
+    {{#if (ne page.title page.tree_path)}}
+    <h1 class="page-title"><a href="{{ config.site }}/{{ page.tree_path }}">{{ page.title }}</a></h1>
+    {{/if}}
+</section>

template/components/_nav.hbs

@@ -1,23 +1,19 @@
-<nav>
+<nav id="nav-logo">
     <a href="{{ config.site }}/" title="Back to homepage">
-        <svg class="logo" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {{{ include_static 'svg/object/logo.svg' }}}
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M8 3H7H6V4V5H4V6H6V9V10H7H10V12H11V10H12H13V9V8V7H12H11H10V8V9H7V6H8H9V5V4V3H8ZM12 9H11V8H12V9ZM7 5V4H8V5H7ZM3 5H2V6H3V5ZM10 13H11V14H10V13Z"
-                fill="currentColor" />
-        </svg>
     </a>
-
-    <div class="nav-page">
-        {{#if page.breadcrumbs}}
-        <ol class="breadcrumbs">
-            {{{ page.breadcrumbs }}}
-        </ol>
-        {{/if}}
-
-        {{#if (and (ne page.title config.user.title) (ne page.title page.tree_path))}}
-        <h1 class="page-title"><a href="{{ config.site }}/{{ page.tree_path }}">{{ page.title }}</a></h1>
-        {{/if}}
-    </div>
-
-    {{> @partial-block }}
 </nav>
+
+{{!--
+
+I don't have any idea where to put this right now.
+There's no obvious place, and even when it is there, I hate the hideous red badge on new entries.
+No time to figure it out. Will do later.
+
+{{#if (eq page.tree_path 'index')}}
+<nav id="nav-links">
+    <a href="{{ config.site }}/treehouse/new" data-cast="new">new</a>
+</nav>
+{{/if}}
+
+--}}

template/sandbox.hbs

@@ -5,7 +5,7 @@
 <head>
     <title>treehouse iframe sandbox</title>
 
-    <link rel="stylesheet" href="{{ asset 'css/main.css' }}">
+    <link rel="stylesheet" href="{{ asset 'css/base.css' }}">
 
     <style>
         body {