make it look presentable

This commit is contained in:
liquidex 2023-08-18 19:25:38 +02:00
parent 91f5187ee6
commit 84ec91042e
7 changed files with 75 additions and 73 deletions

View file

@ -56,7 +56,9 @@
- <https://liquidev.net> also [a link that you have not visited because there is nothing there](https://liquidev.net/nothing-to-see-here-lmfao-did-you-really-expect-me-to-create-such-a-behemoth-of-a-URL)
+ here is my favorite fluffy boy ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png)
+ here is my favorite fluffy boy
- ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png)
- without a hat is also nice uwu
@ -83,21 +85,16 @@
| yep | that's | a table |
| looks | pretty cool | huh |
- sorry for how ugly the table styles look i spent like literally 5 minutes on them please don't jugde them too hard
- well anyways here's a braindump for SVGs
- virgin node
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="2" fill="currentColor"/>
</svg>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="2" fill="currentColor"/></svg>
- collapsed
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2"/>
<line x1="8" y1="4" x2="8" y2="12" stroke="currentColor" stroke-width="2"/>
</svg>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2"/><line x1="8" y1="4" x2="8" y2="12" stroke="currentColor" stroke-width="2"/></svg>
- expanded
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2"/>
</svg>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2"/></svg>

View file

@ -105,10 +105,10 @@ body {
/* Make code examples a little prettier by giving them visual separation from the rest of the page */
pre {
min-width: 70%;
margin-left: 12px;
padding: 8px 12px;
margin: 12px 0;
background-color: rgba(0, 0, 0, 5%);
border-radius: 8px;
}
/* Also don't let images get out of hand */
@ -127,70 +127,28 @@ a:visited {
color: #6c2380;
}
/* The tree indents shouldn't be too spaced out */
/* Make blockquotes a bit prettier */
.tree ul {
padding-left: 24px;
blockquote {
margin: 0;
padding: 2px 12px;
border-left: 4px solid rgba(0, 0, 0, 15%);
}
/* Make the tree have + and - instead of the default details/summary arrow */
/* And tables. */
.tree details>summary {
list-style: none;
cursor: pointer;
table,
th,
td {
border: 1px solid rgba(0, 0, 0, 30%);
border-collapse: collapse;
padding: 4px 10px;
}
.tree li {
list-style: none;
}
/* Also, lone paragraphs should have a bullet point beside to give you a bit of a visual anchor */
.tree li.leaf>p:first-child::before,
/* Lone paragraphs include <pre> elements */
.tree li.leaf>pre:first-child::before {
content: '·';
opacity: 0.5;
display: inline-block;
height: 0;
margin-left: -1.5rem;
width: 1.5rem;
--recursive-mono: 1.0;
font-size: 14px;
}
/* Dirty hack to make pres render the way I want this to */
.tree li.leaf>pre:first-child::before {
transform: translateX(-8px);
}
pre {
transform: translateX(8px);
border-radius: 6px;
}
.tree details::before {
content: '+';
opacity: 0.5;
display: inline-block;
margin-left: -1em;
margin-left: -1.5rem;
width: 1.5rem;
vertical-align: middle;
--recursive-mono: 1.0;
}
.tree details[open]::before {
content: '-';
}
.tree details>*:first-child,
.tree li.leaf>*:first-child {
display: inline-block;
th {
background-color: rgba(0, 0, 0, 5%);
--recursive-wght: 700;
--recursive-casl: 0.5;
}

36
static/css/tree.css Normal file
View file

@ -0,0 +1,36 @@
/* The tree indents shouldn't be too spaced out */
.tree ul {
padding-left: 24px;
}
/* Make the tree have + and - instead of the default details/summary arrow */
.tree details>summary {
list-style: none;
cursor: pointer;
}
.tree li {
list-style: none;
}
.tree details>summary {
background-image: url('../svg/expand.svg');
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 24px;
margin-left: -24px;
}
.tree li.leaf {
background-image: url('../svg/leaf.svg');
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 24px;
margin-left: -24px;
}
.tree details[open]>summary {
background-image: url('../svg/collapse.svg');
}

3
static/svg/collapse.svg Normal file
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="currentColor" stroke-width="2" stroke-opacity="0.3" />
</svg>

After

Width:  |  Height:  |  Size: 172 B

4
static/svg/expand.svg Normal file
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 5V3H5V5H3V7H5V9H7V7H9V5H7Z" fill="currentColor"
fill-opacity="0.3" />
</svg>

After

Width:  |  Height:  |  Size: 205 B

3
static/svg/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="currentColor" fill-opacity="0.3" />
</svg>

After

Width:  |  Height:  |  Size: 145 B

View file

@ -8,6 +8,7 @@
<title>{{ config.user.title }}</title>
<link rel="stylesheet" href="{{ site }}/static/css/main.css">
<link rel="stylesheet" href="{{ site }}/static/css/tree.css">
<link rel="stylesheet" href="{{ site }}/static/font/font.css">
<script type="module" src="{{ site }}/static/js/usability.js"></script>