Build: (c53e7c9) Add 10 December 2024 changelog

2024-12-10 10:25:46 +00:00 · 2024-12-10 10:25:46 +00:00 · 4ecf128d28
parent 62f19adc7a
commit 4ecf128d28
139 changed files with 264 additions and 504 deletions
--- a/.htaccess
+++ b/.htaccess
@ -9,6 +9,9 @@ Header set Cache-Control "no-cache, public"

 RewriteEngine on

+# Redirect obfuscated email links to mailto link
+RewriteRule ^email/$ "mailto:contact@leilukin.com" [R=301,L]
+
 # Block bad bots
 RewriteCond %{HTTP_USER_AGENT} (AI2Bot|Ai2Bot-Dolma|Amazonbot|anthropic-ai|Applebot-Extended|Bytespider|ChatGPT-User|Claude-Web|ClaudeBot|cohere-ai|Diffbot|DuckAssistBot|FacebookBot|FriendlyCrawler|Google-Extended|GoogleOther|GoogleOther-Image|GoogleOther-Video|GPTBot|iaskspider/2.0|ICC-Crawler|ImagesiftBot|img2dataset|ISSCyberRiskCrawler|Kangaroo.*Bot|Meta-ExternalAgent|Meta-ExternalFetcher|OAI-SearchBot|omgili|omgilibot|PanguBot|PerplexityBot|PetalBot|Scrapy|Sidetrade.*indexer.*bot|Timpibot|VelenPublicWebCrawler|Webzio-Extended|YouBot) [NC]
 RewriteRule .* https://nocommercialuse.org/ [L]
--- a/about/index.html
+++ b/about/index.html
@ -428,7 +428,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <p>I speak Mandarin, English, Cantonese and Malay, though I am most fluent in Mandarin and English.</p>
 <p>I am also autistic, so I use this website as a platform to catalogue my interests.</p>
 <p>Leilukin is not my real name, but it is an internet pseudonym that I have used since I was a teenager, so the name has become my online identity, and I prefer to go by Leilukin in informal online spaces.</p>
-<p>You can contact me via email: contact@leilukin.com. Using <a href="https://useplaintext.email/">plain text email</a> is encouraged.</p>
+<p>You can contact me via email: <a href="email/" rel="nofollow, noindex"><span class="email-encoded">contact@leilukin<b>.example</b>.com</span></a>. Using <a href="https://useplaintext.email/">plain text email</a> is encouraged.</p>
 <p><a href="/now">Check out my Now page</a> to learn what I am doing right now.</p>
 <p>Web platforms you can find me on:</p>
 <ul>
@ -458,7 +458,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/accessibility/index.html
+++ b/accessibility/index.html
@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <div class="heading-wrapper h2">
 <h2 id="feedback">Feedback</h2>
 <a class="heading-anchor" href="#feedback" aria-labelledby="feedback"><span hidden="">#</span></a></div>
-<p>Feedback from disabled and neurodivergent people are welcome. You can <a href="mailto:contact@leilukin.com">contact me via email</a> for feedbacks and suggestions for improving the accessibility of this site.</p>
+<p>Feedback from disabled and neurodivergent people are welcome. You can [contact me via email](mailto:<span class="email-encoded">contact@leilukin<b>.example</b>.com</span>) for feedbacks and suggestions for improving the accessibility of this site.</p>


 <p class="update-info">(This accessibility statement was last updated on <time datetime="2024-11-27T14:39:00+0800">27 November 2024</time>)</p>
@ -425,7 +425,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/adoptables/index.html
+++ b/adoptables/index.html
@ -792,7 +792,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/archive/index.html
+++ b/archive/index.html
@ -386,7 +386,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -396,7 +396,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -406,7 +406,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -912,7 +912,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/accessible-footnotes/index.html
+++ b/articles/accessible-footnotes/index.html
@ -783,7 +783,7 @@ module<span class="token punctuation">.</span><span class="token function-variab
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/anti-harry-potter-jk-rowling-masterlist/index.html
+++ b/articles/anti-harry-potter-jk-rowling-masterlist/index.html
@ -561,7 +561,7 @@ This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave.
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/designated-lesbian-syndrome-fandom/index.html
+++ b/articles/designated-lesbian-syndrome-fandom/index.html
@ -448,7 +448,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/index.html
+++ b/articles/index.html
@ -524,7 +524,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/kotor2-modder-interview-ars-technica/index.html
+++ b/articles/kotor2-modder-interview-ars-technica/index.html
@ -453,7 +453,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/lgbtq-booklet-interview-misi-bawang/index.html
+++ b/articles/lgbtq-booklet-interview-misi-bawang/index.html
@ -471,7 +471,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/my-dislike-of-shipping-culture/index.html
+++ b/articles/my-dislike-of-shipping-culture/index.html
@ -442,7 +442,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/articles/palestine-masterlist/index.html
+++ b/articles/palestine-masterlist/index.html
@ -685,7 +685,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/assets/css/utility.css
+++ b/assets/css/utility.css
@ -42,6 +42,7 @@ a > .inline-icon { padding-inline-end: .25em; }
 }

 .item-list__indent { margin: 0.3em 0 0 1.25em; }
+.email-encoded b { display: none; }

 .hidden { display: none; }

