drone build Mon Sep 21 15:40:57 PDT 2026

handedness-toggle/index.html

@@ -93,40 +93,43 @@
 	top: -1.25rem;
 }
 
-/* my baby my child my `tree` list style */
-#toc ol,
-#toc li {
-	margin-block: 0;
-	list-style: none;
+/* `tree` style toc */
+#toc nav > ol {
+	margin-left: 1rem;
 }
 
 #toc ol {
-	margin-left: 0;
+	margin: 0;
 }
 
 #toc li {
-	border-left: .095rem solid var(--color-pink);
-	margin-left: 1.5rem;
-	line-height: 1.15;
-	text-indent: 1.22rem hanging;
+	position: relative;
+	padding-inline-start: 1em;
+	list-style: none;
+	margin-block: 0;
+	margin-left: .35rem;
+}
+
+#toc li::before,
+#toc li::after {
+	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	inset-block: 0 auto;
+	inset-inline: 0 auto;
+	inline-size: .75em;
+	border-inline-start: .1rem solid var(--color-pink);
 }
 
 #toc li::before {
-	content: '├─' / "";
-	color: var(--color-pink);
-	position: relative;
-	left: -.34rem;
+	block-size: .5lh;
+	border-block-end: .1rem solid var(--color-pink);
+	content: "";
 }
 
-#toc li:last-child {
-	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: '└─' / "";
+#toc li:not(:last-child)::after {
+	block-size: 100%;
+	content: "";
 }
 
 /* underlines are unnecessary in this context */
@@ -2289,29 +2292,29 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/tree-style-table-of-contents/">
-			<h2 data-ha-exclude="">tree-style table of contents </h2>
+		<a class="postlink" href="/intro-to-wireframing/">
+			<h2 data-ha-exclude="">intro to wireframing </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>software</li>
 				
 			</ul>
-			<img src="/img/tree-styling-0.png" alt="screenshot of the table of contents for a blog post (this blog post, in fact). it&#39;s been styled so that the output resembles the hierarchical file system output from the shell program &#39;tree.&#39;" loading="lazy" decoding="async" width="621" height="450">
+			<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">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/backend-accessibility/">
-			<h2 data-ha-exclude="">backend accessibility </h2>
+		<a class="postlink" href="/moving-images/">
+			<h2 data-ha-exclude="">moving images </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>software</li>
 				
 			</ul>
-			<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
+			<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
 			
 		</a>
 	</li>
@@ -2368,6 +2371,6 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
 </footer>
 
 
-    <!-- This page `/handedness-toggle/` was built on 2026-09-21T20:55:47.816Z -->
+    <!-- This page `/handedness-toggle/` was built on 2026-09-21T22:40:46.045Z -->
   </body>
 </html>