diff --git a/content/about-treehouse.tree b/content/about-treehouse.tree
index cb578eb..e507f46 100644
--- a/content/about-treehouse.tree
+++ b/content/about-treehouse.tree
@@ -363,7 +363,7 @@
- not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn't ideal.
% id = "01H8V55APD2BPGQXEK7JARYJ9H"
- - in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).
+ - ~~in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).~~
% id = "01H8V55APDXZJE3HHH5AQ8ZQHF"
+ that little bit of slant makes it look just a little more like handwriting.
@@ -382,3 +382,5 @@
% id = "01H8V55APDB8PC2BF5P9TVYJ35"
- not to mention I'd have to handwrite a lot of text, and *then* either use OCR or type it all out again for accessibility. yeah, no thanks methinks.
+
+ - UPDATE: not slanted anymore. `slnt` is 0.
diff --git a/content/index.tree b/content/index.tree
index 62230db..6573d60 100644
--- a/content/index.tree
+++ b/content/index.tree
@@ -1,4 +1,5 @@
%% title = "liquidex's treehouse"
+ styles = ["page/index.css"]
% id = "treehouse"
- # liquidex's treehouse
@@ -23,23 +24,57 @@
+ ## about this
% id = "01H8V556P1GRAA3717VH3QJFMV"
+ classes.branch_children = "index:hobby-corners"
- hobby corners
% id = "programming"
content.link = "programming"
+ ## programming
+
% id = "design"
content.link = "design"
+ ## design
+
+
% id = "music"
content.link = "music"
+ ## music
+
% id = "games"
content.link = "games"
+ ## games
+
% id = "01HFYZKREWE2AM61ZRW3R501H6"
- various thoughts
diff --git a/content/programming/blog/tairu.tree b/content/programming/blog/tairu.tree
index 3432bc8..372696a 100644
--- a/content/programming/blog/tairu.tree
+++ b/content/programming/blog/tairu.tree
@@ -3,7 +3,7 @@ scripts = [
"components/literate-programming.js",
"vendor/codejar.js",
]
-styles = ["post/tairu.css"]
+styles = ["page/tairu.css"]
% id = "01HPD4XQPWM8ECT2QM6AT9YRWB"
- I remember since my early days doing programming, I've been interested in how games like Terraria handle automatically tiling their terrain.
diff --git a/static/css/main.css b/static/css/main.css
index b576f4a..441e91c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3,6 +3,10 @@
:root {
/* naturally */
--liquidex-brand-blue: #058ef0;
+ /* but also: */
+ --liquidex-brand-red: #eb134a;
+ --liquidex-brand-yellow: #ffc31f;
+ --liquidex-brand-green: #06ca4a;
--text-color-light: #55423e;
--link-color-light: #004ec8;
@@ -107,7 +111,7 @@ kbd {
--recursive-mono: 0.0;
--recursive-casl: 1.0;
--recursive-wght: 400;
- --recursive-slnt: -2.0;
+ --recursive-slnt: 0.0;
--recursive-crsv: 0.5;
--recursive-simplified-f: "ss03";
diff --git a/static/css/page/index.css b/static/css/page/index.css
new file mode 100644
index 0000000..ed4e7b9
--- /dev/null
+++ b/static/css/page/index.css
@@ -0,0 +1,52 @@
+.index\:hobby-corners {
+ &>li {
+ margin: 8px 0px;
+
+ &>details {
+ border-top: 4px solid var(--section-color);
+ }
+
+ &>details>summary {
+ position: relative;
+ overflow: clip;
+ box-sizing: border-box;
+
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+
+ &>th-bb>.icon {
+ opacity: 100%;
+ }
+
+ & .background-icon {
+ position: absolute;
+ right: calc(var(--button-bar-icon-size) * 2);
+ bottom: 0;
+ color: var(--text-color);
+ opacity: 40%;
+
+ width: 96px;
+ height: auto;
+
+ pointer-events: none;
+ }
+ }
+ }
+
+}
+
+#index\:programming {
+ --section-color: var(--liquidex-brand-red);
+}
+
+#index\:design {
+ --section-color: var(--liquidex-brand-yellow);
+}
+
+#index\:music {
+ --section-color: var(--liquidex-brand-green);
+}
+
+#index\:games {
+ --section-color: var(--liquidex-brand-blue);
+}
diff --git a/static/css/post/tairu.css b/static/css/page/tairu.css
similarity index 100%
rename from static/css/post/tairu.css
rename to static/css/page/tairu.css
diff --git a/static/css/tree.css b/static/css/tree.css
index 2ee7ab2..4e39582 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -27,6 +27,7 @@
:root {
--tree-indent-width: 28px;
--transition-duration: 0.15s;
+ --button-bar-icon-size: 24px;
}
/*** Breadcrumbs ***/
@@ -293,6 +294,10 @@ th-bb {
/* For media without hover functionality, th-bb should always be visible. */
@media (hover: none) {
+ :root {
+ --button-bar-icon-size: 32px;
+ }
+
.tree th-bb {
opacity: 100%;
@@ -326,8 +331,8 @@ th-bb .branch-date {
background-position: 50% 50%;
opacity: 35%;
- width: 24px;
- height: 24px;
+ width: var(--button-bar-icon-size);
+ height: var(--button-bar-icon-size);
}
& .icon-permalink {
diff --git a/static/svg/object/design.svg b/static/svg/object/design.svg
new file mode 100644
index 0000000..e24e0c8
--- /dev/null
+++ b/static/svg/object/design.svg
@@ -0,0 +1,10 @@
+
diff --git a/static/svg/object/games.svg b/static/svg/object/games.svg
new file mode 100644
index 0000000..521b0f2
--- /dev/null
+++ b/static/svg/object/games.svg
@@ -0,0 +1,11 @@
+
diff --git a/static/svg/object/music.svg b/static/svg/object/music.svg
new file mode 100644
index 0000000..7ea1696
--- /dev/null
+++ b/static/svg/object/music.svg
@@ -0,0 +1,5 @@
+
diff --git a/static/svg/object/programming.svg b/static/svg/object/programming.svg
new file mode 100644
index 0000000..8532a5b
--- /dev/null
+++ b/static/svg/object/programming.svg
@@ -0,0 +1,6 @@
+
diff --git a/template/components/_footer.hbs b/template/components/_footer.hbs
index d555660..475681f 100644
--- a/template/components/_footer.hbs
+++ b/template/components/_footer.hbs
@@ -6,7 +6,7 @@
-