update tree styling to box method

css/post-toc.css

@@ -51,40 +51,43 @@
 	top: -1.25rem;
 }
 
-/* my baby my child my `tree` list style */
-#toc ol,
-#toc li {
-	margin-block: 0;
-	list-style: none;
+/* `tree` style toc */
+#toc nav > ol {
+	margin-left: 1rem;
 }
 
 #toc ol {
-	margin-left: 0;
+	margin: 0;
 }
 
 #toc li {
-	border-left: .095rem solid var(--color-pink);
-	margin-left: 1.5rem;
-	line-height: 1.15;
-	text-indent: 1.22rem hanging;
+	position: relative;
+	padding-inline-start: 1em;
+	list-style: none;
+	margin-block: 0;
+	margin-left: .35rem;
+}
+
+#toc li::before,
+#toc li::after {
+	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	inset-block: 0 auto;
+	inset-inline: 0 auto;
+	inline-size: .75em;
+	border-inline-start: .1rem solid var(--color-pink);
 }
 
 #toc li::before {
-	content: '├─' / "";
-	color: var(--color-pink);
-	position: relative;
-	left: -.34rem;
+	block-size: .5lh;
+	border-block-end: .1rem solid var(--color-pink);
+	content: "";
 }
 
-#toc li:last-child {
-	border-left-color: transparent;
-}
-
-#toc li:last-child::before {
-	/* Technically, we could use this content for all of them, but doing the full
-	bar for the non-last-childs keeps the border a *smidge* more consistent for
-	different levels of magnification */
-	content: '└─' / "";
+#toc li:not(:last-child)::after {
+	block-size: 100%;
+	content: "";
 }
 
 /* underlines are unnecessary in this context */