make it look presentable

content/tree/root.tree

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

static/css/main.css

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

static/css/tree.css

@@ -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');
+}

static/svg/collapse.svg

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

static/svg/expand.svg

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

static/svg/leaf.svg

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

template/index.hbs

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