toc tree styling

css/post-toc.css

@@ -1,9 +1,9 @@
 #toc {
 	float: right;
 	margin: 1rem 0 1.5rem 1.5rem;
-	width: min(calc(100% - 1.5rem), 23rem);
 	/* 23rem is the width of the words 'table of contents' in my header font */
 	/* yes, it's a bit hacky */
+	width: min(calc(100% - 1.5rem), 23rem);
 }
 
 @media (max-width: 850px) {
@@ -28,6 +28,7 @@
 	width: fit-content;
 	background: var(--color-bg);
 	border-radius: .5rem;
+	cursor: pointer;
 }
 
 #toc summary:focus-visible {
@@ -49,25 +50,44 @@
 	top: -1.25rem;
 }
 
+/* my baby my child my `tree` list styling */
+#toc ol,
 #toc li {
-	margin-block: .45rem 0;
+	margin-block: 0;
 }
 
-@media (max-width: 650px) {
-	#toc nav > ol {
-		margin-left: .5rem;
-	}
+#toc ol {
+	margin-left: 0;
+	list-style: none;
 }
 
-/* basically we want to style this `ol` as a `ul` */
-#toc ol > li {
-	list-style: disc;
+#toc li {
+	border-left: .095rem solid var(--color-pink);
+	line-height: 1.2;
+	margin-left: 1.5rem;
 }
 
-#toc ol > li > ol > li {
-	list-style: circle;
+#toc li::before {
+	content: '├─';
+	color: var(--color-pink);
+	position: relative;
+	left: -.34rem;
 }
 
-#toc ol > li > ol > li > ol > li {
-	list-style: square;
+#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: '└─';
+}
+
+/* underlines are unnecessary in this context */
+#toc a {
+	text-decoration: none;
+	color: var(--color-blue);
+	font-weight: bold;
 }