static: add basic file tree view

static/flexbox/treeview.css

@@ -0,0 +1,91 @@
+/* https://iamkate.com/code/tree-views/ */
+
+/* Custom properties */
+
+.tree {
+  --spacing : 1.0rem;
+  --radius  : 10px;
+}
+
+/* Padding */
+
+.tree li {
+  display      : block;
+  position     : relative;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px);
+}
+
+.tree ul {
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 0;
+}
+
+/* Vertical lines */
+
+.tree ul li {
+  border-left : 2px solid #ddd;
+}
+
+.tree ul li:last-child {
+  border-color : transparent;
+}
+
+/* Horizontal lines */
+
+.tree ul li::before {
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) / -2);
+  left         : -2px;
+  width        : calc(var(--spacing) + 2px);
+  height       : calc(var(--spacing) + 1px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+/* Summaries */
+
+.tree summary {
+  display : block;
+  cursor  : pointer;
+}
+
+.tree summary::marker,
+.tree summary::-webkit-details-marker {
+  display : none;
+}
+
+.tree summary:focus {
+  outline : none;
+}
+
+.tree summary:focus-visible {
+  outline : 1px dotted #000;
+}
+
+/* Markers */
+
+.tree li::after,
+.tree summary::before {
+  content       : '';
+  display       : block;
+  position      : absolute;
+  top           : calc(var(--spacing) / 2 - var(--radius));
+  left          : calc(var(--spacing) - var(--radius) - 1px);
+  width         : calc(2 * var(--radius));
+  height        : calc(2 * var(--radius));
+  border-radius : 50%;
+  background    : #ddd;
+}
+
+/* Expand and collapse buttons */
+
+.tree summary::before {
+  z-index    : 1;
+  background : #696 url('../img/expand-collapse.svg') 0 0;
+}
+
+.tree details[open] > summary::before {
+  background-position : calc(-2 * var(--radius)) 0;
+}