drone build Mon Sep 21 12:47:06 PDT 2026

2026-09-21 19:47:06 +00:00
1 parent bf217f9880
commit d6c321ca46
@@ -70,7 +70,7 @@
 &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
 	&lt;span class=&quot;token property&quot;&gt;border-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .095rem solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-1.png&quot; alt=&quot;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.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;604&quot; height=&quot;236&quot;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-1.png&quot; alt=&quot;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.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;610&quot; height=&quot;297&quot;&gt;&lt;/p&gt;
 &lt;p&gt;Those are super off. First, they&#39;re tabbed too far in to the left; second, there&#39;s &lt;em&gt;no&lt;/em&gt; space between the border and the list item. We&#39;re going to fix the first thing by removing left margins on the &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;s. The second is where we pull in the most critical piece of infrastructure.&lt;/p&gt;
 &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc ol&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
@@ -82,19 +82,19 @@
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
 &lt;p&gt;Notably, without additional positioning, the bars will be spaced away from the border. We want them to overlap perfectly.&lt;/p&gt;
-&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-2.png&quot; alt=&quot;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.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;598&quot; height=&quot;224&quot;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-2.png&quot; alt=&quot;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.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;605&quot; height=&quot;339&quot;&gt;&lt;/p&gt;
 &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; relative&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -.34rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* I fiddled a lot and this is where I landed */&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-3.png&quot; alt=&quot;Phase 3. The tree line leaders now perfectly overlap the border and it looks like a contiguous vertical line with small tabs inwards.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;607&quot; height=&quot;229&quot;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-3.png&quot; alt=&quot;Phase 3. The tree line leaders now perfectly overlap the border and it looks like a contiguous vertical line with small tabs inwards.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;607&quot; height=&quot;341&quot;&gt;&lt;/p&gt;
 &lt;h3 id=&quot;adjust-left-margins&quot;&gt;adjust left margins&lt;/h3&gt;
 &lt;p&gt;Right now, the vertical lines don&#39;t nest nicely underneath the level above. Let&#39;s change our margins. I also adjusted the line height very slightly, because I noticed on some levels of magnification that the tree line leader characters weren&#39;t actually meeting.&lt;/p&gt;
 &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.5rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;line-height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.15&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-4.png&quot; alt=&quot;Phase 4. The vertical border comes down directly below the first character of the parent level.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;604&quot; height=&quot;193&quot;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-4.png&quot; alt=&quot;Phase 4. The vertical border comes down directly below the first character of the parent level.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;600&quot; height=&quot;318&quot;&gt;&lt;/p&gt;
 &lt;h3 id=&quot;fix-those-pesky-last-children&quot;&gt;fix those pesky last children&lt;/h3&gt;
 &lt;p&gt;You&#39;ve probably noticed that the last children in the tree output had a bend rather than the T-shape we&#39;ve been using. We&#39;ll want to remove the border from the last children and change the character we&#39;re using.&lt;/p&gt;
 &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li:last-child&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
@@ -108,7 +108,7 @@
  &lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;└─&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
 &lt;p&gt;With that, it starts to look complete!&lt;/p&gt;
-&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-5.png&quot; alt=&quot;Phase 5, almost done. The last children no longer have a border that continues onward as though there will be more children.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;598&quot; height=&quot;227&quot;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-5.png&quot; alt=&quot;Phase 5, almost done. The last children no longer have a border that continues onward as though there will be more children.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;614&quot; height=&quot;349&quot;&gt;&lt;/p&gt;
 &lt;h3 id=&quot;but-what-about-really%2C-really%2C-really%2C-really%2C-really-long-headers%3F&quot;&gt;but what about really, really, really, really, REALLY long headers?&lt;/h3&gt;
 &lt;p&gt;What about line wrapping? It looks pretty bad right now.&lt;/p&gt;
 &lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-6.png&quot; alt=&quot;Table of contents now shown with the above header. When the line wraps, instead of lining up with the beginning of the first character on the previous line, it nests under the tree line leader and right in line with the vertical border.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;609&quot; height=&quot;405&quot;&gt;&lt;/p&gt;