From 372a9dff5a9fd37661bac2cc4aeafa732e5fdff1 Mon Sep 17 00:00:00 2001 From: liquidev Date: Thu, 22 Feb 2024 16:14:02 +0100 Subject: [PATCH] redesign new a bit --- content/design.tree | 25 +++++++++++++++ content/design/digital-textures.tree | 48 ++++++++++++++++++++++++++++ content/index.tree | 4 +++ content/treehouse/new.tree | 11 ++++++- crates/treehouse/src/cli/generate.rs | 4 +-- static/css/main.css | 9 +++++- static/css/new.css | 35 ++++++++++++++++++-- template/_new.hbs | 6 +--- treehouse.toml | 1 + 9 files changed, 132 insertions(+), 11 deletions(-) create mode 100644 content/design.tree create mode 100644 content/design/digital-textures.tree 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 @@ - + \ No newline at end of file diff --git a/treehouse.toml b/treehouse.toml index 3d04d9d..71dfad5 100644 --- a/treehouse.toml +++ b/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