drone build Sun Sep 20 15:08:31 PDT 2026
This commit is contained in:
@@ -40,7 +40,80 @@
|
||||
|
||||
|
||||
|
||||
<style>.post-metadata {
|
||||
<style>#toc {
|
||||
float: right;
|
||||
margin: 1rem 0 1.5rem 1.5rem;
|
||||
width: min(calc(100% - 1.5rem), 23rem);
|
||||
/* 23rem is the width of the words 'table of contents' in my header font */
|
||||
/* yes, it's a bit hacky */
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
#toc {
|
||||
float: unset;
|
||||
margin-top: 2rem;
|
||||
margin-left: .5rem;
|
||||
width: calc(100% - .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
#toc details {
|
||||
border: thick solid var(--color-pink);
|
||||
border-radius: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#toc summary {
|
||||
position: relative;
|
||||
top: -1.5rem;
|
||||
left: -.75rem;
|
||||
width: fit-content;
|
||||
background: var(--color-bg);
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
#toc summary:focus-visible {
|
||||
outline: .15rem solid var(--color-teal);
|
||||
}
|
||||
|
||||
#toc summary::marker {
|
||||
font-size: 2.35rem;
|
||||
}
|
||||
|
||||
#toc h2 {
|
||||
margin-top: 0;
|
||||
display: inline;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#toc nav {
|
||||
position: relative;
|
||||
top: -1.25rem;
|
||||
}
|
||||
|
||||
#toc li {
|
||||
margin-block: .45rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
#toc nav > ol {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* basically we want to style this `ol` as a `ul` */
|
||||
#toc ol > li {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li > ol > li {
|
||||
list-style: square;
|
||||
}
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||||
/* if you change the header font, go to post-toc.css and fuck about with the width
|
||||
of the table of contents */
|
||||
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
|
||||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||||
|
||||
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article data-pagefind-body="">
|
||||
<h1 id="screen-reader-optimizations">screen reader optimizations</h1>
|
||||
<h1>screen reader optimizations</h1>
|
||||
|
||||
<div class="post-metadata">
|
||||
<p>
|
||||
@@ -1843,7 +1917,43 @@ switch (currentThemeValue) {
|
||||
<img class="hero" 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">
|
||||
|
||||
|
||||
<h2 id="context">context</h2>
|
||||
|
||||
|
||||
<aside id="toc">
|
||||
<details>
|
||||
<summary><h2>table of contents</h2></summary>
|
||||
<nav class="toc">
|
||||
<ol>
|
||||
|
||||
<li><a href="#context">context</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#pronouns">pronouns</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="#the-fix">the fix</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li><a href="#location">location</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#a-bigger-problem-than-parentheses">a bigger problem than parentheses</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="#total-overhaul">total overhaul</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<h2 id="context">context</h2>
|
||||
<p>recently, I've been working on a <a href="https://inherentlee.codeberg.page/spoonfairies/" target="_blank" rel="external">website for a project called spoonfairies</a>. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:</p>
|
||||
<p><img src="/img/spoonfairies-provider.png" alt="A provider listing from spoonfairies. On the top row of text, it shows the provider's name in large purple text, then their pronouns in slightly opaque white and slightly smaller font, then aligned on the right, a map pin emoji and their general location in standard size white text. On the second row of text, it lists a few services the provider offers, comma separated." loading="lazy" decoding="async" width="1000" height="147"></p>
|
||||
<h2 id="pronouns">pronouns</h2>
|
||||
@@ -1897,6 +2007,7 @@ switch (currentThemeValue) {
|
||||
<p>(technically, all this is templated to hell and back. I would hope that's obvious given I'm talking about <em>lists</em> of these entries.)</p>
|
||||
<p>now, after more screen reader testing, it reads out smoothly. The <code>aria-label</code> precludes the actual link text and cleanly says what needs to be said, with nothing breaking up the text and the whole thing easily recognized as one link. <em>And</em> I've got my fancy styling. Sweet.</p>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
@@ -1934,47 +2045,49 @@ switch (currentThemeValue) {
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<h2 data-ha-exclude="">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/an-intro-to-git/">
|
||||
<h2 data-ha-exclude="" id="an-intro-to-git">an intro to git </h2>
|
||||
<a class="postlink" href="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="">framer accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/accessible-image-modals/">
|
||||
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </h2>
|
||||
<a class="postlink" href="/eleventy-lessons/">
|
||||
<h2 data-ha-exclude="">eleventy lessons </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/domain-and-site-setup/">
|
||||
<h2 data-ha-exclude="" id="domain-and-site-setup">domain and site setup </h2>
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="">designing a bag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<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't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -2031,6 +2144,6 @@ switch (currentThemeValue) {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/screen-reader-optimizations/` was built on 2026-09-20T00:40:39.765Z -->
|
||||
<!-- This page `/screen-reader-optimizations/` was built on 2026-09-20T22:08:14.587Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
