redesign new a bit

content/design.tree

@@ -0,0 +1,25 @@
+%% title = "thoughts on user interfaces and user experiences"
+
+% id = "01HQ8KV8RW077VSHHZ7CXPBDA8"
++ despite not being a UX designer, I care deeply about user experience. it's become somewhat of a hobby of mine, applying UX design to basically everything.
+
+this branch is about that.
+
+    % id = "01HQ8KV8RW35QJSN5WM95DBXRZ"
+    - have you noticed all the small details that make the treehouse feel like a *polished experience*?
+
+        % id = "01HQ8KV8RWDCWQRK4EB2R0ZA1N"
+        - like when you hover over emoji, there's a tooltip - but did you notice the tooltip disappears when you scroll?
+
+            % id = "01HQ8KV8RW00VPW0Z84ZQBMVTP"
+            - that ain't default behavior. :hat_smug:
+
+        % id = "01HQ8KV8RWCGV2GYN04PKED7V4"
+        - or the fact that you can select text in a branch that can be expanded, and the branch won't collapse when you release your mouse button?
+
+            % id = "01HQ8KV8RWS99XKPBKCTZ3NEJM"
+            - that ain't default behavior. :hat_smug:
+
+% content.link = "design/digital-textures"
+  id = "01HQ8JHZ5QTZXQW3M26CXPFQDF"
++ on digital textures

content/design/digital-textures.tree

@@ -0,0 +1,48 @@
+%% title = "on digital textures"
+
+% id = "01HQ8JHZ5NP1K7PHW4MJQS65ND"
+- this is not about textures in the graphics programming sort of way. this is about textures in the *you can feel it under your fingers* way
+
+% id = "01HQ8JHZ5NM6CNJ1PCGCWC6DQV"
+- I don't know if it's just some weird synaesthesia thing or not, but one interesting observation I've noticed is that various cursors seem to give off different *textures*.
+like you hover over something and you can digitally feel it under your fingers
+
+% id = "01HQ8JHZ5NEHACKDTHJSJNB3QD"
+- these textures just generally cause different pieces of software to give off different *vibes*;
+for example, based on texture alone it is possible to determine whether something runs on web technologies.
+
+    % id = "01HQ8JHZ5N68ZG29CSAKYW3CYE"
+    - you can probably tell this blog is a website just by *feeling* how it behaves.
+
+        % id = "01HQ8JHZ5NZAVMCYFGS94W6Z8N"
+        - the cursors, where <span style="cursor: pointer; text-decoration: dotted underline;">pointer</span> is used for elements that are clickable,
+        and a text cursor is used for text.
+
+        <style>
+        .digital-textures-pointer-cursor * { cursor: default }
+        </style>
+
+            % classes.branch = "digital-textures-pointer-cursor"
+              id = "01HQ8JHZ5NYDJD0YKVX55AR3ZQ"
+            - <span style="cursor: default;">
+            when you have an interactive element and it _doesn't_ have a <span style="cursor: pointer; text-decoration: dotted underline;">pointer</span> cursor on it, it feels almost <em>wrong.</em>
+            eerie in a way. out of place.<br>
+            like have you noticed this branch is kind of really fucking weird with the default cursor?
+            </span>
+
+                % id = "01HQ8JHZ5NT1P5R3EM9GEKZ3DK"
+                - <span style="cursor: default; user-select: none;">and this one is *even* weirder, with unselectable text! (sorry for this. I'm trying to make a point.)</span>
+
+        % id = "01HQ8JHZ5N21GM1FWEXAKPWDPA"
+        - the fact you can press <kbd>Ctrl</kbd> + <kbd>A</kbd> and it selects all text also gives off a texture typical of websites.
+
+        % id = "01HQ8JHZ5NMA2HT3M075G9AV1A"
+        - the common usage of [hyperlinks][def:word/hyperlink] over buttons is also typical of websites.
+
+% id = "01HQ8JHZ5N2WA7G6QN7YCE8PN0"
+- Git for Windows asks whether you want to use stock Windows `cmd.exe` or mintty.
+for as long as I can remember, mintty always felt *wrong* to me. like the experience was not *Windowsy.*
+simply because the terminal window is so tiny, the cursor is an I-beam, and the default font used is <span style="font-family: 'Lucida Console', RecVar;">Lucida Console</span> rather than <span style="font-family: 'Consolas', RecVar;">Consolas</span>.
+
+    % id = "01HQ8JHZ5NHEW18R8JQWQCAB6Y"
+    - synaesthetically, it feels to me as if `cmd.exe` is smooth, and mintty is rough. like with `cmd.exe` you're touching matte plastic, an LCD display, and with mintty you're touching a piece of paper or tree bark.

content/index.tree

@@ -29,6 +29,10 @@
           content.link = "programming"
         + ## programming
 
+        % id = "design"
+          content.link = "design"
+        + ## design
+
         % id = "music"
           content.link = "music"
         + ## music

content/treehouse/new.tree

@@ -4,8 +4,17 @@
    feed = "news"
 
 % id = "01HQ6G30PTVT5H0Z04VVRHEZQF"
-- ever wondered how Terraria renders its worlds? or how editors like Tiled manage to make painting tiles so easy?
+- <span class="badge blue">featured</span> ever wondered how Terraria renders its worlds? or how editors like Tiled manage to make painting tiles so easy?
 
 ### tairu - an interactive exploration of 2D autotiling techniques
 
 [read][page:programming/blog/tairu]
+
+% id = "01HQ8KV8T8GRCVFDJ3EP6QE163"
+- I started a branch on user interface and user experience design, because I was working with mintty at work and had some thoughts about it.
+
+"why does mintty always feel so *out of place* compared to `cmd.exe`?"
+
+### liquidex's treehouse: design
+
+[read: *on digital textures*][page:design/digital-textures] [go to branch][page:design]

crates/treehouse/src/cli/generate.rs

@@ -219,7 +219,8 @@ impl Generator {
                 let relative_path = path
                     .strip_prefix(paths.template_dir)?
                     .to_string_lossy()
-                    .into_owned();
+                    .into_owned()
+                    .replace('\\', "/");
                 let file_id =
                     Self::register_template(&mut handlebars, treehouse, &relative_path, path)?;
                 template_file_ids.insert(relative_path, file_id);
@@ -263,7 +264,6 @@ impl Generator {
                     let branch = treehouse.tree.branch(root);
                     feed.branches.push(branch.attributes.id.clone());
                 }
-                dbg!(&feed.branches);
                 feeds.insert(feed_name.to_owned(), feed);
             }
         }

