redesign new a bit

2024-02-22 16:14:02 +01:00 · 2024-02-22 16:14:02 +01:00 · 372a9dff5a
parent 1606c32b9e
commit 372a9dff5a
9 changed files with 132 additions and 11 deletions
--- a/content/design.tree
+++ 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
--- a/content/design/digital-textures.tree
+++ 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 <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.
--- 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
--- 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?
+- <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]
--- 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);
            }
        }
--- 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;
    }
--- 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;
--- a/template/_new.hbs
+++ b/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>.
--- 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