write an article about my X11/systemd configuration

1 files changed, 41 insertions, 1 deletions

diff --git a/public/assets/style.css b/public/assets/style.css
index 60e7f73..e653c21 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -42,7 +42,7 @@ var {
 	color: #008800;
 }
 
-pre {
+pre, ul.tree {
 	margin: auto 2em;
 	padding: .5em;
 	overflow: auto;
@@ -55,6 +55,46 @@ pre hr {
 	border-top: solid 1px #AAAAAA;
 }
 
+/* lists that look like `tree` output */
+ul.tree {
+	font-family: monospace;
+	background: #DDDDFF;
+}
+ul.tree li {
+	list-style-type: none;
+}
+ul.tree ul {
+	padding-left: 0;
+}
+ul.tree ul li {
+	/* draw the vertical lines */
+	margin-left: calc(0.5ch - 1px);
+	border-left: solid 1px black;
+	/* and indent 4 chars */
+	padding-left: 3.5ch; /* 4ch - 0.5ch for the margin-left above */
+}
+ul.tree ul li::before {
+	/* make a non-empty inline-block element */
+	display: inline-block;
+	content: " "; /* a unicode non-breaking space */
+	/* un-indent */
+	margin-left: calc(-3.5ch - 1px); /* to match the padding-left above */
+	border-left: solid 1px transparent;
+	/* draw the horizontal lines */
+	border-bottom: solid 1px black;
+	top: 0;
+	height: 1ex;
+	width: 2.5ch;
+	margin-right: 1ch;
+}
+ul.tree ul li:last-child {
+	/* let the li::before psuedo-element draw the last part of the vertical line. */
+	border-left: solid 1px transparent;
+}
+ul.tree ul li:last-child::before {
+	border-left: solid 1px black;
+}
+
 /* table elements */
 
 table, td, th {