redesign new a bit

This commit is contained in:
liquidex 2024-02-22 16:14:02 +01:00
parent 1606c32b9e
commit 372a9dff5a
9 changed files with 132 additions and 11 deletions

25
content/design.tree Normal file
View file

@ -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

View file

@ -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.

View file

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

View file

@ -4,8 +4,17 @@
feed = "news" feed = "news"
% id = "01HQ6G30PTVT5H0Z04VVRHEZQF" % 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 ### tairu - an interactive exploration of 2D autotiling techniques
[read][page:programming/blog/tairu] [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]

View file

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

View file

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

View file

@ -7,10 +7,12 @@ section {
.tree th-bc>p:last-child { .tree th-bc>p:last-child {
--transition-duration: 0.2s; --transition-duration: 0.2s;
margin-top: 12px; margin-top: 8px;
margin-bottom: 4px; margin-bottom: 4px;
&>a { &>a {
display: inline-block;
padding: 0.5em 1.5em; padding: 0.5em 1.5em;
color: var(--text-color); 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"] { section[is="th-settings"] {
& h3 { & h3 {
display: inline; display: inline;
@ -100,4 +131,4 @@ section[is="th-settings"] {
border-color: white; border-color: white;
} }
} }
} }

View file

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

View file

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