Initial rendering of the node tree

static/less/Makefile

@@ -0,0 +1,11 @@
+less = $(wildcard *.less)
+_css  = $(less:.less=.css)
+css  = $(addprefix ../css/, $(_css) )
+
+../css/%.css: %.less
+	lessc $< $@
+
+all: $(css)
+
+clean:
+	rm -vf $(css)

static/less/loop_make.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+while true
+do
+	# inotifywait -q -e MOVE_SELF *less
+	inotifywait -q -e MODIFY *less
+	#sleep 0.5
+	clear
+	if make -j12; then
+		echo -e "\n\e[32;1mOK!\e[0m"
+		curl -s http://notes.lan:1371/css_updated
+		sleep 1
+		clear
+	fi
+done

static/less/main.less

@@ -0,0 +1,94 @@
+html {
+	box-sizing: border-box;
+	font-family: sans-serif;
+	font-size: 14pt;
+	margin: 0px;
+	padding: 0px;
+}
+
+body {
+	margin: 0px;
+	padding: 0px;
+	background-color: #333;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+*:focus {
+	outline: none;
+}
+
+[onClick] {
+	cursor: pointer;
+}
+
+#nodes {
+	background-color: #fff;
+	padding: 32px;
+	border-radius: 8px;
+	margin: 32px;
+	width: min-content;
+}
+
+.node {
+	display: grid;
+	grid-template-columns: min-content min-content 100%;
+	white-space: nowrap;
+
+	img {
+		height: 24px;
+	}
+
+	&.expanded  {
+		&>.children {
+			display: block;
+		}
+	}
+
+	.expand-status {
+		padding-left: 8px;
+		padding-right: 8px;
+
+		&.leaf {
+			width: 36px;
+			img {
+				display: none;
+			}
+		}
+
+		img {
+			cursor: pointer;
+		}
+	}
+
+	.icon {
+		padding-right: 8px;
+
+		img {
+			filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
+		}
+	}
+
+	.name {
+		margin-bottom: 8px;
+		line-height: 24px;
+	}
+
+	.children {
+		display: none;
+		grid-column: 1 / -1;
+		border-left: 1px solid #ccc;
+		padding-left: 12px;
+		margin-left: 19px;
+
+		/*
+		&.expanded {
+			display: block;
+		}
+		*/
+	}
+}