--- a/blog/index.html
+++ b/blog/index.html
@ -599,7 +599,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/page/2/index.html
+++ b/blog/page/2/index.html
@ -602,7 +602,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/page/3/index.html
+++ b/blog/page/3/index.html
@ -602,7 +602,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/page/4/index.html
+++ b/blog/page/4/index.html
@ -602,7 +602,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/page/5/index.html
+++ b/blog/page/5/index.html
@ -589,7 +589,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html
+++ b/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html
@ -467,7 +467,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html
+++ b/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html
@ -463,7 +463,7 @@ After discovering the static site generator <a href="https://www.11ty.dev/">Elev
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html
+++ b/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html
@ -458,7 +458,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html
+++ b/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html
@ -469,7 +469,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html
+++ b/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html
@ -462,7 +462,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html
+++ b/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html
@ -463,7 +463,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html
+++ b/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html
@ -467,7 +467,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html
+++ b/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html
@ -472,7 +472,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html
+++ b/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html
@ -460,7 +460,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html
+++ b/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html
@ -462,7 +462,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html
+++ b/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html
@ -472,7 +472,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html
+++ b/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html
@ -635,7 +635,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html
+++ b/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html
@ -474,7 +474,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-05-14-james-somerton-my-video-game-footage/index.html
+++ b/blog/posts/2024-05-14-james-somerton-my-video-game-footage/index.html
@ -489,7 +489,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-05-29-new-guestbook-leilukins-hub/index.html
+++ b/blog/posts/2024-05-29-new-guestbook-leilukins-hub/index.html
@ -468,7 +468,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/index.html
+++ b/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/index.html
@ -552,7 +552,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-06-12-performance-improvement-leilukins-hub/index.html
+++ b/blog/posts/2024-06-12-performance-improvement-leilukins-hub/index.html
@ -477,7 +477,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/index.html
+++ b/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/index.html
@ -462,7 +462,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/index.html
+++ b/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/index.html
@ -470,7 +470,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-07-02-fanlisting-collective-launch/index.html
+++ b/blog/posts/2024-07-02-fanlisting-collective-launch/index.html
@ -492,7 +492,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/index.html
+++ b/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/index.html
@ -576,7 +576,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/index.html
+++ b/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/index.html
@ -551,7 +551,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-10-28-re-social-media-personal-blog/index.html
+++ b/blog/posts/2024-10-28-re-social-media-personal-blog/index.html
@ -470,7 +470,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/2024-12-01-indieweb-carnival-november-2024-impact/index.html
+++ b/blog/posts/2024-12-01-indieweb-carnival-november-2024-impact/index.html
@ -536,7 +536,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@ -669,7 +669,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/32-bit-cafe/index.html
+++ b/categories/32-bit-cafe/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/a-bugs-life/index.html
+++ b/categories/a-bugs-life/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/a-summers-end/index.html
+++ b/categories/a-summers-end/index.html
@ -427,7 +427,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/accessibility/index.html
+++ b/categories/accessibility/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/blogging/index.html
+++ b/categories/blogging/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/cassette-beasts/index.html
+++ b/categories/cassette-beasts/index.html
@ -467,7 +467,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/code-projects/index.html
+++ b/categories/code-projects/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/css/index.html
+++ b/categories/css/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/dracula-daily/index.html
+++ b/categories/dracula-daily/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/eleventy/index.html
+++ b/categories/eleventy/index.html
@ -417,7 +417,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/fandom-culture/index.html
+++ b/categories/fandom-culture/index.html
@ -417,7 +417,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/gaming/index.html
+++ b/categories/gaming/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/harry-potter/index.html
+++ b/categories/harry-potter/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/html/index.html
+++ b/categories/html/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/index.html
+++ b/categories/index.html
@ -541,7 +541,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/indieweb/index.html
+++ b/categories/indieweb/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/jk-rowling/index.html
+++ b/categories/jk-rowling/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/lesbian/index.html
+++ b/categories/lesbian/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/lgbtq/index.html
+++ b/categories/lgbtq/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/life-updates/index.html
+++ b/categories/life-updates/index.html
@ -417,7 +417,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/life/index.html
+++ b/categories/life/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/malaysia/index.html
+++ b/categories/malaysia/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/markdown-it/index.html
+++ b/categories/markdown-it/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/my-birthday/index.html
+++ b/categories/my-birthday/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/my-interviews/index.html
+++ b/categories/my-interviews/index.html
@ -417,7 +417,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/palestine/index.html
+++ b/categories/palestine/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/personal-web/index.html
+++ b/categories/personal-web/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/pokemon-oras/index.html
+++ b/categories/pokemon-oras/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/pokemon/index.html
+++ b/categories/pokemon/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/shrines/index.html
+++ b/categories/shrines/index.html
@ -437,7 +437,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/site-anniversary/index.html
+++ b/categories/site-anniversary/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/site-updates/index.html
+++ b/categories/site-updates/index.html
@ -517,7 +517,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/social-media/index.html
+++ b/categories/social-media/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/star-wars-kotor-2/index.html
+++ b/categories/star-wars-kotor-2/index.html
@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -507,7 +507,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/star-wars-kotor/index.html
+++ b/categories/star-wars-kotor/index.html
@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -497,7 +497,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/video-game-mods/index.html
+++ b/categories/video-game-mods/index.html
@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
                    
                </a>
            </p>
-            <time datetime="Tue Dec 10 2024 09:44:21 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
+            <time datetime="Tue Dec 10 2024 10:25:36 GMT+0000 (Coordinated Universal Time)">10 December 2024</time>
        </li>
    
        <li>
@ -487,7 +487,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/web-development/index.html
+++ b/categories/web-development/index.html
@ -417,7 +417,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/categories/youtube/index.html
+++ b/categories/youtube/index.html
@ -407,7 +407,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/2022/index.html
+++ b/changelogs/2022/index.html
@ -749,7 +749,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/2023/index.html
+++ b/changelogs/2023/index.html
@ -1141,7 +1141,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/2024/index.html
+++ b/changelogs/2024/index.html
@ -427,6 +427,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))



