inherentlee/leecat.art
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fuck spacing and tabs all my homies hate spacing and tabs
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
inherentlee committed 2026-09-21 12:27:30 -07:00
1 parent f5bbda1f14
commit 7d042abe1d
1 file changed
+28 -28
Download Patch File Download Diff File Expand all files Collapse all files
src/posts/2026/2026-09-21-tree-style-toc.md
+28 -28
View File
@@ -74,8 +74,8 @@ By default, my lists have a lot of space around them for legibility when reading
```css ```css
#toc ol, #toc ol,
#toc li { #toc li {
margin-block: 0; margin-block: 0;
list-style: none; list-style: none;
} }
``` ```
@@ -95,7 +95,7 @@ Those are super off. First, they're tabbed too far in to the left; second, there
```css ```css
#toc ol { #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 ```css
#toc li::before { #toc li::before {
content: '├─'; content: '├─';
color: var(--color-pink); color: var(--color-pink);
} }
``` ```
@@ -117,7 +117,7 @@ Notably, without additional positioning, the bars will be spaced away from the b
```css ```css
#toc li::before { #toc li::before {
position: relative; 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 ```css
#toc li:last-child { #toc li:last-child {
border-left-color: transparent; border-left-color: transparent;
} }
#toc li:last-child::before { #toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full /* 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 bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */ different levels of magnification */
content: '└─'; content: '└─';
} }
``` ```
@@ -169,7 +169,7 @@ We can fix this with a hanging indent.
```css ```css
#toc li { #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 ```css
#toc ol, #toc ol,
#toc li { #toc li {
margin-block: 0; margin-block: 0;
list-style: none; list-style: none;
} }
#toc ol { #toc ol {
margin-left: 0; margin-left: 0;
} }
#toc li { #toc li {
border-left: .095rem solid var(--color-pink); border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem; margin-left: 1.5rem;
line-height: 1.15; line-height: 1.15;
text-indent: 1.22rem hanging; text-indent: 1.22rem hanging;
} }
#toc li::before { #toc li::before {
content: '├─'; content: '├─';
color: var(--color-pink); color: var(--color-pink);
position: relative; position: relative;
left: -.34rem; left: -.34rem;
} }
#toc li:last-child { #toc li:last-child {
border-left-color: transparent; border-left-color: transparent;
} }
#toc li:last-child::before { #toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full /* 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 bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */ different levels of magnification */
content: '└─'; content: '└─';
} }
``` ```