diff --git a/css/post-toc.css b/css/post-toc.css
index 6cd3595f..f5e2d747 100644
--- a/css/post-toc.css
+++ b/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 */
diff --git a/src/img/2026/tree-styling-0.png b/src/img/2026/tree-styling-0.png
deleted file mode 100644
index cced6f91..00000000
Binary files a/src/img/2026/tree-styling-0.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-1.png b/src/img/2026/tree-styling-1.png
deleted file mode 100644
index a814c305..00000000
Binary files a/src/img/2026/tree-styling-1.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-2.png b/src/img/2026/tree-styling-2.png
deleted file mode 100644
index d6bf7a60..00000000
Binary files a/src/img/2026/tree-styling-2.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-3.png b/src/img/2026/tree-styling-3.png
deleted file mode 100644
index 314ec715..00000000
Binary files a/src/img/2026/tree-styling-3.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-4.png b/src/img/2026/tree-styling-4.png
deleted file mode 100644
index 13c64c24..00000000
Binary files a/src/img/2026/tree-styling-4.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-5.png b/src/img/2026/tree-styling-5.png
deleted file mode 100644
index ed3f8714..00000000
Binary files a/src/img/2026/tree-styling-5.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-6.png b/src/img/2026/tree-styling-6.png
deleted file mode 100644
index 0eacf322..00000000
Binary files a/src/img/2026/tree-styling-6.png and /dev/null differ
diff --git a/src/img/2026/tree-styling-7.png b/src/img/2026/tree-styling-7.png
deleted file mode 100644
index 933b743f..00000000
Binary files a/src/img/2026/tree-styling-7.png and /dev/null differ
diff --git a/src/posts/2026/2026-09-21-tree-style-toc.md b/src/posts/2026/2026-09-21-tree-style-toc.md
deleted file mode 100644
index 14c4497f..00000000
--- a/src/posts/2026/2026-09-21-tree-style-toc.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-title: tree-style table of contents
-layout: post-with-toc.njk
-image:
- src: 2026/tree-styling-0.png
- alt: "screenshot of the table of contents for a blog post (this blog post, in fact). it's been styled so that the output resembles the hierarchical file system output from the shell program 'tree.'"
-tags:
- - reference
- - software
----
-
-I have a shiny new Table of Contents (hereafter ToC) section for some of my posts (like this one)! And for fun and profit, it's styled like the output of [`tree`](https://en.wikipedia.org/wiki/Tree_(command)). I want to lay out the CSS I used for this. Fair warning, there's some hyper-specific border widths and positioning that *probably* should be a `calc()` function of some kind.
-
-I drew inspiration from this [StackOverflow issue regarding tree styling for lists](https://stackoverflow.com/questions/14423671/best-method-for-displaying-a-tree-list-using-css-only-no-images-or-js-example).
-
-## `tree`
-
-Just for reference, here's some sample `tree` output:
-
-```txt
-.
-├── footer.njk
-├── head-content.njk
-├── header.njk
-├── layouts
-│ ├── base.njk
-│ ├── page-lists.njk
-│ ├── page.njk
-│ ├── post.njk
-│ ├── post-with-toc.njk
-│ └── tag-redirect.njk
-├── pagination.njk
-├── postlist.njk
-└── webring.njk
-```
-
-(You'll note that there are gaps between the verticals of each line. That's due to the line-height on the page, but in a standard terminal those vertical lines would be contiguous.)
-
-## HTML
-
-Our ToC uses the following HTML structure:
-
-```html
-
-```
-
-We can ignore the `