From dccfddaec1e92929451922ac064add9aaee77813 Mon Sep 17 00:00:00 2001 From: lqdev Date: Sun, 27 Aug 2023 17:01:27 +0200 Subject: [PATCH] crunch SVGs into the CSS --- content/about.tree | 2 +- static/css/main.css | 22 ++++++++-- static/css/tree.css | 62 ++++++++++++++++++++++++----- static/svg/collapse.svg | 3 -- static/svg/dark/collapse.svg | 3 ++ static/svg/{ => dark}/expand.svg | 4 +- static/svg/{ => dark}/go.svg | 2 +- static/svg/dark/leaf.svg | 3 ++ static/svg/{ => dark}/permalink.svg | 2 +- static/svg/leaf.svg | 3 -- static/svg/light/collapse.svg | 3 ++ static/svg/light/expand.svg | 4 ++ static/svg/light/go.svg | 5 +++ static/svg/light/leaf.svg | 3 ++ static/svg/light/permalink.svg | 5 +++ 15 files changed, 102 insertions(+), 24 deletions(-) delete mode 100644 static/svg/collapse.svg create mode 100644 static/svg/dark/collapse.svg rename static/svg/{ => dark}/expand.svg (65%) rename static/svg/{ => dark}/go.svg (86%) create mode 100644 static/svg/dark/leaf.svg rename static/svg/{ => dark}/permalink.svg (97%) delete mode 100644 static/svg/leaf.svg create mode 100644 static/svg/light/collapse.svg create mode 100644 static/svg/light/expand.svg create mode 100644 static/svg/light/go.svg create mode 100644 static/svg/light/leaf.svg create mode 100644 static/svg/light/permalink.svg 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 @@ + fill="#d7cdbf" /> 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 @@ + fill="#d7cdbf" /> 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 @@ + + +