drone build Mon Sep 21 15:56:13 PDT 2026

accessible-image-modals/index.html

@@ -43,9 +43,8 @@
 <style>#toc {
 	float: right;
 	margin: 1rem 0 1.5rem 1.5rem;
-	/* 23rem is the width of the words 'table of contents' in my header font */
-	/* yes, it's a bit hacky */
-	width: min(calc(100% - 1.5rem), 23rem);
+	width: fit-content;
+	max-width: 55%;
 }
 
 @media (max-width: 850px) {
@@ -54,6 +53,7 @@
 		margin-top: 2rem;
 		margin-left: .5rem;
 		width: calc(100% - .5rem);
+		max-width: unset;
 	}
 }
 
@@ -72,6 +72,7 @@
 	background: var(--color-bg);
 	border-radius: .5rem;
 	cursor: pointer;
+	padding-inline-end: .25rem;
 }
 
 #toc summary:focus-visible {
@@ -95,7 +96,7 @@
 
 /* `tree` style toc */
 #toc nav > ol {
-	margin-left: 1rem;
+	margin-inline: 1rem;
 }
 
 #toc ol {
@@ -2094,47 +2095,43 @@ 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="/framer-accessibility/">
+			<h2 data-ha-exclude="">framer accessibility </h2>
 			
 			<ul class="postlist-tags">
 				
-				<li>leather</li>
-				
 				<li>software</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/feather.jpg" alt="Image unrelated to post. A very frail and wispy feather with variegated white and brown markings on top of pine-needle-covered ground." loading="lazy" decoding="async" width="1000" height="666">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/core-css/">
-			<h2 data-ha-exclude="">core CSS </h2>
+		<a class="postlink" href="/my-favorite-git-flag/">
+			<h2 data-ha-exclude="">my favorite git flag </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 &#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">
+			<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/screen-reader-optimizations/">
-			<h2 data-ha-exclude="">screen reader optimizations </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/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
+			<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>
@@ -2191,6 +2188,6 @@ switch (currentThemeValue) {
 </footer>
 
 
-    <!-- This page `/accessible-image-modals/` was built on 2026-09-21T22:40:46.046Z -->
+    <!-- This page `/accessible-image-modals/` was built on 2026-09-21T22:56:02.943Z -->
   </body>
 </html>