static/css/main.css

@@ -452,6 +452,8 @@ a[is="th-new"] {
     color: var(--text-color);
     opacity: 50%;
 
+    margin-right: 16px;
+
     &.has-news {
         opacity: 100%;
         text-decoration: none;
@@ -483,6 +485,11 @@ span.badge {
         background-color: #d01243;
     }
 
+    &.blue {
+        color: white;
+        background-color: #058ef0;
+    }
+
     &.before-content {
         margin-right: 6px;
     }
@@ -774,4 +781,4 @@ section[is="th-settings"] {
     /* Don't display settings when JavaScript is disabled.
        JS overrides this value on the element itself. */
     display: none;
-}
+}

static/css/new.css

@@ -7,10 +7,12 @@ section {
 .tree th-bc>p:last-child {
     --transition-duration: 0.2s;
 
-    margin-top: 12px;
+    margin-top: 8px;
     margin-bottom: 4px;
 
     &>a {
+        display: inline-block;
+
         padding: 0.5em 1.5em;
 
         color: var(--text-color);
@@ -33,6 +35,35 @@ section {
     }
 }
 
+.tree li>div:first-child,
+.tree li>details>summary:first-child {
+    --margin: 2.5em;
+
+    border: none;
+    margin-left: var(--tree-indent-width);
+    width: calc(100% - var(--tree-indent-width));
+    margin-top: var(--margin);
+    margin-bottom: var(--margin);
+}
+
+.tree th-bp {
+    display: none;
+}
+
+.tree th-bb {
+    opacity: 100%;
+
+    & .branch-date {
+        display: block !important;
+    }
+}
+
+@media (max-width: 600px) {
+    .tree .branch-container {
+        flex-direction: column-reverse;
+    }
+}
+
 section[is="th-settings"] {
     & h3 {
         display: inline;
@@ -100,4 +131,4 @@ section[is="th-settings"] {
             border-color: white;
         }
     }
-}
+}

template/_new.hbs

@@ -25,12 +25,8 @@
             here's a recap just for you - enjoy!</p>
     </section>
 
-    <hr>
-
     {{> components/_tree.hbs }}
 
-    <hr>
-
     <section>
         <p>note that this page does not include any updates that were made to the website itself - for that, you can
             visit <a href="{{ config.site }}/treehouse/changelog.html">the changelog</a>.
@@ -74,4 +70,4 @@
     </script>
 </body>
 
-</html>
+</html>

treehouse.toml

@@ -22,6 +22,7 @@ description = "a place on the Internet I like to call home"
 # Blog posts I like to reference
 "article/function_coloring" = "https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/"
 
+"word/hyperlink" = "https://en.wiktionary.org/wiki/hyperlink"
 "word/iff" = "https://en.wiktionary.org/wiki/iff"
 
 # People