Start exploring CSS design for tree view.

Heavily based on https://iamkate.com/code/tree-views/ .

static/style.css

@@ -136,7 +136,6 @@ body nav input {
 
 /* Node styling */
 .node {
-    max-width: min(650px, 100ex);
     margin: 0 auto;
 }
 
@@ -149,6 +148,73 @@ body nav input {
     display: none;
 }
 
+/* Item list */
+.node .contents ul {
+    --tree-spacing : 1rem;
+    --tree-line-separation: 0.5rem;
+    --tree-color: #ccc;
+    --tree-border-radius: 10px;
+    list-style: none;
+    /* margin-left: var(--tree-spacing); */
+}
+
+.node .contents ul li {
+    position: relative;
+}
+
+.node .contents ul li::after {
+    content: '●';
+    color: var(--tree-color);
+    position: absolute;
+    /* left: calc(var(--tree-spacing) - 0.5ex); */
+    /* Shown on right */
+    left: -1ex;
+    /* Shown on left */
+    top: calc(-0.5ex - 2px);
+}
+
+.node .contents ul li::before {
+    content: ' ';
+    width: var(--tree-spacing);
+    display: inline-block;
+    border-bottom: 2px solid var(--tree-color);
+    vertical-align: super;
+    margin-right: var(--tree-line-separation);
+}
+
+/* Nested item list */
+.node .contents ul ul {
+    padding: 0;
+    margin-left: calc(var(--tree-spacing));
+}
+
+.node .contents ul ul li {
+    /* margin-left: 1ex; */
+    border-left: 2px solid var(--tree-color);
+}
+
+.node .contents ul ul li::after {
+    left: calc(var(--tree-spacing) * 2 - 0.5ex);
+}
+
+.node .contents ul ul li::before {
+    width: calc(var(--tree-spacing) * 2);
+    height: calc(var(--tree-spacing) + 5px);
+    margin-top: -100%;
+    border-radius: 0;
+    top: calc(-0.5ex - 2px);
+    border-left: 2px solid var(--tree-color);
+    margin-left: -2px;
+}
+
+.node .contents ul ul li:last-child::before {
+    border-bottom-left-radius: var(--tree-border-radius);
+}
+
+.node .contents ul li:last-child {
+    border-color: transparent;
+}
+
 .node .node.collapsed > .title::before {
     content: "›";
     vertical-align: text-bottom;
@@ -240,10 +306,10 @@ li .tag::after {
 }
 
 a.internal::before {
-    content: '{ ';
+    content: '{ ';
 }
 a.internal::after {
-    content: ' }';
+    content: ' }';
 }
 
 /* Code blocks */