some more usability improvements

static/css/main.css

@@ -137,6 +137,9 @@ blockquote {
 
 /* And tables. */
 
+table {
+    margin: 8px 0;
+}
 
 table,
 th,

static/css/tree.css

@@ -6,6 +6,14 @@
 
 /* Make the tree have + and - instead of the default details/summary arrow */
 
+.tree {
+    --tree-icon-position: 8px 50%;
+    --tree-icon-space: 28px;
+
+    /* I have no clue why this works, deal with it */
+    --tree-hover-expansion: 0.01px;
+}
+
 .tree details>summary {
     list-style: none;
     cursor: pointer;
@@ -18,17 +26,27 @@
 .tree details>summary {
     background-image: url('../svg/expand.svg');
     background-repeat: no-repeat;
-    background-position: 0px 50%;
-    padding-left: 24px;
-    margin-left: -24px;
+    background-position: var(--tree-icon-position);
+    padding-left: var(--tree-icon-space);
+    margin-left: calc(- var(--tree-icon-space));
+
+    padding-top: var(--tree-hover-expansion);
+    padding-bottom: var(--tree-hover-expansion);
+    border-radius: 8px;
+
+    background-color: rgba(0, 0, 0, 0%);
+}
+
+.tree details>summary:hover {
+    background-color: rgba(0, 0, 0, 5%);
 }
 
 .tree li.leaf {
     background-image: url('../svg/leaf.svg');
     background-repeat: no-repeat;
-    background-position: 0px 50%;
-    padding-left: 24px;
-    margin-left: -24px;
+    background-position: var(--tree-icon-position);
+    padding-left: var(--tree-icon-space);
+    margin-left: calc(- var(--tree-icon-space));
 }
 
 .tree details[open]>summary {

static/js/usability.js

@@ -1,4 +1,4 @@
-// Bits and pieces to make vanilla HTML just a bit more usable.
+// Bits and pieces to make the treehouse just a bit more easy to explore.
 
 // We want to let the user have a selection on collapsible blocks without collapsing them when
 // the user finishes marking their selection.

static/svg/expand.svg

@@ -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 5V3H5V5H3V7H5V9H7V7H9V5H7Z" fill="currentColor"
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="currentColor"
         fill-opacity="0.3" />
 </svg>