some more usability improvements

content/tree/root.tree

@@ -62,6 +62,8 @@
 
                         - ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png)
 
+                        - wow he very beeg
+
                         - without a hat is also nice uwu
 
                     - also a block quote

crates/treehouse-format/src/ast.rs

@@ -1,7 +1,7 @@
 use std::ops::Range;
 
 use crate::{
-    pull::{BranchEvent, BranchKind, Parser},
+    pull::{Attributes, BranchEvent, BranchKind, Parser},
     ParseError, ParseErrorKind,
 };
 
@@ -26,7 +26,7 @@ impl Roots {
 #[derive(Debug, Clone)]
 pub struct Branch {
     pub indent_level: usize,
-    pub attributes: Range<usize>,
+    pub attributes: Option<Attributes>,
     pub kind: BranchKind,
     pub kind_span: Range<usize>,
     pub content: Range<usize>,

crates/treehouse-format/src/pull.rs

@@ -25,7 +25,13 @@ pub struct BranchEvent {
     pub kind: BranchKind,
     pub kind_span: Range<usize>,
     pub content: Range<usize>,
-    pub attributes: Range<usize>,
+    pub attributes: Option<Attributes>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Attributes {
+    pub percent: Range<usize>,
+    pub data: Range<usize>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -100,11 +106,15 @@ impl<'a> Parser<'a> {
         let attributes = if self.current() == Some('%') {
             let start = self.position;
             self.advance();
+            let after_percent = self.position;
             self.eat_indented_lines_until(indent_level, |c| c == '-' || c == '+')?;
             let end = self.position;
-            start..end
+            Some(Attributes {
+                percent: start..after_percent,
+                data: after_percent..end,
+            })
         } else {
-            self.position..self.position
+            None
         };
 
         let kind_start = self.position;

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%;
+    background-position: var(--tree-icon-position);
-    padding-left: 24px;
+    padding-left: var(--tree-icon-space);
-    margin-left: -24px;
+    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%;
+    background-position: var(--tree-icon-position);
-    padding-left: 24px;
+    padding-left: var(--tree-icon-space);
-    margin-left: -24px;
+    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>