crunch SVGs into the CSS

This commit is contained in:
liquidex 2023-08-27 17:01:27 +02:00
parent cebc6edfe7
commit dccfddaec1
15 changed files with 102 additions and 24 deletions

View file

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

View file

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

View file

@ -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==");
}
}

View file

@ -1,3 +0,0 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<line x1="3" y1="6" x2="9" y2="6" stroke="currentColor" stroke-width="2" stroke-opacity="0.3" />
</svg>

Before

Width:  |  Height:  |  Size: 172 B

View file

@ -0,0 +1,3 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<line x1="3" y1="6" x2="9" y2="6" stroke="#d7cdbf" stroke-width="2" stroke-opacity="0.5" />
</svg>

After

Width:  |  Height:  |  Size: 167 B

View file

@ -1,4 +1,4 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="currentColor"
fill-opacity="0.3" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="#d7cdbf"
fill-opacity="0.5" />
</svg>

Before

Width:  |  Height:  |  Size: 207 B

After

Width:  |  Height:  |  Size: 202 B

View file

@ -1,5 +1,5 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5858 7L8.29291 4.70711L9.70712 3.29289L14.4142 8L9.70712 12.7071L8.29291 11.2929L10.5858 9H3V7H10.5858Z"
fill="currentColor" />
fill="#d7cdbf" />
</svg>

Before

Width:  |  Height:  |  Size: 232 B

After

Width:  |  Height:  |  Size: 227 B

3
static/svg/dark/leaf.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="2" fill="#d7cdbf" fill-opacity="0.5" />
</svg>

After

Width:  |  Height:  |  Size: 140 B

View file

@ -1,5 +1,5 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.65686 2L9.07107 3.41422C9.75158 4.09473 10.1356 4.95943 10.2232 5.84784C11.1116 5.93544 11.9763 6.31949 12.6569 7L14.0711 8.41422C15.6332 9.97631 15.6332 12.509 14.0711 14.0711C12.509 15.6332 9.97631 15.6332 8.41422 14.0711L7 12.6569C6.31949 11.9763 5.93544 11.1116 5.84784 10.2232C4.95943 10.1356 4.09473 9.75158 3.41422 9.07107L2 7.65686C0.437906 6.09476 0.437906 3.5621 2 2C3.5621 0.437906 6.09476 0.437906 7.65686 2ZM8.27486 9.68907C8.13056 9.77429 7.98205 9.84968 7.83031 9.91523C7.85114 10.3978 8.04577 10.8742 8.41422 11.2426L9.82843 12.6569C10.6095 13.4379 11.8758 13.4379 12.6569 12.6569C13.4379 11.8758 13.4379 10.6095 12.6569 9.82843L11.2426 8.41422C10.8742 8.04577 10.3978 7.85114 9.91523 7.83031C9.84968 7.98204 9.7743 8.13055 9.68907 8.27485L11.5355 10.1213L10.1213 11.5355L8.27486 9.68907ZM7.65686 4.82843C8.0253 5.19688 8.21994 5.67331 8.24077 6.15585C8.08903 6.22139 7.94053 6.29678 7.79623 6.382L5.87869 4.46447L4.46448 5.87868L6.38201 7.79621C6.29678 7.94052 6.2214 8.08903 6.15585 8.24077C5.67331 8.21994 5.19688 8.0253 4.82843 7.65686L3.41422 6.24264C2.63317 5.46159 2.63317 4.19527 3.41422 3.41422C4.19527 2.63317 5.46159 2.63317 6.24264 3.41422L7.65686 4.82843Z"
fill="currentColor" />
fill="#d7cdbf" />
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -1,3 +0,0 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="2" fill="currentColor" fill-opacity="0.3" />
</svg>

Before

Width:  |  Height:  |  Size: 145 B

View file

@ -0,0 +1,3 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<line x1="3" y1="6" x2="9" y2="6" stroke="#55423e" stroke-width="2" stroke-opacity="0.5" />
</svg>

After

Width:  |  Height:  |  Size: 167 B

View file

@ -0,0 +1,4 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="#55423e"
fill-opacity="0.5" />
</svg>

After

Width:  |  Height:  |  Size: 202 B

5
static/svg/light/go.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5858 7L8.29291 4.70711L9.70712 3.29289L14.4142 8L9.70712 12.7071L8.29291 11.2929L10.5858 9H3V7H10.5858Z"
fill="#55423e" />
</svg>

After

Width:  |  Height:  |  Size: 227 B

View file

@ -0,0 +1,3 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="2" fill="#55423e" fill-opacity="0.5" />
</svg>

After

Width:  |  Height:  |  Size: 140 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.65686 2L9.07107 3.41422C9.75158 4.09473 10.1356 4.95943 10.2232 5.84784C11.1116 5.93544 11.9763 6.31949 12.6569 7L14.0711 8.41422C15.6332 9.97631 15.6332 12.509 14.0711 14.0711C12.509 15.6332 9.97631 15.6332 8.41422 14.0711L7 12.6569C6.31949 11.9763 5.93544 11.1116 5.84784 10.2232C4.95943 10.1356 4.09473 9.75158 3.41422 9.07107L2 7.65686C0.437906 6.09476 0.437906 3.5621 2 2C3.5621 0.437906 6.09476 0.437906 7.65686 2ZM8.27486 9.68907C8.13056 9.77429 7.98205 9.84968 7.83031 9.91523C7.85114 10.3978 8.04577 10.8742 8.41422 11.2426L9.82843 12.6569C10.6095 13.4379 11.8758 13.4379 12.6569 12.6569C13.4379 11.8758 13.4379 10.6095 12.6569 9.82843L11.2426 8.41422C10.8742 8.04577 10.3978 7.85114 9.91523 7.83031C9.84968 7.98204 9.7743 8.13055 9.68907 8.27485L11.5355 10.1213L10.1213 11.5355L8.27486 9.68907ZM7.65686 4.82843C8.0253 5.19688 8.21994 5.67331 8.24077 6.15585C8.08903 6.22139 7.94053 6.29678 7.79623 6.382L5.87869 4.46447L4.46448 5.87868L6.38201 7.79621C6.29678 7.94052 6.2214 8.08903 6.15585 8.24077C5.67331 8.21994 5.19688 8.0253 4.82843 7.65686L3.41422 6.24264C2.63317 5.46159 2.63317 4.19527 3.41422 3.41422C4.19527 2.63317 5.46159 2.63317 6.24264 3.41422L7.65686 4.82843Z"
fill="#55423e" />
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB