diff --git a/src/posts/2026/2026-09-21-tree-style-toc.md b/src/posts/2026/2026-09-21-tree-style-toc.md index c2d5faa3..75db8853 100644 --- a/src/posts/2026/2026-09-21-tree-style-toc.md +++ b/src/posts/2026/2026-09-21-tree-style-toc.md @@ -74,8 +74,8 @@ By default, my lists have a lot of space around them for legibility when reading ```css #toc ol, #toc li { - margin-block: 0; - list-style: none; + margin-block: 0; + list-style: none; } ``` @@ -95,7 +95,7 @@ Those are super off. First, they're tabbed too far in to the left; second, there ```css #toc ol { - margin-left: 0; + margin-left: 0; } ``` @@ -105,8 +105,8 @@ We're going to use a character (technically two) from the `tree` output and plac ```css #toc li::before { - content: '├─'; - color: var(--color-pink); + content: '├─'; + color: var(--color-pink); } ``` @@ -117,7 +117,7 @@ Notably, without additional positioning, the bars will be spaced away from the b ```css #toc li::before { position: relative; - left: -.34rem; /* I fiddled a lot and this is where I landed */ + left: -.34rem; /* I fiddled a lot and this is where I landed */ } ``` @@ -142,14 +142,14 @@ You've probably noticed that the last children in the tree output had a bend rat ```css #toc li:last-child { - border-left-color: transparent; + 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: '└─'; + /* 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: '└─'; } ``` @@ -169,7 +169,7 @@ We can fix this with a hanging indent. ```css #toc li { - text-indent: 1.22rem hanging; /* Again, I fiddled */ + text-indent: 1.22rem hanging; /* Again, I fiddled */ } ``` @@ -182,36 +182,36 @@ Here's the final collected CSS: ```css #toc ol, #toc li { - margin-block: 0; - list-style: none; + margin-block: 0; + list-style: none; } #toc ol { - margin-left: 0; + margin-left: 0; } #toc li { - border-left: .095rem solid var(--color-pink); - margin-left: 1.5rem; - line-height: 1.15; - text-indent: 1.22rem hanging; + border-left: .095rem solid var(--color-pink); + margin-left: 1.5rem; + line-height: 1.15; + text-indent: 1.22rem hanging; } #toc li::before { - content: '├─'; - color: var(--color-pink); - position: relative; - left: -.34rem; + content: '├─'; + color: var(--color-pink); + position: relative; + left: -.34rem; } #toc li:last-child { - border-left-color: transparent; + 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: '└─'; + /* 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: '└─'; } ```