diff --git a/content/about.tree b/content/about.tree
index 0737a29..f599d30 100644
--- a/content/about.tree
+++ b/content/about.tree
@@ -18,7 +18,7 @@
- daknus on SoundCloud
% id = "01H89P3CH8PB76G26M4T8P6QDZ"
- - limiter sometimes jokingly on Discord
+ + limiter sometimes jokingly on Discord
% id = "01H89P3CH8Z4MXQ0C9EWV01DPX"
+ limitre, which is British for limiter
diff --git a/static/css/main.css b/static/css/main.css
index 061c133..19d4ec7 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3,10 +3,26 @@
:root {
--background-color: rgb(255, 253, 246);
--text-color: #55423e;
+ --link-color: #004ec8;
+ --link-color-visited: #6c2380;
--shaded-background: rgba(0, 0, 0, 5%);
--border-1: rgba(0, 0, 0, 15%);
--border-2: rgba(0, 0, 0, 30%);
+ --hover: rgba(0, 0, 0, 15%);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background-color: rgb(30, 40, 53);
+ --text-color: #d7cdbf;
+ --link-color: #93cce8;
+ --link-color-visited: #f7afde;
+
+ --shaded-background: #f7e5df0c;
+ --border-1: #f7e5df26;
+ --border-2: #f7e5df4d;
+ }
}
/* Article-style layout. Center everything and give it a maximum width */
@@ -71,7 +87,7 @@ h1 {
--recursive-casl: 0.0;
--recursive-wght: 900;
- font-size: 2.5rem;
+ font-size: 3.5rem;
}
h2 {
@@ -150,11 +166,11 @@ img {
/* Fix the default blue and ugly purple links normally have */
a {
- color: #004ec8;
+ color: var(--link-color);
}
a:visited {
- color: #6c2380;
+ color: var(--link-color-visited);
}
/* Make blockquotes a bit prettier */
diff --git a/static/css/tree.css b/static/css/tree.css
index 12cbe83..68e44bf 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -48,12 +48,14 @@
}
.tree li>div:first-child:hover {
- border-bottom: 1px solid rgba(0, 0, 0, 15%);
+ border-bottom: 1px solid var(--border-1);
margin-bottom: -1px;
}
.tree details>summary {
- background-image: url('../svg/expand.svg');
+ background-image:
+ /* expand */
+ url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA1di0zaC0ydjNoLTN2MmgzdjNoMnYtM2gzdi0yeiIgZmlsbD0iIzU1NDIzZSIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
background-repeat: no-repeat;
background-position: var(--tree-icon-position);
padding-left: var(--tree-icon-space);
@@ -63,15 +65,17 @@
padding-bottom: var(--tree-hover-expansion);
border-radius: 8px;
- background-color: rgba(0, 0, 0, 0%);
+ background-color: transparent;
}
.tree details>summary:hover {
- background-color: rgba(0, 0, 0, 5%);
+ background-color: var(--shaded-background);
}
.tree li>div {
- background-image: url('../svg/leaf.svg');
+ background-image:
+ /* leaf */
+ url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIGZpbGw9IiM1NTQyM2UiIGZpbGwtb3BhY2l0eT0iLjUiIHI9IjIiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: var(--tree-icon-position);
padding-left: var(--tree-icon-space);
@@ -79,14 +83,16 @@
}
.tree details[open]>summary {
- background-image: url('../svg/collapse.svg');
+ background-image:
+ /* collapse */
+ url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiM1NTQyM2UiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
}
@media (hover: none) {
.tree li>div:first-child,
.tree li>details>summary:first-child {
- border-bottom: 1px solid rgba(0, 0, 0, 15%);
+ border-bottom: 1px solid var(--border-1);
}
.tree details>summary {
@@ -132,11 +138,15 @@
.tree .icon-permalink {
- background-image: url("../svg/permalink.svg");
+ background-image:
+ /* permalink */
+ url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNjU2ODYgMiAxLjQxNDIxIDEuNDE0MjJjLjY4MDUxLjY4MDUxIDEuMDY0NTMgMS41NDUyMSAxLjE1MjEzIDIuNDMzNjIuODg4NC4wODc2IDEuNzUzMS40NzE2NSAyLjQzMzcgMS4xNTIxNmwxLjQxNDIgMS40MTQyMmMxLjU2MjEgMS41NjIwOSAxLjU2MjEgNC4wOTQ3OCAwIDUuNjU2ODhzLTQuMDk0NzkgMS41NjIxLTUuNjU2ODggMGwtMS40MTQyMi0xLjQxNDJjLS42ODA1MS0uNjgwNi0xLjA2NDU2LTEuNTQ1My0xLjE1MjE2LTIuNDMzNy0uODg4NDEtLjA4NzYtMS43NTMxMS0uNDcxNjItMi40MzM2Mi0xLjE1MjEzbC0xLjQxNDIyLTEuNDE0MjFjLTEuNTYyMDk0LTEuNTYyMS0xLjU2MjA5NC00LjA5NDc2IDAtNS42NTY4NiAxLjU2MjEtMS41NjIwOTQgNC4wOTQ3Ni0xLjU2MjA5NCA1LjY1Njg2IDB6bS42MTggNy42ODkwN2MtLjE0NDMuMDg1MjItLjI5MjgxLjE2MDYxLS40NDQ1NS4yMjYxNi4wMjA4My40ODI1Ny4yMTU0Ni45NTg5Ny41ODM5MSAxLjMyNzM3bDEuNDE0MjEgMS40MTQzYy43ODEwNy43ODEgMi4wNDczNy43ODEgMi44Mjg0NyAwIC43ODEtLjc4MTEuNzgxLTIuMDQ3NCAwLTIuODI4NDdsLTEuNDE0My0xLjQxNDIxYy0uMzY4NC0uMzY4NDUtLjg0NDgtLjU2MzA4LTEuMzI3MzctLjU4MzkxLS4wNjU1NS4xNTE3My0uMTQwOTMuMzAwMjQtLjIyNjE2LjQ0NDU0bDEuODQ2NDMgMS44NDY0NS0xLjQxNDIgMS40MTQyem0tLjYxOC00Ljg2MDY0Yy4zNjg0NC4zNjg0NS41NjMwOC44NDQ4OC41ODM5MSAxLjMyNzQyLS4xNTE3NC4wNjU1NC0uMzAwMjQuMTQwOTMtLjQ0NDU0LjIyNjE1bC0xLjkxNzU0LTEuOTE3NTMtMS40MTQyMSAxLjQxNDIxIDEuOTE3NTMgMS45MTc1M2MtLjA4NTIzLjE0NDMxLS4xNjA2MS4yOTI4Mi0uMjI2MTYuNDQ0NTYtLjQ4MjU0LS4wMjA4My0uOTU4OTctLjIxNTQ3LTEuMzI3NDItLjU4MzkxbC0xLjQxNDIxLTEuNDE0MjJjLS43ODEwNS0uNzgxMDUtLjc4MTA1LTIuMDQ3MzcgMC0yLjgyODQyczIuMDQ3MzctLjc4MTA1IDIuODI4NDIgMHoiIGZpbGw9IiM1NTQyM2UiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}
.tree .icon-go {
- background-image: url("../svg/go.svg");
+ background-image:
+ /* go */
+ url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iIzU1NDIzZSIvPjwvc3ZnPg==");
}
.tree a.navigate {
@@ -154,8 +164,40 @@
.tree :target>details>summary,
.tree :target>div {
- border-bottom: 1px dashed rgba(0, 0, 0, 30%);
+ border-bottom: 1px dashed var(--border-2);
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
+
+@media (prefers-color-scheme: dark) {
+ .tree details>summary {
+ background-image:
+ /* expand */
+ url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA1di0zaC0ydjNoLTN2MmgzdjNoMnYtM2gzdi0yeiIgZmlsbD0iI2Q3Y2RiZiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
+ }
+
+ .tree li>div {
+ background-image:
+ /* leaf */
+ url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIGZpbGw9IiNkN2NkYmYiIGZpbGwtb3BhY2l0eT0iLjUiIHI9IjIiLz48L3N2Zz4=');
+ }
+
+ .tree details[open]>summary {
+ background-image:
+ /* collapse */
+ url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiNkN2NkYmYiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
+ }
+
+ .tree .icon-permalink {
+ background-image:
+ /* permalink */
+ url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNjU2ODYgMiAxLjQxNDIxIDEuNDE0MjJjLjY4MDUxLjY4MDUxIDEuMDY0NTMgMS41NDUyMSAxLjE1MjEzIDIuNDMzNjIuODg4NC4wODc2IDEuNzUzMS40NzE2NSAyLjQzMzcgMS4xNTIxNmwxLjQxNDIgMS40MTQyMmMxLjU2MjEgMS41NjIwOSAxLjU2MjEgNC4wOTQ3OCAwIDUuNjU2ODhzLTQuMDk0NzkgMS41NjIxLTUuNjU2ODggMGwtMS40MTQyMi0xLjQxNDJjLS42ODA1MS0uNjgwNi0xLjA2NDU2LTEuNTQ1My0xLjE1MjE2LTIuNDMzNy0uODg4NDEtLjA4NzYtMS43NTMxMS0uNDcxNjItMi40MzM2Mi0xLjE1MjEzbC0xLjQxNDIyLTEuNDE0MjFjLTEuNTYyMDk0LTEuNTYyMS0xLjU2MjA5NC00LjA5NDc2IDAtNS42NTY4NiAxLjU2MjEtMS41NjIwOTQgNC4wOTQ3Ni0xLjU2MjA5NCA1LjY1Njg2IDB6bS42MTggNy42ODkwN2MtLjE0NDMuMDg1MjItLjI5MjgxLjE2MDYxLS40NDQ1NS4yMjYxNi4wMjA4My40ODI1Ny4yMTU0Ni45NTg5Ny41ODM5MSAxLjMyNzM3bDEuNDE0MjEgMS40MTQzYy43ODEwNy43ODEgMi4wNDczNy43ODEgMi44Mjg0NyAwIC43ODEtLjc4MTEuNzgxLTIuMDQ3NCAwLTIuODI4NDdsLTEuNDE0My0xLjQxNDIxYy0uMzY4NC0uMzY4NDUtLjg0NDgtLjU2MzA4LTEuMzI3MzctLjU4MzkxLS4wNjU1NS4xNTE3My0uMTQwOTMuMzAwMjQtLjIyNjE2LjQ0NDU0bDEuODQ2NDMgMS44NDY0NS0xLjQxNDIgMS40MTQyem0tLjYxOC00Ljg2MDY0Yy4zNjg0NC4zNjg0NS41NjMwOC44NDQ4OC41ODM5MSAxLjMyNzQyLS4xNTE3NC4wNjU1NC0uMzAwMjQuMTQwOTMtLjQ0NDU0LjIyNjE1bC0xLjkxNzU0LTEuOTE3NTMtMS40MTQyMSAxLjQxNDIxIDEuOTE3NTMgMS45MTc1M2MtLjA4NTIzLjE0NDMxLS4xNjA2MS4yOTI4Mi0uMjI2MTYuNDQ0NTYtLjQ4MjU0LS4wMjA4My0uOTU4OTctLjIxNTQ3LTEuMzI3NDItLjU4MzkxbC0xLjQxNDIxLTEuNDE0MjJjLS43ODEwNS0uNzgxMDUtLjc4MTA1LTIuMDQ3MzcgMC0yLjgyODQyczIuMDQ3MzctLjc4MTA1IDIuODI4NDIgMHoiIGZpbGw9IiNkN2NkYmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
+ }
+
+ .tree .icon-go {
+ background-image:
+ /* go */
+ url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iI2Q3Y2RiZiIvPjwvc3ZnPg==");
+ }
+}
diff --git a/static/svg/collapse.svg b/static/svg/collapse.svg
deleted file mode 100644
index 4107823..0000000
--- a/static/svg/collapse.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/static/svg/dark/collapse.svg b/static/svg/dark/collapse.svg
new file mode 100644
index 0000000..7850db9
--- /dev/null
+++ b/static/svg/dark/collapse.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/svg/expand.svg b/static/svg/dark/expand.svg
similarity index 65%
rename from static/svg/expand.svg
rename to static/svg/dark/expand.svg
index 86734ba..9f0b75b 100644
--- a/static/svg/expand.svg
+++ b/static/svg/dark/expand.svg
@@ -1,4 +1,4 @@
diff --git a/static/svg/go.svg b/static/svg/dark/go.svg
similarity index 86%
rename from static/svg/go.svg
rename to static/svg/dark/go.svg
index 729d94e..47012df 100644
--- a/static/svg/go.svg
+++ b/static/svg/dark/go.svg
@@ -1,5 +1,5 @@
diff --git a/static/svg/dark/leaf.svg b/static/svg/dark/leaf.svg
new file mode 100644
index 0000000..e63920d
--- /dev/null
+++ b/static/svg/dark/leaf.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/svg/permalink.svg b/static/svg/dark/permalink.svg
similarity index 97%
rename from static/svg/permalink.svg
rename to static/svg/dark/permalink.svg
index ccb7598..94ef83d 100644
--- a/static/svg/permalink.svg
+++ b/static/svg/dark/permalink.svg
@@ -1,5 +1,5 @@
diff --git a/static/svg/leaf.svg b/static/svg/leaf.svg
deleted file mode 100644
index b857405..0000000
--- a/static/svg/leaf.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/static/svg/light/collapse.svg b/static/svg/light/collapse.svg
new file mode 100644
index 0000000..313d471
--- /dev/null
+++ b/static/svg/light/collapse.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/svg/light/expand.svg b/static/svg/light/expand.svg
new file mode 100644
index 0000000..0037db6
--- /dev/null
+++ b/static/svg/light/expand.svg
@@ -0,0 +1,4 @@
+
diff --git a/static/svg/light/go.svg b/static/svg/light/go.svg
new file mode 100644
index 0000000..997abcd
--- /dev/null
+++ b/static/svg/light/go.svg
@@ -0,0 +1,5 @@
+
diff --git a/static/svg/light/leaf.svg b/static/svg/light/leaf.svg
new file mode 100644
index 0000000..7c29595
--- /dev/null
+++ b/static/svg/light/leaf.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/svg/light/permalink.svg b/static/svg/light/permalink.svg
new file mode 100644
index 0000000..69e5546
--- /dev/null
+++ b/static/svg/light/permalink.svg
@@ -0,0 +1,5 @@
+