From 913e2c54d3f781e80cb0330a3c21e0a40f5f4b10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Mart=C3=ADnez=20Portela?=
 <sergio@codigoparallevar.com>
Date: Sun, 20 Nov 2022 21:41:07 +0100
Subject: [PATCH] Start exploring CSS design for tree view.

Heavily based on https://iamkate.com/code/tree-views/ .
---
 static/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 3 deletions(-)

diff --git a/static/style.css b/static/style.css
index 824a8d8..dc08765 100644
--- a/static/style.css
+++ b/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 */