inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Sun Sep 20 15:08:31 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-20 22:08:31 +00:00
parent 1d51eaebec
commit 207d8c1cd5
731 changed files with 8308 additions and 5281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
handedness-toggle/index.html
+158 -23
View File
@@ -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="handedness-toggle">handedness toggle</h1>
<h1>handedness toggle</h1>
<div class="post-metadata">
<p>
@@ -1843,7 +1917,67 @@ switch (currentThemeValue) {
<img class="hero" src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
<p>Recently, I got an iPad for art and immediately fell down the rabbit hole of <a href="https://glitch.com" target="_blank" rel="external">Glitch</a> and web development.</p>
<aside id="toc">
<details>
<summary><h2>table of contents</h2></summary>
<nav class="toc">
<ol>
<li><a href="#the-button">the button</a>
<ol>
<li><a href="#handling-narrow-screens">handling narrow screens</a>
</li>
</ol>
</li>
<li><a href="#nav.js">nav.js</a>
<ol>
<li><a href="#setting-icons">setting icons</a>
</li>
<li><a href="#alignment">alignment</a>
</li>
<li><a href="#moving-the-button">moving the button</a>
</li>
<li><a href="#keyboard-navigation">keyboard navigation</a>
</li>
<li><a href="#managing-focus">managing focus</a>
</li>
</ol>
</li>
<li><a href="#thanks-for-reading">thanks for reading</a>
</li>
<li><a href="#summary">summary</a>
<ol>
<li><a href="#html">HTML</a>
</li>
<li><a href="#css">CSS</a>
</li>
<li><a href="#js">JS</a>
</li>
</ol>
</li>
</ol>
</nav>
</details>
</aside>
<p>Recently, I got an iPad for art and immediately fell down the rabbit hole of <a href="https://glitch.com" target="_blank" rel="external">Glitch</a> and web development.</p>
<p>When creating the <a href="https://rescue-trans-rescue.glitch.com" target="_blank" rel="external">rescue Trans rescue site</a>, I started with a right-aligned navbar. While developing and testing on my iPad, I got in the habit of hovering my hand over the top-right corner of the tablet, always ready to try the light/dark toggle or switch pages.</p>
<p>And then I thought about left-handed people - left handed tablet or touchscreen users in particular. Reaching across the screen repeatedly would start to be a real drag, wouldn't it?</p>
<p>Ok, let's make a toggle!</p>
@@ -1865,7 +1999,7 @@ switch (currentThemeValue) {
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Now users on phones won't have an unhelpful button taking screen space.</p>
<h2 id="nav-js">nav.js</h2>
<h2 id="nav.js">nav.js</h2>
<p>Now let's move to <code>nav.js</code> and define some consts for ease of use. We're going to use <a href="https://fontawesome.com/icons" target="_blank" rel="external">Font Awesome icons</a> for this button, so we'll go grab their HTML for the left and right pointing hands.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token constant">ALIGN</span> <span class="token operator">=</span> <span class="token string">"alignment"</span>
<span class="token keyword">const</span> <span class="token constant">LEFT</span> <span class="token operator">=</span> <span class="token string">"left"</span>
@@ -2071,6 +2205,7 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
alignToggle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> toggleAlign<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</article>
@@ -2108,12 +2243,12 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
<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="/designing-a-bag/">
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
<h2 data-ha-exclude="">designing a bag </h2>
<ul class="postlist-tags">
@@ -2127,9 +2262,23 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
</a>
</li>
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="">accessible image modals </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </h2>
<h2 data-ha-exclude="">eleventy lessons </h2>
<ul class="postlist-tags">
@@ -2141,20 +2290,6 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
</a>
</li>
<li class="post">
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="" id="redirections">redirections </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">
</a>
</li>
</ol>
</section>
@@ -2207,6 +2342,6 @@ alignToggle<span class="token punctuation">.</span><span class="token function">
</footer>
<!-- This page `/handedness-toggle/` was built on 2026-09-20T00:40:39.738Z -->
<!-- This page `/handedness-toggle/` was built on 2026-09-20T22:08:14.586Z -->
</body>
</html>