make it more obvious when a branch has more content to it

content/about.tree

@@ -2,7 +2,7 @@
 - hello! I am liquidex
 
     % id = "01H89P3CH8YZY1MTZS3DZGGFKX"
-    + also known as… (click to expand)
+    + also known as…
 
         % id = "01H89P3CH8GAHS8DDW1HHEWA3P"
         - liquidex (just including this here for linking sake)
@@ -36,13 +36,13 @@
         + I work in the game industry
 
             % id = "01H89P3CH88PKW82498V91VZ4W"
-            - somehow my skills brought me to work at CD PROJEKT RED
+            + somehow my skills brought me to work as a game programmer at CD PROJEKT RED
 
                 % id = "01H89P3CH8SPX5RZDWR00CZ436"
-                - not sure how that happened still so don't ask but
+                + not sure how that happened still so don't ask
 
-                % id = "01H89P3CH8P36XFC0F6KB5G477"
-                - I work there as a programmer on the new Witcher game
+                    % id = "01H8YJDNJFB2BGT0ASDNM8S4JJ"
+                    - impostor syndrome going hard right now
 
         % id = "01H89P3CH8QSQY1M7TZVH1FYQM"
         - but that game programming thing is just coincidence, in reality I love toying with

crates/treehouse/src/html/tree.rs

@@ -111,7 +111,13 @@ pub fn branch_to_html(
             },
             Some(broken_link_callback),
         );
+        if has_children {
+            s.push_str("<span class=\"branch-summary\">")
+        }
         markdown::push_html(s, treehouse, config, markdown_parser);
+        if has_children {
+            s.push_str("</span>")
+        }
 
         if let Content::Link(link) = &branch.attributes.content {
             write!(

static/css/tree.css

@@ -95,6 +95,23 @@
         url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiM1NTQyM2UiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
 }
 
+.tree details:not([open])>summary>.branch-summary>:last-child::after {
+    content: '';
+    display: inline-block;
+
+    background-image:
+        /* more */
+        url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQgNiA0IDQgNC00IiBmaWxsPSJub25lIiBzdHJva2U9IiM1NTQyM2UiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+
+    width: 16px;
+    height: 1.2em;
+
+    vertical-align: text-bottom;
+    margin-left: 0.5em;
+}
+
 @media (hover: none) {
 
     .tree li>div:first-child,
@@ -207,4 +224,10 @@
             /* go */
             url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iI2Q3Y2RiZiIvPjwvc3ZnPg==");
     }
+
+    .tree details:not([open])>summary>.branch-summary>:last-child::after {
+        background-image:
+            /* more */
+            url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQgNiA0IDQgNC00IiBmaWxsPSJub25lIiBzdHJva2U9IiNkN2NkYmYiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
+    }
 }

static/svg/dark/more.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 6L8 10L12 6" fill="none" stroke="#d7cdbf" stroke-opacity="0.5" stroke-width="2" />
+</svg>

static/svg/light/more.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 6L8 10L12 6" fill="none" stroke="#55423e" stroke-opacity="0.5" stroke-width="2" />
+</svg>