drone build Mon Sep 21 12:28:02 PDT 2026
This commit is contained in:
inherentlee committed
1 parent
646bc98b32
commit
bf217f9880
299 files changed
+3629
-3579
No files matched your search
@@ -2034,8 +2034,8 @@ switch (currentThemeValue) {
|
||||
<p>By default, my lists have a lot of space around them for legibility when reading longer list items. We'll be accomplishing the vertical bars with borders here, so it's critical we not have any block-oriented spacing on <code><ol></code>s and <code><li></code>s. We're also going to take the numeric <code>list-style</code> off.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">#toc ol,
|
||||
#toc li</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<h3 id="start-the-structure-with-borders">start the structure with borders</h3>
|
||||
<p>The <code>tree</code>-like structure will be accomplished with both symbols (stolen directly from the tree output) and borders. Let's throw some borders on.</p>
|
||||
@@ -2045,19 +2045,19 @@ switch (currentThemeValue) {
|
||||
<p><img src="/img/tree-styling-1.png" alt="Phase 1. There are thin pink vertical left-side borders for the list item elements, create long contiguous vertical lines. They are directly next to the list items with no spacing." loading="lazy" decoding="async" width="604" height="236"></p>
|
||||
<p>Those are super off. First, they're tabbed too far in to the left; second, there's <em>no</em> space between the border and the list item. We're going to fix the first thing by removing left margins on the <code><ol></code>s. The second is where we pull in the most critical piece of infrastructure.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">#toc ol</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<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 (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>
|
||||
<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>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<p>Notably, without additional positioning, the bars will be spaced away from the border. We want them to overlap perfectly.</p>
|
||||
<p><img src="/img/tree-styling-2.png" alt="Phase 2, shown with the new characters before any positioning adjustment. There are tree line leaders before each list item, but they are a few pixels off from overlapping with the border." loading="lazy" decoding="async" width="598" height="224"></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">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> -.34rem<span class="token punctuation">;</span> <span class="token comment">/* I fiddled a lot and this is where I landed */</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> -.34rem<span class="token punctuation">;</span> <span class="token comment">/* I fiddled a lot and this is where I landed */</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<p><img src="/img/tree-styling-3.png" alt="Phase 3. The tree line leaders now perfectly overlap the border and it looks like a contiguous vertical line with small tabs inwards." loading="lazy" decoding="async" width="607" height="229"></p>
|
||||
<h3 id="adjust-left-margins">adjust left margins</h3>
|
||||
@@ -2070,14 +2070,14 @@ switch (currentThemeValue) {
|
||||
<h3 id="fix-those-pesky-last-children">fix those pesky last children</h3>
|
||||
<p>You've probably noticed that the last children in the tree output had a bend rather than the T-shape we've been using. We'll want to remove the border from the last children and change the character we're using.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">#toc li:last-child</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-left-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
|
||||
<span class="token property">border-left-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#toc li:last-child::before</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">/* 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 */</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 comment">/* 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 */</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 punctuation">}</span></code></pre>
|
||||
<p>With that, it starts to look complete!</p>
|
||||
<p><img src="/img/tree-styling-5.png" alt="Phase 5, almost done. The last children no longer have a border that continues onward as though there will be more children." loading="lazy" decoding="async" width="598" height="227"></p>
|
||||
@@ -2087,44 +2087,44 @@ switch (currentThemeValue) {
|
||||
<p>(And for the record, this happens for middle children too, it's not just a last child issue.)</p>
|
||||
<p>We can fix this with a hanging indent.</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">#toc li</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">text-indent</span><span class="token punctuation">:</span> 1.22rem hanging<span class="token punctuation">;</span> <span class="token comment">/* Again, I fiddled */</span>
|
||||
<span class="token property">text-indent</span><span class="token punctuation">:</span> 1.22rem hanging<span class="token punctuation">;</span> <span class="token comment">/* Again, I fiddled */</span>
|
||||
<span class="token punctuation">}</span></code></pre>
|
||||
<p><img src="/img/tree-styling-7.png" alt="Final version with the hanging indent implemented. Now the second line of text for this header lines up nicely with the start of the text above it." loading="lazy" decoding="async" width="608" height="408"></p>
|
||||
<h2 id="summary">summary</h2>
|
||||
<p>Here's the final collected CSS:</p>
|
||||
<pre class="language-css"><code class="language-css"><span class="token selector">#toc ol,
|
||||
#toc li</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#toc ol</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#toc li</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-left</span><span class="token punctuation">:</span> .095rem solid <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">margin-left</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
|
||||
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.15<span class="token punctuation">;</span>
|
||||
<span class="token property">text-indent</span><span class="token punctuation">:</span> 1.22rem hanging<span class="token punctuation">;</span>
|
||||
<span class="token property">border-left</span><span class="token punctuation">:</span> .095rem solid <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token property">margin-left</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
|
||||
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.15<span class="token punctuation">;</span>
|
||||
<span class="token property">text-indent</span><span class="token punctuation">:</span> 1.22rem hanging<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<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>
|
||||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> -.34rem<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>
|
||||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> -.34rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#toc li:last-child</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">border-left-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
|
||||
<span class="token property">border-left-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token selector">#toc li:last-child::before</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">/* 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 */</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 comment">/* 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 */</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 punctuation">}</span></code></pre>
|
||||
|
||||
|
||||
@@ -2163,49 +2163,43 @@ switch (currentThemeValue) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/core-css/">
|
||||
<h2 data-ha-exclude="">core CSS </h2>
|
||||
<a class="postlink" href="/domain-and-site-setup/">
|
||||
<h2 data-ha-exclude="">domain and site setup </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<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 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', 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">
|
||||
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gender-in-data-models/">
|
||||
<h2 data-ha-exclude="">gender in data models </h2>
|
||||
<a class="postlink" href="/comparing-text-editors/">
|
||||
<h2 data-ha-exclude="">comparing text editors </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<img src="/img/horsetail.jpg" alt="Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/redirections/">
|
||||
<h2 data-ha-exclude="">redirections </h2>
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="">backend accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -2262,6 +2256,6 @@ switch (currentThemeValue) {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/tree-style-table-of-contents/` was built on 2026-09-21T19:24:10.640Z -->
|
||||
<!-- This page `/tree-style-table-of-contents/` was built on 2026-09-21T19:27:50.469Z -->
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user
