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

drone build Mon Sep 21 12:24:22 PDT 2026

Browse Source
This commit is contained in:
inherentlee committed 2026-09-21 19:24:22 +00:00
1 parent 74769d24ea
commit 646bc98b32
316 files changed
+3659 -3733
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tree-style-table-of-contents/index.html
+18 -14
View File
@@ -2027,7 +2027,7 @@ switch (currentThemeValue) {
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>aside</span><span class="token punctuation">></span></span></code></pre>
<p>We can ignore the <code>&lt;aside&gt;</code>, <code>&lt;details&gt;</code>, and <code>&lt;nav&gt;</code> components - we're going to focus on the <code>&lt;ol&gt;</code>s and <code>&lt;li&gt;</code>s.</p>
<p>We can ignore the <code>&lt;aside&gt;</code>, <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, and <code>&lt;nav&gt;</code> components - we're going to focus on the <code>&lt;ol&gt;</code>s and <code>&lt;li&gt;</code>s.</p>
<h2 id="css">CSS</h2>
<p>Despite referencing a StackOverflow issue above, I never like to just copy-paste a chunk of StackOverflow code into place. I don't like extraneous CSS, and sometimes there's stuff mixed in there that just isn't necessary. Let's build from the ground up.</p>
<h3 id="remove-styling-that-will-be-in-the-way">remove styling that will be in the way</h3>
@@ -2048,7 +2048,7 @@ switch (currentThemeValue) {
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="li%3A%3Abefore"><code>li::before</code></h3>
<p>We're going to use a character from the <code>tree</code> output and place it before our list items.</p>
<p>We're going to use a character (technically two) from the <code>tree</code> output and place it before our list items.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#toc li::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'├─'</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -2163,45 +2163,49 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="">designing a bag </h2>
<a class="postlink" href="/core-css/">
<h2 data-ha-exclude="">core CSS </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title &#39;This is my cool website&#39;, headers reading things like &#39;This is an h1&#39;, nav items &#39;Nav item 1&#39;, etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
</a>
</li>
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="">intro to wireframing </h2>
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="">gender in data models </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="">eleventy lessons </h2>
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="">redirections </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
</a>
</li>
@@ -2258,6 +2262,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/tree-style-table-of-contents/` was built on 2026-09-21T19:19:24.068Z -->
<!-- This page `/tree-style-table-of-contents/` was built on 2026-09-21T19:24:10.640Z -->
</body>
</html>