diff --git a/content/design.tree b/content/design.tree
new file mode 100644
index 0000000..67e4820
--- /dev/null
+++ b/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
diff --git a/content/design/digital-textures.tree b/content/design/digital-textures.tree
new file mode 100644
index 0000000..6e4a428
--- /dev/null
+++ b/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 pointer is used for elements that are clickable,
+ and a text cursor is used for text.
+
+
+
+ % classes.branch = "digital-textures-pointer-cursor"
+ id = "01HQ8JHZ5NYDJD0YKVX55AR3ZQ"
+ -
+ when you have an interactive element and it _doesn't_ have a pointer cursor on it, it feels almost wrong.
+ eerie in a way. out of place.
+ like have you noticed this branch is kind of really fucking weird with the default cursor?
+
+
+ % id = "01HQ8JHZ5NT1P5R3EM9GEKZ3DK"
+ - and this one is *even* weirder, with unselectable text! (sorry for this. I'm trying to make a point.)
+
+ % id = "01HQ8JHZ5N21GM1FWEXAKPWDPA"
+ - the fact you can press Ctrl + A 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 Lucida Console rather than Consolas.
+
+ % 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.
diff --git a/content/index.tree b/content/index.tree
index d950d75..62230db 100644
--- a/content/index.tree
+++ b/content/index.tree
@@ -29,6 +29,10 @@
content.link = "programming"
+ ## programming
+ % id = "design"
+ content.link = "design"
+ + ## design
+
% id = "music"
content.link = "music"
+ ## music
diff --git a/content/treehouse/new.tree b/content/treehouse/new.tree
index 1e9661e..a7b6738 100644
--- a/content/treehouse/new.tree
+++ b/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?
+- featured 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]
diff --git a/crates/treehouse/src/cli/generate.rs b/crates/treehouse/src/cli/generate.rs
index 74e2191..eee907f 100644
--- a/crates/treehouse/src/cli/generate.rs
+++ b/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);
}
}
diff --git a/static/css/main.css b/static/css/main.css
index ef5e4a8..80c2436 100644
--- a/static/css/main.css
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/static/css/new.css b/static/css/new.css
index e26ed00..5ff71ea 100644
--- a/static/css/new.css
+++ b/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;
}
}
-}
+}
\ No newline at end of file
diff --git a/template/_new.hbs b/template/_new.hbs
index a48ce51..dfc40fd 100644
--- a/template/_new.hbs
+++ b/template/_new.hbs
@@ -25,12 +25,8 @@
here's a recap just for you - enjoy!
-
-
{{> components/_tree.hbs }}
-
-
note that this page does not include any updates that were made to the website itself - for that, you can
visit the changelog.
@@ -74,4 +70,4 @@
-