+    <div class="heading-wrapper h2">
+            <h2 id="2024-12-10">
+        10 December 2024
+    </h2>
+            <a class="heading-anchor" href="#2024-12-10" aria-labelledby="2024-12-10"><span hidden="">#</span></a>
+        </div>
+
+    <ul>
+<li>Obfuscate my email address with CSS and HTTP redirects. (Credit to Spencer Mortensen's article, <a href="https://spencermortensen.com/articles/email-obfuscation/">&quot;Email obfuscation: What works in 2024?&quot;</a>)</li>
+</ul>
+
    <div class="heading-wrapper h2">
            <h2 id="2024-12-09">
        9 December 2024
@ -1113,7 +1124,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/index.html
+++ b/changelogs/index.html
@ -471,6 +471,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Tue Dec 10 2024 10:25:01 GMT+0000 (Coordinated Universal Time)">10 December 2024</time></h3>
+    <ul>
+<li>Obfuscate my email address with CSS and HTTP redirects. (Credit to Spencer Mortensen's article, <a href="https://spencermortensen.com/articles/email-obfuscation/">&quot;Email obfuscation: What works in 2024?&quot;</a>)</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Mon Dec 09 2024 05:07:05 GMT+0000 (Coordinated Universal Time)">9 December 2024</time></h3>
    <ul>
 <li>Add table of contents to each tab section of the <a href="/links">Links</a> page.</li>
@ -583,13 +588,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <li>Implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for <a href="https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html">1.4.13: Content on Hover or Focus (Level AA)</a>, by utilising <a href="https://github.com/scottaohara/a11y_tooltips">Scott O'Hara's ARIA Tooltips</a> script. (Thank you <a href="https://www.groundedwren.com/">Vera</a> for your feedback on my previous implementation of the tooltips)</li>
 </ul>

-    <h3 class="date-style"><time datetime="Wed Jul 03 2024 00:50:00 GMT+0000 (Coordinated Universal Time)">3 July 2024</time></h3>
-    <ul>
-<li>Add <a href="/links/#articles">Articles</a> and <a href="/links/#resources">Resources</a> tabs to the <a href="/links">links page</a>.</li>
-<li>Show visible stylised tooltips for some website buttons on mouse hover or keyboard focus (thanks to <a href="https://solaria.neocities.org/accessibility">Solaria's web accessibility guide</a> for the inspiration).</li>
-<li>Add a list of webrings my website is part of to the home page.</li>
-</ul>
-



@ -650,7 +648,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/layouts/index.html
+++ b/changelogs/layouts/index.html
@ -518,7 +518,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/page/2/index.html
+++ b/changelogs/page/2/index.html
@ -471,6 +471,13 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Wed Jul 03 2024 00:50:00 GMT+0000 (Coordinated Universal Time)">3 July 2024</time></h3>
+    <ul>
+<li>Add <a href="/links/#articles">Articles</a> and <a href="/links/#resources">Resources</a> tabs to the <a href="/links">links page</a>.</li>
+<li>Show visible stylised tooltips for some website buttons on mouse hover or keyboard focus (thanks to <a href="https://solaria.neocities.org/accessibility">Solaria's web accessibility guide</a> for the inspiration).</li>
+<li>Add a list of webrings my website is part of to the home page.</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Tue Jul 02 2024 14:00:00 GMT+0000 (Coordinated Universal Time)">2 July 2024</time></h3>
    <ul>
 <li>The main site header now would display a Disability Pride Month blurb and the disability pride flag during July</li>
@ -607,13 +614,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <li>Add &quot;Personal Sites I Love&quot; section to the <a href="/links">Links</a> page.</li>
 </ul>

-    <h3 class="date-style"><time datetime="Fri May 24 2024 17:09:00 GMT+0000 (Coordinated Universal Time)">24 May 2024</time></h3>
-    <ul>
-<li>Use <a href="https://groundedwren.neocities.org/pages/demo_controls/guestbookDemo">Grounded Wren's guestbook code</a> for this site's <a href="/guestbook">guestbook</a>.</li>
-<li>Add &quot;Link Exchanges&quot; section to the <a href="/links">Links</a> page.</li>
-<li>Move my mod build links from the Links page to the <a href="/projects">Projects</a> page.</li>
-</ul>
-



@ -677,7 +677,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/page/3/index.html
+++ b/changelogs/page/3/index.html
@ -471,6 +471,13 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Fri May 24 2024 17:09:00 GMT+0000 (Coordinated Universal Time)">24 May 2024</time></h3>
+    <ul>
+<li>Use <a href="https://groundedwren.neocities.org/pages/demo_controls/guestbookDemo">Grounded Wren's guestbook code</a> for this site's <a href="/guestbook">guestbook</a>.</li>
+<li>Add &quot;Link Exchanges&quot; section to the <a href="/links">Links</a> page.</li>
+<li>Move my mod build links from the Links page to the <a href="/projects">Projects</a> page.</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Wed May 22 2024 04:49:00 GMT+0000 (Coordinated Universal Time)">22 May 2024</time></h3>
    <ul>
 <li>Add <a href="/accessibility/">accessibility statement</a>.</li>
@ -572,11 +579,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <li>New blog post: <a href="/blog/posts/2023-10-30-Support-for-My-Steam-Review-of-A-Summers-End">Support for My Steam Review of A Summer’s End — Hong Kong 1986</a>.</li>
 </ul>

-    <h3 class="date-style"><time datetime="Wed Oct 18 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">18 October 2023</time></h3>
-    <ul>
-<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added Developer Notes section to the <a href="/shrines/cassettebeasts/trivia">Trivia</a> page.</li>
-</ul>
-



@ -640,7 +642,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/page/4/index.html
+++ b/changelogs/page/4/index.html
@ -471,6 +471,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Wed Oct 18 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">18 October 2023</time></h3>
+    <ul>
+<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added Developer Notes section to the <a href="/shrines/cassettebeasts/trivia">Trivia</a> page.</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Fri Oct 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">13 October 2023</time></h3>
    <ul>
 <li>New blog post: <a href="/blog/posts/2023-10-13-My-Cassette-Beasts-Pombomb-Plushie-Arrived">My Cassette Beasts Pombomb Plushie Arrived!</a></li>
@ -586,12 +591,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <li>New article: <a href="/articles/my-dislike-of-shipping-culture">My Disinterest in Shipping and Dislike of Shipping Culture</a>.</li>
 </ul>

-    <h3 class="date-style"><time datetime="Sun Aug 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">13 August 2023</time></h3>
-    <ul>
-<li>Streamlined JavaScript code for the website's components.</li>
-<li>Added JavaScript scripts to generate article table of contents automatically.</li>
-</ul>
-



@ -655,7 +654,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/page/5/index.html
+++ b/changelogs/page/5/index.html
@ -471,6 +471,12 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Sun Aug 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">13 August 2023</time></h3>
+    <ul>
+<li>Streamlined JavaScript code for the website's components.</li>
+<li>Added JavaScript scripts to generate article table of contents automatically.</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Thu Aug 10 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">10 August 2023</time></h3>
    <ul>
 <li>Reformatted source and reference citations, such as the <a href="/shrines/asummersend/trivia">Trivia</a> page on the A Summer’s End — Hong Kong 1986 shrine.</li>
@ -596,11 +602,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <li>Added the dates of publication of articles.</li>
 </ul>

-    <h3 class="date-style"><time datetime="Mon Mar 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">20 March 2023</time></h3>
-    <ul>
-<li>Tweaked the format of the dates of publication and update of articles.</li>
-</ul>
-



@ -664,7 +665,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/page/6/index.html
+++ b/changelogs/page/6/index.html
@ -471,6 +471,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Mon Mar 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">20 March 2023</time></h3>
+    <ul>
+<li>Tweaked the format of the dates of publication and update of articles.</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Sun Mar 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">19 March 2023</time></h3>
    <ul>
 <li>Added a new masterlist on my <a href="/resources/">Resources</a> page: <a href="/resources/anti-harry-potter-jk-rowling-masterlist">Anti-Harry Potter and Anti-J. K. Rowling Masterlist</a></li>
@ -589,11 +594,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
 <li>Added my latest mod, Bastila and Carth Romance Removal, to <a href="/projects/videogamemods/kotor1">my mods for Star Wars: Knights of the Old Republic</a> page.</li>
 </ul>

-    <h3 class="date-style"><time datetime="Tue Nov 22 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">22 November 2022</time></h3>
-    <ul>
-<li>Added my latest mod, No Jealousy Lock in Handmaiden Dialogue, to <a href="/projects/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>
-</ul>
-



@ -657,7 +657,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/changelogs/page/7/index.html
+++ b/changelogs/page/7/index.html
@ -471,6 +471,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <h2>Latest Changelogs</h2>

+    <h3 class="date-style"><time datetime="Tue Nov 22 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">22 November 2022</time></h3>
+    <ul>
+<li>Added my latest mod, No Jealousy Lock in Handmaiden Dialogue, to <a href="/projects/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>
+</ul>
+
    <h3 class="date-style"><time datetime="Wed Nov 16 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">16 November 2022</time></h3>
    <ul>
 <li>Added my latest mod, Lonna Vash Mod for TSLRCM, to <a href="/projects/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>
@ -639,7 +644,7 @@ Newer
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/colophon/index.html
+++ b/colophon/index.html
@ -541,7 +541,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/feed.xml
+++ b/feed.xml
@ -4,13 +4,24 @@
    <subtitle>Leilukin&#39;s personal website.</subtitle>
    <link href="https://leilukin.com/feed.xml" rel="self"/>
    <link href="https://leilukin.com"/>
-    <updated>2024-12-10T09:44:25Z</updated>
+    <updated>2024-12-10T10:25:41Z</updated>
    <id>https://leilukin.com/</id>
    <author>
        <name>Leilukin</name>
        <email>contact@leilukin.com</email>
    </author>
        
+        <entry>
+            <title>Changelog: 10 December 2024</title>
+            <link href="https://leilukin.com/"/>
+            <updated>2024-12-10T10:25:01Z</updated>
+            <id>https://leilukin.com/</id>
+            <content type="html">&lt;ul&gt;
+&lt;li&gt;Obfuscate my email address with CSS and HTTP redirects. (Credit to Spencer Mortensen&#39;s article, &lt;a href=&quot;https://spencermortensen.com/articles/email-obfuscation/&quot;&gt;&amp;quot;Email obfuscation: What works in 2024?&amp;quot;&lt;/a&gt;)&lt;/li&gt;
+&lt;/ul&gt;
+</content>
+        </entry>
+        
        <entry>
            <title>Changelog: 9 December 2024</title>
            <link href="https://leilukin.com/"/>
@ -233,283 +244,6 @@
            <content type="html">&lt;ul&gt;
 &lt;li&gt;New article: &lt;a href=&quot;https://leilukin.com/articles/accessible-footnotes&quot;&gt;&amp;quot;How I (Tried to) Implement Accessible Footnotes&amp;quot;&lt;/a&gt;, which is also my entry for &lt;a href=&quot;https://32bit.cafe/&quot;&gt;32-Bit Cafe&lt;/a&gt;&#39;s &lt;a href=&quot;https://32bit.cafe/~xandra/events/codejam5/&quot;&gt;Community Code Jam #5: Back to School&lt;/a&gt;.&lt;/li&gt;
 &lt;/ul&gt;
-</content>
-        </entry>
-        
-        <entry>
-            <title>How I (Tried to) Implement Accessible Footnotes | Articles</title>
-            <link href="https://leilukin.com/articles/accessible-footnotes/"/>
-            <updated>2024-08-05T16:04:00Z</updated>
-            <id>https://leilukin.com/articles/accessible-footnotes/</id>
-            <content type="html">&lt;p class=&quot;center-text&quot;&gt;&lt;a href=&quot;https://32bit.cafe/~xandra/events/codejam5/&quot; class=&quot;inline-img&quot;&gt;&lt;img src=&quot;https://leilukin.com/assets/images/articles/accessible-footnotes/32bitcafe-backtoschool.png&quot; alt=&quot;32-Bit Cafe &amp;quot;Back to School&amp;quot; Code Jam button&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
-&lt;p class=&quot;center-text&quot;&gt;(32-Bit Cafe &amp;quot;Back to School&amp;quot; button made by &lt;a href=&quot;https://ribo.zone/&quot;&gt;Loren&lt;/a&gt;)&lt;/p&gt;
-&lt;p&gt;&lt;a href=&quot;https://32bit.cafe/&quot;&gt;32-Bit Cafe&lt;/a&gt; is holding its fifth community code jam, titled &lt;a href=&quot;https://32bit.cafe/~xandra/events/codejam5/&quot;&gt;&amp;quot;Back to School&amp;quot;&lt;/a&gt;, from 4 to 17 August 2024. I have been looking forward to participating in 32-Bit Cafe&#39;s community code jam for the first time, so I am excited. This motivates me to finally write a how-to article I have been meaning to do for a while: how to implement accessible footnotes on Leilukin&#39;s Hub, or at least, I tried to do so to the best of my abilities.&lt;/p&gt;
-&lt;p&gt;On &lt;a href=&quot;https://discourse.32bit.cafe/&quot;&gt;32-Bit Cafe&#39;s Discourse forum&lt;/a&gt;, I made a &lt;a href=&quot;https://discourse.32bit.cafe/t/handling-citations-and-or-footnotes/1061/2?u=leilukin&quot;&gt;post on 28 June 2024&lt;/a&gt; in response to &lt;a href=&quot;https://solaria.neocities.org/&quot;&gt;solaria&lt;/a&gt;&#39;s thread &lt;a href=&quot;https://discourse.32bit.cafe/t/handling-citations-and-or-footnotes/1061&quot;&gt;&amp;quot;Handling Citations and/or Footnotes&amp;quot;&lt;/a&gt; to share my methods of adding footnotes on my website. Now, I am writing an extended version of that post of mine in the form of this article, so I could share what I learned about web page footnotes on my website as well.&lt;/p&gt;
-&lt;p&gt;(Note: This article assumes a foundational familiarity with HTML and CSS)&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;about-footnotes&quot;&gt;About Footnotes&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#about-footnotes&quot; aria-labelledby=&quot;about-footnotes&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Plagiarism.org &lt;a href=&quot;https://www.plagiarism.org/article/what-are-footnotes&quot;&gt;defines footnotes&lt;/a&gt; as notes placed at the bottom of a page, and what footnotes do is to cite references or comment on a designated part of the text above it.&lt;/p&gt;
-&lt;p&gt;My use case of footnotes is citing sources of information, particularly citing the same source multiple times on the same page when information from the same source is spread across my page. As of this writing, my website pages that use footnotes include the &lt;a href=&quot;https://leilukin.com/shrines/asummersend/trivia/&quot;&gt;trivia page of my &lt;cite&gt;A Summer’s End — Hong Kong 1986&lt;/cite&gt; shrine 1&lt;/a&gt; and the &lt;a href=&quot;https://leilukin.com/shrines/cassettebeasts/facts/&quot;&gt;facts page of my &lt;cite&gt;Cassette Beasts&lt;/cite&gt; shrine&lt;/a&gt;. You are free to look at the HTML and CSS for reference.&lt;/p&gt;
-&lt;p&gt;Footnotes are used both on print and on the web. However, maintaining footnotes on the web can be tedious, especially if you want to update a web page to add or remove them, since you will need to change the number references of existing footnotes.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;attempted-to-use-css-counters&quot;&gt;Attempted to Use CSS Counters&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#attempted-to-use-css-counters&quot; aria-labelledby=&quot;attempted-to-use-css-counters&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;When I was searching for how to implement accessible footnotes, I discovered &lt;a href=&quot;https://kittygiraudel.com/&quot;&gt;Kitty Giraudel&lt;/a&gt;&#39;s article, &lt;a href=&quot;https://www.sitepoint.com/accessible-footnotes-css/&quot;&gt;&amp;quot;Accessible Footnotes with CSS&amp;quot;&lt;/a&gt; which teaches the method of using the combination of HTML &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby&quot;&gt;&lt;code&gt;aria-describedby&lt;/code&gt;&lt;/a&gt; attribute and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters&quot;&gt;CSS counters&lt;/a&gt; to add numbered references, to reduce the hassle of manually re-numbering all existing footnotes in case you want to update or reorder the references.&lt;/p&gt;
-&lt;p&gt;Her article also teaches adding a highlight background colour when heading to a footnote from a reference, as well as providing back links to head back to a reference from a footnote, by using the combination of the backlink Unicode icon (↩) and the HTML &lt;code&gt;aria-label&lt;/code&gt; attribute with a value of “Back to content”. The uses of ARIA labels make footnotes more screen reader-friendly.&lt;/p&gt;
-&lt;p&gt;Furthermore, Kitty created the &lt;a href=&quot;https://github.com/KittyGiraudel/eleventy-plugin-footnotes&quot;&gt;eleventy-plugin-footnotes plugin&lt;/a&gt; for the static site generator &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;, and wrote a blog post about it, &lt;a href=&quot;https://kittygiraudel.com/2020/12/02/footnotes-in-11ty/&quot;&gt;&amp;quot;Footnotes in 11ty&amp;quot;&lt;/a&gt;. Since I already had begun to &lt;a href=&quot;https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy&quot;&gt;use Eleventy to build my website&lt;/a&gt;, I tried Kitty&#39;s plugin.&lt;/p&gt;
-&lt;p&gt;Unfortunately, a known limitation of using CSS counter method to generate footnotes is &lt;a href=&quot;https://github.com/KittyGiraudel/eleventy-plugin-footnotes/issues/83&quot;&gt;not being able to reference the same footnote multiple times&lt;/a&gt;. As I want to be able to reference the same footnote more than once when I am citing sources on my shrine pages, I had to give up the plugin and look for an alternative.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;starting-with-markdown-it-footnote-plugins-default-footnote-markup&quot;&gt;Starting with markdown-it-footnote Plugin&#39;s Default Footnote Markup&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#starting-with-markdown-it-footnote-plugins-default-footnote-markup&quot; aria-labelledby=&quot;starting-with-markdown-it-footnote-plugins-default-footnote-markup&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Kitty Giraudel&#39;s blog post about creating footnotes in Eleventy mentioned &lt;a href=&quot;https://github.com/markdown-it/markdown-it-footnote&quot;&gt;markdown-it-footnote&lt;/a&gt;, the footnotes plugin for &lt;a href=&quot;https://github.com/markdown-it/markdown-it&quot;&gt;markdown-it&lt;/a&gt; Markdown parser, which is integrated in Eleventy by default to convert Markdown to HTML. Kitty commented on the accessibility shortcomings of markdown-it-footnote in the blog post:&lt;/p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;[...]it’s not super accessible (let alone by default), even considering all the customisation options. That’s because the footnote references end up being numbers (e.g. [1]) which are meaningless when listed or tabbed through because devoid of their surrounding context.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;That said, since the plugin is customisable, I still wanted to give it a shot to see if I could make configurations to improve its accessibility, so I installed markdown-it-footnote and looked into the plugin&#39;s default HTML markup output.&lt;/p&gt;
-&lt;p&gt;Here is a sample of what the HTML markup output of markdown-it-footnote looks like:&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This is a paragraph with the first footnote reference. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Here is the second paragraph with the second footnote reference. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[2]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This the third paragraph, but with a foootnote reference that points to the first footnote. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[1:1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;hr&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes-sep&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;section&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ol&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes-list&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;First footnote &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fn2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Second footnote &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;section&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;This is what this HTML markup will look like on a live web page:&lt;/p&gt;
-&lt;p&gt;&lt;img src=&quot;https://leilukin.com/assets/images/articles/accessible-footnotes/footnote-sample.avif&quot; alt=&quot;Web page footnotes sample screenshot&quot; /&gt;&lt;/p&gt;
-&lt;p&gt;What this HTML markup does:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;Adding a footnote reference as a superscript by using the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup&quot;&gt;&lt;code&gt;&amp;lt;sup&amp;gt;&lt;/code&gt;&lt;/a&gt; tag with numbers as the content.&lt;/li&gt;
-&lt;li&gt;Using a &lt;code&gt;&amp;lt;hr&amp;gt;&lt;/code&gt; horizontal line element to separate the main body of the page and the footnote section;&lt;/li&gt;
-&lt;li&gt;Using the &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; tag to render the footnotes as a numbered list;&lt;/li&gt;
-&lt;li&gt;Each footnote list item has an &lt;code&gt;id&lt;/code&gt; attribute&lt;/li&gt;
-&lt;li&gt;If a footnote is referenced more than once, the additional footnote references are labelled with colons.&lt;/li&gt;
-&lt;/ul&gt;
-&lt;p&gt;(Note: the class names were added by markdown-it-footnote, but if you do not use it, you can rename the class name to whatever you want, and even if you use markdown-it-footnote, you can still change the class names if you want to go deep into it)&lt;/p&gt;
-&lt;p&gt;Next step is trying to improve this HTML markup by making it accessible.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;make-markdown-it-footnotes-markup-more-accessible&quot;&gt;Make markdown-it-footnote&#39;s Markup More Accessible&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#make-markdown-it-footnotes-markup-more-accessible&quot; aria-labelledby=&quot;make-markdown-it-footnotes-markup-more-accessible&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;div class=&quot;heading-wrapper h3&quot;&gt;
-&lt;h3 id=&quot;clarify-footnote-reference-labels&quot;&gt;Clarify Footnote Reference Labels&lt;/h3&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#clarify-footnote-reference-labels&quot; aria-labelledby=&quot;clarify-footnote-reference-labels&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;As pointed out by Kitty Giraudel, labelling the footnote reference as mere numbers like [1] is an accessibility shortcoming, because these reference links become meaningless when being focused on by tabbing through the links, as these reference links would be devoid of context.&lt;/p&gt;
-&lt;p&gt;What I did to tackle this was changing the reference labels by adding a word &amp;quot;Footnote&amp;quot; to clarify that these links are for footnotes. For example, [1] becomes [Footnote #1], so when screen readers focus on a footnote reference link, it will be read out as &amp;quot;Footnote number one link&amp;quot;.&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;Optionally, if you want your footnote labels to still display only numbers on screen, you can use a CSS class to &lt;a href=&quot;https://www.a11yproject.com/posts/how-to-hide-content/&quot;&gt;visually hide&lt;/a&gt; the extra characters in the footnote label. This &lt;code&gt;.visually-hidden&lt;/code&gt; utility class is a useful tool in your arsenal for accessible web design, as it is often used to hide a content that you do not mean to show on screen, but you still want it to be read by assistive technology.&lt;/p&gt;
-&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.visually-hidden&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;clip&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;rect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;0 0 0 0&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 property&quot;&gt;clip-path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;inset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;50%&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 property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;overflow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; hidden&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; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;white-space&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; nowrap&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-    &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1px&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;To make my footnote reference labels display only a number on screen, I use a &lt;code&gt;span&lt;/code&gt; tag with &lt;code&gt;visually-hidden&lt;/code&gt; as the value of the &lt;code&gt;class&lt;/code&gt; attribute to wrap around &amp;quot;Footnote #&amp;quot;, so on screen, [Footnote #1] is changed to [1].&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-		[&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;visually-hidden&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnote #&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;1]
-	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;div class=&quot;heading-wrapper h3&quot;&gt;
-&lt;h3 id=&quot;add-aria-label-to-footnote-back-links&quot;&gt;Add ARIA Label to Footnote Back Links&lt;/h3&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#add-aria-label-to-footnote-back-links&quot; aria-labelledby=&quot;add-aria-label-to-footnote-back-links&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Next step is adding an ARIA label to the footnote backlinks, by adding an &lt;code&gt;aria-label&lt;/code&gt; attribute with &amp;quot;Back to reference #[Insert reference number]&amp;quot; as its value. For example:&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Back to reference #1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;When a footnote back link is focused on via tabbing, screen readers will read it out as &amp;quot;Back to reference number one link&amp;quot;.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h3&quot;&gt;
-&lt;h3 id=&quot;add-heading-to-footnote-section&quot;&gt;Add Heading to Footnote Section&lt;/h3&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#add-heading-to-footnote-section&quot; aria-labelledby=&quot;add-heading-to-footnote-section&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;To make it clear that the section is for footnotes, I add a HTML heading before the list of footnotes, such as:&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnotes&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;final-html-markup-for-accessible-footnotes&quot;&gt;Final HTML Markup for Accessible Footnotes&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#final-html-markup-for-accessible-footnotes&quot; aria-labelledby=&quot;final-html-markup-for-accessible-footnotes&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Here is my final HTML markup sample to create accessible footnotes:&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This is a paragraph with the first footnote reference. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;visually-hidden&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnote #&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Here is the second paragraph with the second footnote reference. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;visually-hidden&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnote #&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;2]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This the third paragraph, but with a foootnote reference that points to the first footnote. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;visually-hidden&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnote #&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;1:1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;hr&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes-sep&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;section&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnotes&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ol&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes-list&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	        First footnote
-	        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Back to reference #1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Back to reference #1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fn2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	        Second footnote
-	        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Back to reference #2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;section&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;p&gt;As for the CSS, in addition to using the &lt;code&gt;.visually-hidden&lt;/code&gt; utility class, I refer to Kitty Giraudel&#39;s  &lt;a href=&quot;https://www.sitepoint.com/accessible-footnotes-css/&quot;&gt;&amp;quot;Accessible Footnotes with CSS&amp;quot;&lt;/a&gt; article to style the highlight background color when heading to a footnote from a reference.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;configure-markdown-it-footnote-in-eleventys-configuration-file&quot;&gt;Configure markdown-it-footnote in Eleventy&#39;s Configuration File&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#configure-markdown-it-footnote-in-eleventys-configuration-file&quot; aria-labelledby=&quot;configure-markdown-it-footnote-in-eleventys-configuration-file&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;(If you do not use Eleventy, you may skip this section)&lt;/p&gt;
-&lt;p&gt;My final step was to configure the markdown-it-footnote plugin, by editing Eleventy&#39;s configuration file (I named mine &lt;code&gt;eleventy.config.js&lt;/code&gt;), so the plugin would render my accessible footnote HTML markup.&lt;/p&gt;
-&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// markdown-it plugins&lt;/span&gt;
-&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; markdownIt &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;markdown-it&quot;&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;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; markdownItFootnote &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;markdown-it-footnote&quot;&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;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&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;span class=&quot;token comment&quot;&gt;/* Markdown Overrides */&lt;/span&gt;
-    markdownLibrary &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;markdownIt&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;span class=&quot;token literal-property property&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&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;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 function&quot;&gt;use&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;markdownItFootnote&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 comment&quot;&gt;// Configure markdown-it-footnote&lt;/span&gt;
-    markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;footnote_block_open&lt;/span&gt; &lt;span class=&quot;token operator&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;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
-        &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;hr class=&quot;footnotes-sep&quot;&gt;&#92;n&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;
-        &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;section class=&quot;footnotes&quot;&gt;&#92;n&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;
-        &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&amp;lt;h2&gt;Footnotes&amp;lt;/h2&gt;&#92;n&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&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;
-
-    markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;footnote_anchor&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; slf&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-        &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; id &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; slf&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;footnote_anchor_name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; slf&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 keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;idx&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;meta&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;subId &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; id &lt;span class=&quot;token operator&quot;&gt;+=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;idx&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;meta&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;subId&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-        &lt;span class=&quot;token comment&quot;&gt;/* ↩ with escape code to prevent display as Apple Emoji on iOS */&lt;/span&gt;
-        &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt; &amp;lt;a aria-label=&quot;Back to reference #&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;id&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot; href=&quot;#fnref&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;id&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot; class=&quot;footnote-backref&quot;&gt;&#92;u21a9&#92;uFE0E&amp;lt;/a&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; renderRules &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-        &lt;span class=&quot;token literal-property property&quot;&gt;footnote_caption&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&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 string&quot;&gt;&#39;[&amp;lt;span class=&quot;visually-hidden&quot;&gt;Footnote #&amp;lt;/span&gt;&#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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-    Object&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;renderRules&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 function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;rule&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-        &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; defaultRender &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;rule&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-        markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;rule&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; self&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-            &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defaultRender&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; self&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 function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;renderRules&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;rule&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;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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-    &lt;span class=&quot;token comment&quot;&gt;/* This is the part that tells 11ty to swap to our custom config */&lt;/span&gt;
-    eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setLibrary&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;md&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; markdownLibrary&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;If you are a fellow Eleventy user, feel free to borrow my markdown-it-footnote configurations in your own. Make sure you install markdown-it-footnote first by keying in the installation command in the terminal:&lt;/p&gt;
-&lt;pre class=&quot;language-powershell&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-powershell&quot;&gt;npm install markdown-it-footnote &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;save&lt;/code&gt;&lt;/pre&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;bonus-alternatives-to-footnotes&quot;&gt;Bonus: Alternatives to Footnotes&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#bonus-alternatives-to-footnotes&quot; aria-labelledby=&quot;bonus-alternatives-to-footnotes&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;As you likely have realised, footnotes are really tricky to implement on web pages, so you may be wondering: is there any alternative to footnotes?&lt;/p&gt;
-&lt;p&gt;For extra comments and tangents, by favourite approach is using HTML&#39;s details disclosure element with the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag, with a &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary&quot;&gt;&lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt;&lt;/a&gt; element and a sibling element wrapping the content displayed when the disclosure is expanded.&lt;/p&gt;
-&lt;p&gt;I have been using the disclosure element for additional comments or information on this website, like in my blog post, &lt;a href=&quot;https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/&quot;&gt;&amp;quot;My Cassette Beasts Fanlisting Application has been Approved&amp;quot;&lt;/a&gt;. As for the styling, initially I indented the content inside the disclosure to differentiate the disclosure content from the rest of the content of the page, but recently I switched to adding top and bottom borders after being inspired by &lt;a href=&quot;https://starbreaker.org/&quot;&gt;Starbreaker&lt;/a&gt;&#39;s website, who also has a post about footnotes, &lt;a href=&quot;https://starbreaker.org/blog/tech/footnotes-no-fun-to-create-either/index.html&quot;&gt;&amp;quot;Footnotes: No Fun to Create, Either&amp;quot;&lt;/a&gt;.&lt;/p&gt;
-&lt;details class=&quot;content-disclosure&quot;&gt;
-            &lt;summary class=&quot;content-disclosure__summary&quot;&gt;More ways to use &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; elements&lt;/summary&gt;
-            &lt;div class=&quot;content-disclosure__content&quot;&gt;&lt;p&gt;&lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; have become among my favourite HTML elements due to how useful they are. In addition to extra comments and info, Leilukin&#39;s Hub has also used the elements for the following purposes:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;Table of contents, like the one this very article has&lt;/li&gt;
-&lt;li&gt;Hiding spoilers, like in my &lt;cite&gt;Cassette Beasts&lt;/cite&gt; shrine article, &lt;a href=&quot;https://leilukin.com/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/&quot;&gt;&amp;quot;How Cassette Beasts is Much More than a Pokémon Clone&amp;quot;&lt;/a&gt;&lt;/li&gt;
-&lt;li&gt;Content warnings, like in my &lt;a href=&quot;https://leilukin.com/shrines/asummersend/gallery/&quot;&gt;&lt;cite&gt;A Summer’s End — Hong Kong 1986&lt;/cite&gt; shrine&#39;s gallery page&lt;/a&gt;, with its styling being inspired by another Kitty Giraudel&#39;s blog post, &lt;a href=&quot;https://kittygiraudel.com/2022/09/04/a-content-warning-component/&quot;&gt;&amp;quot;A content warning component&amp;quot;&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-&lt;/div&gt;
-        &lt;/details&gt;
-&lt;p&gt;As for citing sources, the simplest way would be naming and linking to the source in the main text of your page, though it does mean you may end up repeating the title of the source if you want to attribute to it more than once on your page. This was once the approach of my shrine pages, though I found the pages looked rather cluttered, so I eventually chose to use markdown-it-footnote alongside Eleventy.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;wrapping-up&quot;&gt;Wrapping Up&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#wrapping-up&quot; aria-labelledby=&quot;wrapping-up&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Creating and maintaining footnotes on web pages is tricky, so I hope my article about accessible footnotes is helpful if you want to create them.&lt;/p&gt;
-&lt;p&gt;I am still not completely certain if my method is the best, although I tried to the best of my abilities, so I am interested in hearing feedback for my way of implementing accessible footnotes.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h2&quot;&gt;
-&lt;h2 id=&quot;update-3-december-2024-enlarge-link-target-area&quot;&gt;Update 3 December 2024: Enlarge Link Target Area&lt;/h2&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#update-3-december-2024-enlarge-link-target-area&quot; aria-labelledby=&quot;update-3-december-2024-enlarge-link-target-area&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;On 3 December 2024, &lt;a href=&quot;https://home.hedy.dev/&quot;&gt;~hedy&lt;/a&gt; emailed me talking about this article, offering additional tips for improving footnotes. She also recommended me to check out &lt;a href=&quot;https://seirdy.one/&quot;&gt;Seirdy&lt;/a&gt;&#39;s blog as a reference for formatting footnotes.&lt;/p&gt;
-&lt;p&gt;I found ~hedy&#39;s suggestions good, so I made further improvements to my footnotes, by enlarging the target area of links. To achieve this, I changed the reference labels and footnote backlinks by using visible longer link text instead of ARIA labels.&lt;/p&gt;
-&lt;p&gt;Specifically, for reference labels, I now use &amp;quot;[Note 1]&amp;quot; instead of just a number like &amp;quot;[1]&amp;quot;, while for footnote backlinks, I use &amp;quot;↩︎ Back to reference 1&amp;quot; instead of just a ↩︎ symbol.&lt;/p&gt;
-&lt;p&gt;In addition, I wrap each footnote backlink in a paragraph element (&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;), to place each backlink per line to improve footnotes&#39; readability.&lt;/p&gt;
-&lt;p&gt;Larger link target area is even better because mobile device users would find it easier to tap on the reference links and the footnote backlinks, and sighted visitors on desktop are also benefited because they can see the purpose of these links on plain slight.&lt;/p&gt;
-&lt;div class=&quot;heading-wrapper h3&quot;&gt;
-&lt;h3 id=&quot;updated-html-markup&quot;&gt;Updated HTML Markup&lt;/h3&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#updated-html-markup&quot; aria-labelledby=&quot;updated-html-markup&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Here is an example of how the final HTML markup would look like with larger link target area:&lt;/p&gt;
-&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This is a paragraph with the first footnote reference. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[Note 1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Here is the second paragraph with the second footnote reference. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[Note 2]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This the third paragraph, but with a foootnote reference that points to the first footnote. &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;sup&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-ref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fnref1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;[Note 1:1]&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;sup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;hr&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes-sep&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;section&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footnotes&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ol&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnotes-list&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fn1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	        First footnote
-	        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎ Back to reference 1&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref1:1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎ Back to reference 1:1&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fn2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	        Second footnote
-	        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fnref2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footnote-backref&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;↩︎ Back to reference 2&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-	    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
-&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;section&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-&lt;div class=&quot;heading-wrapper h3&quot;&gt;
-&lt;h3 id=&quot;updated-markdown-it-footnotes-configuration&quot;&gt;Updated markdown-it-footnotes Configuration&lt;/h3&gt;
-&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#updated-markdown-it-footnotes-configuration&quot; aria-labelledby=&quot;updated-markdown-it-footnotes-configuration&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
-&lt;p&gt;Here is the code of the configuration for the markdown-it-footnotes plugin:&lt;/p&gt;
-&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// markdown-it plugins&lt;/span&gt;
-&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; markdownIt &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;markdown-it&quot;&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;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; markdownItFootnote &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;markdown-it-footnote&quot;&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;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&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;span class=&quot;token comment&quot;&gt;/* Markdown Overrides */&lt;/span&gt;
-    markdownLibrary &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;markdownIt&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;span class=&quot;token literal-property property&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&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;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 function&quot;&gt;use&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;markdownItFootnote&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 comment&quot;&gt;// Configure markdown-it-footnote&lt;/span&gt;
-    markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;footnote_block_open&lt;/span&gt; &lt;span class=&quot;token operator&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;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
-        &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;hr class=&quot;footnotes-sep&quot;&gt;&#92;n&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;
-        &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;section class=&quot;footnotes&quot;&gt;&#92;n&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;
-        &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&amp;lt;h2&gt;Footnotes&amp;lt;/h2&gt;&#92;n&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&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;
-
-    markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;footnote_anchor&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; slf&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-        &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; id &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; slf&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;footnote_anchor_name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; slf&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 keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;idx&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;meta&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;subId &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; id &lt;span class=&quot;token operator&quot;&gt;+=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;idx&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;meta&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;subId&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-        &lt;span class=&quot;token comment&quot;&gt;/* ↩ with escape code to prevent display as Apple Emoji on iOS */&lt;/span&gt;
-        &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
-            &amp;lt;p class=&quot;footnote-item__back&quot;&gt;
-                &amp;lt;a href=&quot;#fnref&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;id&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot; class=&quot;footnote-backref&quot;&gt;
-                    &amp;lt;span aria-hidden=&quot;true&quot;&gt;&#92;u21a9&#92;uFE0E&amp;lt;/span&gt;
-                    Back to reference &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;id&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
-                &amp;lt;/a&gt;
-            &amp;lt;/p&gt;
-        &lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; renderRules &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-        &lt;span class=&quot;token literal-property property&quot;&gt;footnote_caption&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&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 string&quot;&gt;&#39;[Note &#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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-    Object&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;renderRules&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 function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;rule&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-        &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; defaultRender &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;rule&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-        markdownLibrary&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rules&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;rule&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; self&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-            &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defaultRender&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tokens&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; idx&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; self&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 function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;renderRules&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;rule&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;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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-    &lt;span class=&quot;token comment&quot;&gt;/* This is the part that tells 11ty to swap to our custom config */&lt;/span&gt;
-    eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setLibrary&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;md&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; markdownLibrary&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;
 </content>
        </entry>
 </feed>
--- a/guestbook/index.html
+++ b/guestbook/index.html
@ -527,7 +527,8 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

 <p>JavaScript is required for this guestbook to function. Special thanks to <a href="https://groundedwren.neocities.org/pages/controls/guestbookDemo">Vera Konigin</a> for this guestbook widget!</p>

-<gw-comment-form id="guestbookForm" titleText="Sign My Guestbook" encodedPath="MTI0MzI0MTMxMDY2NDY1OTA3Ni9KUU52ajM2OUJfZDhEaXB5b29VcllBN2dTZmQwMWxCY1ViNy1VNDVPVkxYa0hvRWtNRmRqclk1NTVCLVdaWUc5Q3dMMA==" fallbackEmail="&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;"></gw-comment-form>
+<gw-comment-form id="guestbookForm" titleText="Sign My Guestbook" encodedPath="MTI0MzI0MTMxMDY2NDY1OTA3Ni9KUU52ajM2OUJfZDhEaXB5b29VcllBN2dTZmQwMWxCY1ViNy1VNDVPVkxYa0hvRWtNRmRqclk1NTVCLVdaWUc5Q3dMMA==" fallbackEmail="<span class=" email-encoded"="">contact@leilukin<b>.example</b>.com"
+></gw-comment-form>
 <noscript>
    <div class="inline-banner" style="margin: 2em 0;">
        <p>Guestbook form cannot be loaded because you have disabled JavaScript.</p>
@ -554,7 +555,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/index.html
+++ b/index.html
@ -396,7 +396,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    <p>You can browse all my contents published on this site through the <a href="/archive">Archive</a> page, or the <a href="/categories">Content Categories</a> page. You can use the <a href="/sitemap">site map</a> to navigate this website.</p>

-    <p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>! You can also contact me by <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">sending me an email</a>. Using <a href="https://useplaintext.email/">plain text email</a> is encouraged.</p>
+    <p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>! You can also contact me by <a rel="nofollow, noindex" href="mail/">sending me an email</a>. Using <a href="https://useplaintext.email/">plain text email</a> is encouraged.</p>

    <p>Read the <a href="/about">About</a> page to learn more about this site and its webmaster.</p>

@ -436,10 +436,9 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
    <h2>What is New?</h2>
    <div class="text-box">
        
-            <h3>Changelog: 9 December 2024</h3>
+            <h3>Changelog: 10 December 2024</h3>
            <ul>
-<li>Add table of contents to each tab section of the <a href="/links">Links</a> page.</li>
-<li>Add link to my <a href="https://www.pixelcatsend.com/profile&amp;id=24121">Pixel Cat's End profile</a> to my <a href="/adoptables">Adoptables</a> page. Free free to check out my not-cats!</li>
+<li>Obfuscate my email address with CSS and HTTP redirects. (Credit to Spencer Mortensen's article, <a href="https://spencermortensen.com/articles/email-obfuscation/">&quot;Email obfuscation: What works in 2024?&quot;</a>)</li>
 </ul>

        <p><a href="/changelogs">View all site changelogs</a></p>
@ -674,7 +673,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/links/index.html
+++ b/links/index.html
@ -1151,7 +1151,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/now/index.html
+++ b/now/index.html
@ -404,7 +404,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/projects/code/bellabuffs-phpmailer/index.html
+++ b/projects/code/bellabuffs-phpmailer/index.html
@ -420,7 +420,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
        <footer class="footer">
    <p>
        <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
-        <a href="mailto:&#x63;&#x6F;&#x6E;&#x74;&#x61;&#x63;&#x74;&#x40;&#x6C;&#x65;&#x69;&#x6C;&#x75;&#x6B;&#x69;&#x6E;&#x2E;&#x63;&#x6F;&#x6D;">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
+        <a rel="nofollow, noindex" href="mail/">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
    </p>
    <h2 class="visually-hidden">Footer Navigation:</h2>
    
--- a/Show More
+++ b/Show More