Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Build: (6cbeebc) Add 3 December 2024 changelog

This commit is contained in:
helenclx 2024-12-03 15:57:16 +00:00
parent e9211da424
commit 858db12d75
19 changed files with 520 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
archive/index.html
View File

@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>
@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>
@ -419,7 +419,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>

94
articles/accessible-footnotes/index.html
View File

@ -429,10 +429,12 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<div class="article__info"> <div class="article__info">
<p class="article__info--desc">How I implement accessible footnotes, at least to the best of my ability. Written for 32-Bit Cafe&#39;s Community Code Jam #5.</p> <p class="article__info--desc">How I implement accessible footnotes, at least to the best of my ability. Written for 32-Bit Cafe&#39;s Community Code Jam #5.</p>
<p> <p>
4,069 words. 5,535 words.
Posted on <time datetime="2024-08-06T00:04:00+0800">6 August 2024</time> by Leilukin Posted on <time datetime="2024-08-06T00:04:00+0800">6 August 2024</time> by Leilukin
</p> </p>
<p>Last updated on <time datetime="2024-12-03T23:51:27+0800">3 December 2024</time></p>
<p>Categories: <p>Categories:
@ -471,7 +473,9 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<li><a href="#final-html-markup-for-accessible-footnotes">Final HTML Markup for Accessible Footnotes</a></li> <li><a href="#final-html-markup-for-accessible-footnotes">Final HTML Markup for Accessible Footnotes</a></li>
<li><a href="#configure-markdown-it-footnote-in-eleventys-configuration-file">Configure markdown-it-footnote in Eleventy's Configuration File</a></li> <li><a href="#configure-markdown-it-footnote-in-eleventys-configuration-file">Configure markdown-it-footnote in Eleventy's Configuration File</a></li>
<li><a href="#bonus-alternatives-to-footnotes">Bonus: Alternatives to Footnotes</a></li> <li><a href="#bonus-alternatives-to-footnotes">Bonus: Alternatives to Footnotes</a></li>
<li><a href="#wrapping-up">Wrapping Up</a></li></ol></nav> <li><a href="#wrapping-up">Wrapping Up</a></li>
<li><a href="#update-3-december-2024-enlarge-link-target-area">Update 3 December 2024: Enlarge Link Target Area</a><ol><li><a href="#updated-html-markup">Updated HTML Markup</a></li>
<li><a href="#updated-markdown-it-footnotes-configuration">Updated markdown-it-footnotes Configuration</a></li></ol></li></ol></nav>
</details> </details>
</details-utils> </details-utils>
</aside> </aside>
@ -490,7 +494,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2 id="about-footnotes">About Footnotes</h2> <h2 id="about-footnotes">About Footnotes</h2>
<a class="heading-anchor" href="#about-footnotes" aria-labelledby="about-footnotes"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#about-footnotes" aria-labelledby="about-footnotes"><span hidden="">#</span></a></div>
<p>Plagiarism.org <a href="https://www.plagiarism.org/article/what-are-footnotes">defines footnotes</a> 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.</p> <p>Plagiarism.org <a href="https://www.plagiarism.org/article/what-are-footnotes">defines footnotes</a> 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.</p>
<p>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 <a href="https://leilukin.com/shrines/asummersend/trivia/">trivia page of my <cite>A Summer’s End — Hong Kong 1986</cite> shrine 1</a> and the <a href="https://leilukin.com/shrines/cassettebeasts/facts/">facts page of my <cite>Cassette Beasts</cite> shrine</a>. You are free to look at the HTML and CSS for reference, including when you are reading this article as I am explaining how I implement the footnotes.</p> <p>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 <a href="/shrines/asummersend/trivia/">trivia page of my <cite>A Summer’s End — Hong Kong 1986</cite> shrine 1</a> and the <a href="/shrines/cassettebeasts/facts/">facts page of my <cite>Cassette Beasts</cite> shrine</a>. You are free to look at the HTML and CSS for reference.</p>
<p>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.</p> <p>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.</p>
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="attempted-to-use-css-counters">Attempted to Use CSS Counters</h2> <h2 id="attempted-to-use-css-counters">Attempted to Use CSS Counters</h2>
@ -666,6 +670,90 @@ module<span class="token punctuation">.</span><span class="token function-variab
<a class="heading-anchor" href="#wrapping-up" aria-labelledby="wrapping-up"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#wrapping-up" aria-labelledby="wrapping-up"><span hidden="">#</span></a></div>
<p>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.</p> <p>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.</p>
<p>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.</p> <p>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.</p>
<div class="heading-wrapper h2">
<h2 id="update-3-december-2024-enlarge-link-target-area">Update 3 December 2024: Enlarge Link Target Area</h2>
<a class="heading-anchor" href="#update-3-december-2024-enlarge-link-target-area" aria-labelledby="update-3-december-2024-enlarge-link-target-area"><span hidden="">#</span></a></div>
<p>On 3 December 2024, <a href="https://home.hedy.dev/">~hedy</a> emailed me talking about this article, offering additional tips for improving footnotes. She also recommended me to check out <a href="https://seirdy.one/">Seirdy</a>'s blog as a reference for formatting footnotes.</p>
<p>I found ~hedy'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.</p>
<p>Specifically, for reference labels, I now use &quot;[Note 1]&quot; instead of just a number like &quot;[1]&quot;, while for footnote backlinks, I use &quot;↩︎ Back to reference 1&quot; instead of just a ↩︎ symbol.</p>
<p>In addition, I wrap each footnote backlink in a paragraph element (<code>&lt;p&gt;</code>), to place each backlink per line to improve footnotes' readability.</p>
<p>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.</p>
<div class="heading-wrapper h3">
<h3 id="updated-html-markup">Updated HTML Markup</h3>
<a class="heading-anchor" href="#updated-html-markup" aria-labelledby="updated-html-markup"><span hidden="">#</span></a></div>
<p>Here is an example of how the final HTML markup would look like with larger link target area:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is a paragraph with the first footnote reference. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-ref<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fn1<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fnref1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>[Note 1]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Here is the second paragraph with the second footnote reference. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-ref<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fn2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fnref2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>[Note 2]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This the third paragraph, but with a foootnote reference that points to the first footnote. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-ref<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fn1<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fnref1:1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>[Note 1:1]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnotes-sep<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnotes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Footnotes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnotes-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fn1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
First footnote
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fnref1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-backref<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>↩︎ Back to reference 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fnref1:1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-backref<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>↩︎ Back to reference 1:1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fn2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Second footnote
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fnref2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footnote-backref<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>↩︎ Back to reference 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></code></pre>
<div class="heading-wrapper h3">
<h3 id="updated-markdown-it-footnotes-configuration">Updated markdown-it-footnotes Configuration</h3>
<a class="heading-anchor" href="#updated-markdown-it-footnotes-configuration" aria-labelledby="updated-markdown-it-footnotes-configuration"><span hidden="">#</span></a></div>
<p>Here is the code of the configuration for the markdown-it-footnotes plugin:</p>
<pre class="language-js" tabindex="0"><code class="language-js"><span class="token comment">// markdown-it plugins</span>
<span class="token keyword">const</span> markdownIt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> markdownItFootnote <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it-footnote"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> markdownLibrary<span class="token punctuation">;</span>
module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">/* Markdown Overrides */</span>
markdownLibrary <span class="token operator">=</span> <span class="token function">markdownIt</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">html</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>markdownItFootnote<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Configure markdown-it-footnote</span>
markdownLibrary<span class="token punctuation">.</span>renderer<span class="token punctuation">.</span>rules<span class="token punctuation">.</span><span class="token function-variable function">footnote_block_open</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
<span class="token string">'&lt;hr class="footnotes-sep">\n'</span> <span class="token operator">+</span>
<span class="token string">'&lt;section class="footnotes">\n'</span> <span class="token operator">+</span>
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;h2>Footnotes&lt;/h2>\n</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
markdownLibrary<span class="token punctuation">.</span>renderer<span class="token punctuation">.</span>rules<span class="token punctuation">.</span><span class="token function-variable function">footnote_anchor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">tokens<span class="token punctuation">,</span> idx<span class="token punctuation">,</span> options<span class="token punctuation">,</span> env<span class="token punctuation">,</span> slf</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> id <span class="token operator">=</span> slf<span class="token punctuation">.</span>rules<span class="token punctuation">.</span><span class="token function">footnote_anchor_name</span><span class="token punctuation">(</span>tokens<span class="token punctuation">,</span> idx<span class="token punctuation">,</span> options<span class="token punctuation">,</span> env<span class="token punctuation">,</span> slf<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>tokens<span class="token punctuation">[</span>idx<span class="token punctuation">]</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>subId <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> id <span class="token operator">+=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>tokens<span class="token punctuation">[</span>idx<span class="token punctuation">]</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>subId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token comment">/* ↩ with escape code to prevent display as Apple Emoji on iOS */</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
&lt;p class="footnote-item__back">
&lt;a href="#fnref</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" class="footnote-backref">
&lt;span aria-hidden="true">\u21a9\uFE0E&lt;/span>
Back to reference </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
&lt;/a>
&lt;/p>
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> renderRules <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">footnote_caption</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'['</span><span class="token punctuation">,</span> <span class="token string">'[Note '</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>renderRules<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">rule</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> defaultRender <span class="token operator">=</span> markdownLibrary<span class="token punctuation">.</span>renderer<span class="token punctuation">.</span>rules<span class="token punctuation">[</span>rule<span class="token punctuation">]</span><span class="token punctuation">;</span>
markdownLibrary<span class="token punctuation">.</span>renderer<span class="token punctuation">.</span>rules<span class="token punctuation">[</span>rule<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">tokens<span class="token punctuation">,</span> idx<span class="token punctuation">,</span> options<span class="token punctuation">,</span> env<span class="token punctuation">,</span> self</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">defaultRender</span><span class="token punctuation">(</span>tokens<span class="token punctuation">,</span> idx<span class="token punctuation">,</span> options<span class="token punctuation">,</span> env<span class="token punctuation">,</span> self<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token operator">...</span>renderRules<span class="token punctuation">[</span>rule<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* This is the part that tells 11ty to swap to our custom config */</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> markdownLibrary<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

4
assets/css/plugins.css
View File

@ -39,10 +39,12 @@
.footnotes-list { .footnotes-list {
display: grid; display: grid;
gap: 0.3em; gap: 1em;
} }
.footnotes-list :target { .footnotes-list :target {
background-color: var(--clr-quote-bg); background-color: var(--clr-quote-bg);
outline: 0.1em dashed var(--clr-title-border); outline: 0.1em dashed var(--clr-title-border);
outline-offset: 0.1em;
} }
*:not([class]) + .footnote-item__back { margin-top: 0.5em; }

6
categories/star-wars-kotor-2/index.html
View File

@ -402,7 +402,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>
@ -412,7 +412,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>
@ -422,7 +422,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>

2
categories/star-wars-kotor/index.html
View File

@ -402,7 +402,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>

4
categories/video-game-mods/index.html
View File

@ -402,7 +402,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>
@ -412,7 +412,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a> </a>
</p> </p>
<time datetime="Tue Dec 03 2024 11:05:41 GMT+0000 (Coordinated Universal Time)">3 December 2024</time> <time datetime="Tue Dec 03 2024 15:57:08 GMT+0000 (Coordinated Universal Time)">3 December 2024</time>
</li> </li>
<li> <li>

12
changelogs/2024/index.html
View File

@ -429,6 +429,18 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<div class="heading-wrapper h2">
<h2 id="2024-12-03">
3 December 2024
</h2>
<a class="heading-anchor" href="#2024-12-03" aria-labelledby="2024-12-03"><span hidden="">#</span></a>
</div>
<ul>
<li>Improve footnotes by enlarging the target area of reference links and footntoe backlinks.</li>
<li>Update article <a href="/articles/accessible-footnotes/#update-3-december-2024-enlarge-link-target-area">&quot;How I (Tried to) Implement Accessible Footnotes&quot;</a> with information about improving footnote links' target area.</li>
</ul>
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="2024-12-01"> <h2 id="2024-12-01">
1 December 2024 1 December 2024

11
changelogs/index.html
View File

@ -473,6 +473,12 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Tue Dec 03 2024 15:53:36 GMT+0000 (Coordinated Universal Time)">3 December 2024</time></h3>
<ul>
<li>Improve footnotes by enlarging the target area of reference links and footntoe backlinks.</li>
<li>Update article <a href="/articles/accessible-footnotes/#update-3-december-2024-enlarge-link-target-area">&quot;How I (Tried to) Implement Accessible Footnotes&quot;</a> with information about improving footnote links' target area.</li>
</ul>
<h3 class="date-style"><time datetime="Sun Dec 01 2024 05:01:33 GMT+0000 (Coordinated Universal Time)">1 December 2024</time></h3> <h3 class="date-style"><time datetime="Sun Dec 01 2024 05:01:33 GMT+0000 (Coordinated Universal Time)">1 December 2024</time></h3>
<ul> <ul>
<li>New blog post: <a href="/blog/posts/2024-12-01-indieweb-carnival-november-2024-impact">IndieWeb Carnival November 2024: Impact</a></li> <li>New blog post: <a href="/blog/posts/2024-12-01-indieweb-carnival-november-2024-impact">IndieWeb Carnival November 2024: Impact</a></li>
@ -599,11 +605,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</li> </li>
</ul> </ul>
<h3 class="date-style"><time datetime="Thu Jun 27 2024 05:09:00 GMT+0000 (Coordinated Universal Time)">27 June 2024</time></h3>
<ul>
<li>Added a <a href="/articles/palestine-masterlist/#spotlight-crowdfunding-campaigns">Spotlight Crowdfunding Campaigns</a> section to my <a href="/articles/palestine-masterlist">Palestine masterlist</a> to highlight fundraising campaigns that I have been asked to help and share by Palestinians on Tumblr, and that have been vetted by other Palestinians on Tumblr.</li>
</ul>

10
changelogs/page/2/index.html
View File

@ -473,6 +473,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Thu Jun 27 2024 05:09:00 GMT+0000 (Coordinated Universal Time)">27 June 2024</time></h3>
<ul>
<li>Added a <a href="/articles/palestine-masterlist/#spotlight-crowdfunding-campaigns">Spotlight Crowdfunding Campaigns</a> section to my <a href="/articles/palestine-masterlist">Palestine masterlist</a> to highlight fundraising campaigns that I have been asked to help and share by Palestinians on Tumblr, and that have been vetted by other Palestinians on Tumblr.</li>
</ul>
<h3 class="date-style"><time datetime="Wed Jun 26 2024 10:39:00 GMT+0000 (Coordinated Universal Time)">26 June 2024</time></h3> <h3 class="date-style"><time datetime="Wed Jun 26 2024 10:39:00 GMT+0000 (Coordinated Universal Time)">26 June 2024</time></h3>
<ul> <ul>
<li>Added my other websites to my <a href="/projects">Projects page</a>.</li> <li>Added my other websites to my <a href="/projects">Projects page</a>.</li>
@ -597,11 +602,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<li>Add <a href="/accessibility/">accessibility statement</a>.</li> <li>Add <a href="/accessibility/">accessibility statement</a>.</li>
</ul> </ul>
<h3 class="date-style"><time datetime="Mon May 20 2024 04:31:00 GMT+0000 (Coordinated Universal Time)">20 May 2024</time></h3>
<ul>
<li>Replace the entire site's default font from Noto Sans to Lexend.</li>
</ul>

10
changelogs/page/3/index.html
View File

@ -473,6 +473,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Mon May 20 2024 04:31:00 GMT+0000 (Coordinated Universal Time)">20 May 2024</time></h3>
<ul>
<li>Replace the entire site's default font from Noto Sans to Lexend.</li>
</ul>
<h3 class="date-style"><time datetime="Sun May 19 2024 14:30:00 GMT+0000 (Coordinated Universal Time)">19 May 2024</time></h3> <h3 class="date-style"><time datetime="Sun May 19 2024 14:30:00 GMT+0000 (Coordinated Universal Time)">19 May 2024</time></h3>
<ul> <ul>
<li>Replace the <a href="https://www.htmlcommentbox.com/">HTML Comment Box</a> widget on the <a href="/guestbook">guestbook page</a> with a guestbook that is powered by <a href="https://firebase.google.com/docs/database/">Firebase Realtime Database</a>.</li> <li>Replace the <a href="https://www.htmlcommentbox.com/">HTML Comment Box</a> widget on the <a href="/guestbook">guestbook page</a> with a guestbook that is powered by <a href="https://firebase.google.com/docs/database/">Firebase Realtime Database</a>.</li>
@ -574,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-13-My-Cassette-Beasts-Pombomb-Plushie-Arrived">My Cassette Beasts Pombomb Plushie Arrived!</a></li> <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>
</ul> </ul>
<h3 class="date-style"><time datetime="Wed Oct 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">4 October 2023</time></h3>
<ul>
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Updated the Development History section of the <a href="/shrines/cassettebeasts/trivia">Trivia</a> page with info about the release of Update 1.5 and &quot;Pier of the Unknown&quot; DLC.</li>
</ul>

11
changelogs/page/4/index.html
View File

@ -473,6 +473,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Wed Oct 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">4 October 2023</time></h3>
<ul>
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Updated the Development History section of the <a href="/shrines/cassettebeasts/trivia">Trivia</a> page with info about the release of Update 1.5 and &quot;Pier of the Unknown&quot; DLC.</li>
</ul>
<h3 class="date-style"><time datetime="Tue Oct 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">3 October 2023</time></h3> <h3 class="date-style"><time datetime="Tue Oct 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">3 October 2023</time></h3>
<ul> <ul>
<li>Changed this website's font to Noto Sans.</li> <li>Changed this website's font to Noto Sans.</li>
@ -591,12 +596,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added a <a href="/shrines/cassettebeasts/trivia">Trivia</a></li> <li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added a <a href="/shrines/cassettebeasts/trivia">Trivia</a></li>
</ul> </ul>
<h3 class="date-style"><time datetime="Tue Aug 08 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">8 August 2023</time></h3>
<ul>
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added a <a href="/shrines/cassettebeasts/featured">Featured</a> page.</li>
<li>Added new resource: <a href="/resources/web-building-resources.html">Web Building Resources</a>.</li>
</ul>

11
changelogs/page/5/index.html
View File

@ -473,6 +473,12 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Tue Aug 08 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">8 August 2023</time></h3>
<ul>
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Added a <a href="/shrines/cassettebeasts/featured">Featured</a> page.</li>
<li>Added new resource: <a href="/resources/web-building-resources.html">Web Building Resources</a>.</li>
</ul>
<h3 class="date-style"><time datetime="Thu Aug 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">3 August 2023</time></h3> <h3 class="date-style"><time datetime="Thu Aug 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">3 August 2023</time></h3>
<ul> <ul>
<li>Launched a new <a href="/shrines/">shrine</a>: <a href="/shrines/cassettebeasts/">Cassette Beasts</a>.</li> <li>Launched a new <a href="/shrines/">shrine</a>: <a href="/shrines/cassettebeasts/">Cassette Beasts</a>.</li>
@ -596,11 +602,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<li>Changed the color of subheadings.</li> <li>Changed the color of subheadings.</li>
</ul> </ul>
<h3 class="date-style"><time datetime="Thu Mar 02 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">2 March 2023</time></h3>
<ul>
<li><a href="/shrines/starwarskotor/">Star Wars: Knights of the Old Republic shrine</a>: Updated the <a href="/shrines/starwarskotor/guides/">Guides page</a> to add a section for lists of cheats for the KotOR games.</li>
</ul>

10
changelogs/page/6/index.html
View File

@ -473,6 +473,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Thu Mar 02 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">2 March 2023</time></h3>
<ul>
<li><a href="/shrines/starwarskotor/">Star Wars: Knights of the Old Republic shrine</a>: Updated the <a href="/shrines/starwarskotor/guides/">Guides page</a> to add a section for lists of cheats for the KotOR games.</li>
</ul>
<h3 class="date-style"><time datetime="Sat Feb 18 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">18 February 2023</time></h3> <h3 class="date-style"><time datetime="Sat Feb 18 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">18 February 2023</time></h3>
<ul> <ul>
<li>Added <a href="/sitemap">Site Map</a>.</li> <li>Added <a href="/sitemap">Site Map</a>.</li>
@ -590,11 +595,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<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> <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>
</ul> </ul>
<h3 class="date-style"><time datetime="Sat Nov 12 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">12 November 2022</time></h3>
<ul>
<li>Added my latest mod, Dahnis Unique Look, to <a href="/projects/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>
</ul>

5
changelogs/page/7/index.html
View File

@ -473,6 +473,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>Latest Changelogs</h2> <h2>Latest Changelogs</h2>
<h3 class="date-style"><time datetime="Sat Nov 12 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">12 November 2022</time></h3>
<ul>
<li>Added my latest mod, Dahnis Unique Look, 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 09 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">9 November 2022</time></h3> <h3 class="date-style"><time datetime="Wed Nov 09 2022 00:00:00 GMT+0000 (Coordinated Universal Time)">9 November 2022</time></h3>
<ul> <ul>
<li>Added my latest mod, TSL Workbench Lightsaber Creation, to <a href="/mycreations/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li> <li>Added my latest mod, TSL Workbench Lightsaber Creation, to <a href="/mycreations/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>

167
feed.xml
View File

@ -4,13 +4,25 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.com/feed.xml" rel="self"/> <link href="https://leilukin.com/feed.xml" rel="self"/>
<link href="https://leilukin.com"/> <link href="https://leilukin.com"/>
<updated>2024-12-03T11:05:45Z</updated> <updated>2024-12-03T15:57:12Z</updated>
<id>https://leilukin.com/</id> <id>https://leilukin.com/</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>
<email>contact@leilukin.com</email> <email>contact@leilukin.com</email>
</author> </author>
<entry>
<title>Changelog: 3 December 2024</title>
<link href="https://leilukin.com/"/>
<updated>2024-12-03T15:53:36Z</updated>
<id>https://leilukin.com/</id>
<content type="html">&lt;ul&gt;
&lt;li&gt;Improve footnotes by enlarging the target area of reference links and footntoe backlinks.&lt;/li&gt;
&lt;li&gt;Update article &lt;a href=&quot;https://leilukin.com/articles/accessible-footnotes/#update-3-december-2024-enlarge-link-target-area&quot;&gt;&amp;quot;How I (Tried to) Implement Accessible Footnotes&amp;quot;&lt;/a&gt; with information about improving footnote links&#39; target area.&lt;/li&gt;
&lt;/ul&gt;
</content>
</entry>
<entry> <entry>
<title>Changelog: 1 December 2024</title> <title>Changelog: 1 December 2024</title>
<link href="https://leilukin.com/"/> <link href="https://leilukin.com/"/>
@ -226,7 +238,7 @@
&lt;h2 id=&quot;about-footnotes&quot;&gt;About Footnotes&lt;/h2&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;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;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, including when you are reading this article as I am explaining how I implement the footnotes.&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;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;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;h2 id=&quot;attempted-to-use-css-counters&quot;&gt;Attempted to Use CSS Counters&lt;/h2&gt;
@ -402,6 +414,90 @@ module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span cla
&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;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;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;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> </content>
</entry> </entry>
@ -413,73 +509,6 @@ module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span cla
<content type="html">&lt;ul&gt; <content type="html">&lt;ul&gt;
&lt;li&gt;Added my first publicly released code snippet on this website: &lt;a href=&quot;https://leilukin.com/projects/snippets/disability-pride-flag-background&quot;&gt;Responsive Disability Pride Flag CSS Background&lt;/a&gt;.&lt;/li&gt; &lt;li&gt;Added my first publicly released code snippet on this website: &lt;a href=&quot;https://leilukin.com/projects/snippets/disability-pride-flag-background&quot;&gt;Responsive Disability Pride Flag CSS Background&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</content>
</entry>
<entry>
<title>Leilukin&#39;s Hub Has Migrated to Hostinger | Blog</title>
<link href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/"/>
<updated>2024-07-26T16:44:00Z</updated>
<id>https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/</id>
<content type="html">&lt;p&gt;Starting with 25 July 2024, Leilukin&#39;s Hub and all its subsites, including its &lt;a href=&quot;https://tumbleblog.leilukin.com/&quot;&gt;tumbleblog&lt;/a&gt; and &lt;a href=&quot;https://fan.leilukin.com/&quot;&gt;fanlisting collective&lt;/a&gt;, have been migrated to &lt;a href=&quot;https://www.hostinger.my/&quot;&gt;Hostinger&lt;/a&gt;. In other words, I have moved hosts again almost two months after &lt;a href=&quot;https://leilukin.com/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub&quot;&gt;moving Leilukin&#39;s Hub to Netlify&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Before talking about why I chose Hostinger as my new website host, I want to talk about why I was considering to move hosts again.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h2&quot;&gt;
&lt;h2 id=&quot;why-decided-to-move-hosts-again&quot;&gt;Why Decided to Move Hosts Again&lt;/h2&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#why-decided-to-move-hosts-again&quot; aria-labelledby=&quot;why-decided-to-move-hosts-again&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;owning-both-static-and-dynamic-sites&quot;&gt;Owning Both Static and Dynamic Sites&lt;/h3&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#owning-both-static-and-dynamic-sites&quot; aria-labelledby=&quot;owning-both-static-and-dynamic-sites&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;The first major reason is that leilukin.com has evolved into more than a static site; since I have also begun to dip my toe into PHP to build dynamic sites, including a tumbleblog, fanlistings and a fanlisting.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.netlify.com/&quot;&gt;Netlify&lt;/a&gt;, which previously hosted the main site of Leilukin&#39;s Hub, does not support PHP hosting, so I hosted my tumbleblog and fanlisting collective on &lt;a href=&quot;https://www.infinityfree.com/&quot;&gt;InfinityFree&lt;/a&gt;, one of the very few platforms to provide PHP and MySQL website hosting for free. InfinityFree has been a decent platform for PHP and MySQL beginners to experiment with the languages, however as you might have expected, its free hosting plan comes with limitations.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h3&quot;&gt;
&lt;h3 id=&quot;limitations-of-infinityfrees-free-hosting&quot;&gt;Limitations of InfinityFree&#39;s Free Hosting&lt;/h3&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#limitations-of-infinityfrees-free-hosting&quot; aria-labelledby=&quot;limitations-of-infinityfrees-free-hosting&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;InfinityFree places &lt;a href=&quot;https://forum.infinityfree.com/docs?topic=49356&quot;&gt;their own security measures&lt;/a&gt; on websites on their free hosting plan to ensure &lt;a href=&quot;https://forum.infinityfree.com/docs?topic=49353&quot;&gt;only regular browsers can access these websites&lt;/a&gt;. While it is understandable to apply these security measures on free websites to prevent abuse, it can be a dealbreaker depending on your needs.&lt;/p&gt;
&lt;p&gt;In my case, the thing that frustrated me the most about InfinityFree&#39;s security system on their free websites is the fact that my tumbleblog was unable to provide RSS feed in a usual way. &lt;a href=&quot;https://chyrplite.net/&quot;&gt;Chyrp Lite&lt;/a&gt;, which powers my tumbleblog, includes the feature of providing blog RSS feeds, but InfinityFree&#39;s security system blocks feed readers from reading feeds from websites on their free hosting, so I had to use Feedburner to proxy my tumbleblog&#39;s feeds to get around it.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h3&quot;&gt;
&lt;h3 id=&quot;invested-in-webmastery-enough-to-spend-money&quot;&gt;Invested in Webmastery Enough to Spend Money&lt;/h3&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#invested-in-webmastery-enough-to-spend-money&quot; aria-labelledby=&quot;invested-in-webmastery-enough-to-spend-money&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;Lastly, I am invested in building my own websites enough to spend money on them, as already evident in my purchase and registration of a custom domain name leilukin.com for this website.&lt;/p&gt;
&lt;p&gt;That said, I do need to consider carefully about how much money I am going to spend on my hobbies, which factors in why I eventually chose Hostinger to host my websites.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h2&quot;&gt;
&lt;h2 id=&quot;why-hostinger&quot;&gt;Why Hostinger&lt;/h2&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#why-hostinger&quot; aria-labelledby=&quot;why-hostinger&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;affordable-price-with-regional-pricing&quot;&gt;Affordable Price with Regional Pricing&lt;/h3&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#affordable-price-with-regional-pricing&quot; aria-labelledby=&quot;affordable-price-with-regional-pricing&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;The biggest draw about Hostinger is its pricing — it is not only cheap, but also offering regional pricing. This is a huge deal for people who live in countries with weaker currencies than US Dollars and Euro, as the pricing scales to the level we are more comfortable spending, without worrying about currency conversion rates.&lt;/p&gt;
&lt;p&gt;For reference, as of this writing, 1 USD equals approximately 4.6 Malaysian Ringgit (MYR), while the minimum wage in Malaysia is 1,500 MYR, which approximately equals to 321.03 USD, per month. Therefore, if a Malaysian like me is going to spend money, every USD counts.&lt;/p&gt;
&lt;p&gt;Compare the pricing of the 48-month Premium Shared Hosting plan, which was what I ended up spending to host my websites, of &lt;a href=&quot;https://www.hostinger.my/&quot;&gt;Hostinger.my&lt;/a&gt; to &lt;a href=&quot;https://www.hostinger.com/&quot;&gt;Hostinger.com&lt;/a&gt;: The plan costs 7.99 per month in MYR (approximately 1.71 USD), while 2.99 per month in USD (approximately 13.97 MYR). This means I ended up saving almost 6 MYR per month by purchasing the plan on the Malaysian branch of Hostinger. This is just comparing Hostinger&#39;s own hosting plan with different currencies, let alone comparing Hostinger&#39;s hosting plan to its competitors.&lt;/p&gt;
&lt;p&gt;As a bonus, being able to purchase Hostinger&#39;s hosting plans in Malaysian Ringgit means I can pay by directly transferring money from a Malaysian bank account.&lt;/p&gt;
&lt;p&gt;Being cheap is not even the only reason I chose Hostinger; what is better than being cheap is to provide many, many features at the same time.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h3&quot;&gt;
&lt;h3 id=&quot;many-many-features-at-a-cheap-price&quot;&gt;Many, Many Features at a Cheap Price&lt;/h3&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#many-many-features-at-a-cheap-price&quot; aria-labelledby=&quot;many-many-features-at-a-cheap-price&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;The cheap price of the Premium Shared Hosting Plan of Hostinger is jam-packed with many features, including but not limited to:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Ability to create up to 100 websites (Netlify allows you to deploy 500 sites, but 100 sites are still significantly more than enough for average users)&lt;/li&gt;
&lt;li&gt;100 GB SSD storage&lt;/li&gt;
&lt;li&gt;Unlimited bandwidth (InfinityFree&#39;s free hosting also allows unlimited bandwidth, but Netlify has a limit of 100GB per month)&lt;/li&gt;
&lt;li&gt;Unlimited MySQL databases (while Infinity has a limit of 400 databases)&lt;/li&gt;
&lt;li&gt;Email accounts included for free&lt;/li&gt;
&lt;li&gt;Built-in Git support, which allows me to continue deploying my main site from its Git repository&lt;/li&gt;
&lt;li&gt;And more!&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;On the subject of email accounts, it is worth pointing out that Hostinger&#39;s Premium Shared Hosting plan allows you to create an email account for each website you made, and you can have up to 100 addresses and forwarders for each email account.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h2&quot;&gt;
&lt;h2 id=&quot;a-birthday-present-for-myself&quot;&gt;A Birthday Present for Myself&lt;/h2&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#a-birthday-present-for-myself&quot; aria-labelledby=&quot;a-birthday-present-for-myself&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;Last but not least, another motivator for me to purchase a premium website hosting plan for my websites now is the fact that my birthday is coming soon on July 28, so I spent money on premium hosting for my websites as a birthday present for myself this year.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h2&quot;&gt;
&lt;h2 id=&quot;domain-names-remaining-at-porkbun&quot;&gt;Domain Names Remaining at Porkbun&lt;/h2&gt;
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#domain-names-remaining-at-porkbun&quot; aria-labelledby=&quot;domain-names-remaining-at-porkbun&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;While Hostinger provides domain registration and transfer service, I chose to have the leilukin.com domain name stay with &lt;a href=&quot;https://porkbun.com/&quot;&gt;Porkbun&lt;/a&gt;, because I already spent money on the domain name, so Hostinger&#39;s hosting plan providing domain name registration for free for the first year does not benefit me.&lt;/p&gt;
&lt;p&gt;In addition, Porkbun&#39;s renewal rate for domain names is cheaper than Hostinger. For example, Porkbun renews the &lt;code&gt;.com&lt;/code&gt; domain extension at 10.37 USD per year, while Hostinger renews at 15.99 USD per year. Even the Malaysian Ringgit pricing of Hostinger&#39;s domain renewal rate for &lt;code&gt;.com&lt;/code&gt;, 55.99 MYR per year, is still more expansive than Porkbun&#39;s approximately 48.3 MYR per year rate.&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/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#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;Leilukin&#39;s Hub&#39;s migration to Hostinger has been smooth. There was no significant change on the front end of my websites after the switch, aside from changing the theme of my tumbleblog, so my websites will continue to operate as usual, as well as improved site performance for my tumbleblog and fanlisting collective by loading custom web fonts faster to the extent I intended by &lt;a href=&quot;https://web.dev/articles/codelab-preload-web-fonts&quot;&gt;preloading the fonts&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Moving hosts for my website again reminds me of one of the benefits of owning a custom domain name of making the host migration more seamless, since it saves the trouble of having to change and update my website&#39;s address every time I move hosts.&lt;/p&gt;
</content> </content>
</entry> </entry>
</feed> </feed>

5
index.html
View File

@ -438,9 +438,10 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<h2>What is New?</h2> <h2>What is New?</h2>
<div class="text-box"> <div class="text-box">
<h3>Changelog: 1 December 2024</h3> <h3>Changelog: 3 December 2024</h3>
<ul> <ul>
<li>New blog post: <a href="/blog/posts/2024-12-01-indieweb-carnival-november-2024-impact">IndieWeb Carnival November 2024: Impact</a></li> <li>Improve footnotes by enlarging the target area of reference links and footntoe backlinks.</li>
<li>Update article <a href="/articles/accessible-footnotes/#update-3-december-2024-enlarge-link-target-area">&quot;How I (Tried to) Implement Accessible Footnotes&quot;</a> with information about improving footnote links' target area.</li>
</ul> </ul>
<p><a href="/changelogs">View all site changelogs</a></p> <p><a href="/changelogs">View all site changelogs</a></p>

124
shrines/asummersend/trivia/index.html
View File

@ -473,7 +473,7 @@
<div class="heading-wrapper h3"> <div class="heading-wrapper h3">
<h3 id="chinese-names">Chinese Names</h3> <h3 id="chinese-names">Chinese Names</h3>
<a class="heading-anchor" href="#chinese-names" aria-labelledby="chinese-names"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#chinese-names" aria-labelledby="chinese-names"><span hidden="">#</span></a></div>
<p>Michelle Cheung's Chinese name is <span lang="zh">張鳳霞</span>, while Sam Wong's Chinese name is <span lang="zh">黃嘉欣</span><sup class="footnote-ref"><a href="#fn1" id="fnref1">[<span class="visually-hidden">Footnote #</span>1]</a></sup>. Oracle and Bone had commented on their idea behind the characters' Chinese names in a <a href="https://oracleandbone.tumblr.com/post/625313027310436352/hi-im-curious-how-you-came-up-with-sam-and">response to a fan's question on Tumblr</a>:</p> <p>Michelle Cheung's Chinese name is <span lang="zh">張鳳霞</span>, while Sam Wong's Chinese name is <span lang="zh">黃嘉欣</span><sup class="footnote-ref"><a href="#fn1" id="fnref1">[Note 1]</a></sup>. Oracle and Bone had commented on their idea behind the characters' Chinese names in a <a href="https://oracleandbone.tumblr.com/post/625313027310436352/hi-im-curious-how-you-came-up-with-sam-and">response to a fan's question on Tumblr</a>:</p>
<blockquote> <blockquote>
<p>A part of how we came up with their names was by referencing names of Hong Kong film actresses from their time period as a little homage to them. We also thought of how their names might reflect their upbringing. For example, despite Michelle being younger than Sam, she has a more old fashioned sounding Chinese name. The meaning of their Chinese names was also important to us. We particularly wanted Michelle’s name to have metaphoric meaning that reflected her story as well as the themes of the game.</p> <p>A part of how we came up with their names was by referencing names of Hong Kong film actresses from their time period as a little homage to them. We also thought of how their names might reflect their upbringing. For example, despite Michelle being younger than Sam, she has a more old fashioned sounding Chinese name. The meaning of their Chinese names was also important to us. We particularly wanted Michelle’s name to have metaphoric meaning that reflected her story as well as the themes of the game.</p>
</blockquote> </blockquote>
@ -481,32 +481,32 @@
<h3 id="birthdays">Birthdays</h3> <h3 id="birthdays">Birthdays</h3>
<a class="heading-anchor" href="#birthdays" aria-labelledby="birthdays"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#birthdays" aria-labelledby="birthdays"><span hidden="">#</span></a></div>
<ul> <ul>
<li>Michelle: February 16<sup class="footnote-ref"><a href="#fn2" id="fnref2">[<span class="visually-hidden">Footnote #</span>2]</a></sup></li> <li>Michelle: February 16<sup class="footnote-ref"><a href="#fn2" id="fnref2">[Note 2]</a></sup></li>
<li>Sam: December 28<sup class="footnote-ref"><a href="#fn3" id="fnref3">[<span class="visually-hidden">Footnote #</span>3]</a></sup></li> <li>Sam: December 28<sup class="footnote-ref"><a href="#fn3" id="fnref3">[Note 3]</a></sup></li>
<li>Cecelia: August 9<sup class="footnote-ref"><a href="#fn4" id="fnref4">[<span class="visually-hidden">Footnote #</span>4]</a></sup></li> <li>Cecelia: August 9<sup class="footnote-ref"><a href="#fn4" id="fnref4">[Note 4]</a></sup></li>
</ul> </ul>
<div class="heading-wrapper h3"> <div class="heading-wrapper h3">
<h3 id="zodiac-signs">Zodiac Signs</h3> <h3 id="zodiac-signs">Zodiac Signs</h3>
<a class="heading-anchor" href="#zodiac-signs" aria-labelledby="zodiac-signs"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#zodiac-signs" aria-labelledby="zodiac-signs"><span hidden="">#</span></a></div>
<ul> <ul>
<li>Michelle: Aquarius<sup class="footnote-ref"><a href="#fn5" id="fnref5">[<span class="visually-hidden">Footnote #</span>5]</a></sup></li> <li>Michelle: Aquarius<sup class="footnote-ref"><a href="#fn5" id="fnref5">[Note 5]</a></sup></li>
<li>Sam: Capricorn<sup class="footnote-ref"><a href="#fn5" id="fnref5:1">[<span class="visually-hidden">Footnote #</span>5:1]</a></sup></li> <li>Sam: Capricorn<sup class="footnote-ref"><a href="#fn5" id="fnref5:1">[Note 5:1]</a></sup></li>
<li>Cecilia: Leo<sup class="footnote-ref"><a href="#fn5" id="fnref5:2">[<span class="visually-hidden">Footnote #</span>5:2]</a></sup></li> <li>Cecilia: Leo<sup class="footnote-ref"><a href="#fn5" id="fnref5:2">[Note 5:2]</a></sup></li>
<li>Joey: Cancer<sup class="footnote-ref"><a href="#fn6" id="fnref6">[<span class="visually-hidden">Footnote #</span>6]</a></sup></li> <li>Joey: Cancer<sup class="footnote-ref"><a href="#fn6" id="fnref6">[Note 6]</a></sup></li>
</ul> </ul>
<div class="heading-wrapper h3"> <div class="heading-wrapper h3">
<h3 id="myers-briggs-type-indicator">Myers–Briggs Type Indicator</h3> <h3 id="myers-briggs-type-indicator">Myers–Briggs Type Indicator</h3>
<a class="heading-anchor" href="#myers-briggs-type-indicator" aria-labelledby="myers-briggs-type-indicator"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#myers-briggs-type-indicator" aria-labelledby="myers-briggs-type-indicator"><span hidden="">#</span></a></div>
<ul> <ul>
<li>Michelle: ISTJ<sup class="footnote-ref"><a href="#fn7" id="fnref7">[<span class="visually-hidden">Footnote #</span>7]</a></sup></li> <li>Michelle: ISTJ<sup class="footnote-ref"><a href="#fn7" id="fnref7">[Note 7]</a></sup></li>
<li>Sam: ESFP<sup class="footnote-ref"><a href="#fn7" id="fnref7:1">[<span class="visually-hidden">Footnote #</span>7:1]</a></sup></li> <li>Sam: ESFP<sup class="footnote-ref"><a href="#fn7" id="fnref7:1">[Note 7:1]</a></sup></li>
<li>Cecelia: ESTJ<sup class="footnote-ref"><a href="#fn7" id="fnref7:2">[<span class="visually-hidden">Footnote #</span>7:2]</a></sup></li> <li>Cecelia: ESTJ<sup class="footnote-ref"><a href="#fn7" id="fnref7:2">[Note 7:2]</a></sup></li>
</ul> </ul>
<div class="heading-wrapper h3"> <div class="heading-wrapper h3">
<h3 id="inspirations">Inspirations</h3> <h3 id="inspirations">Inspirations</h3>
<a class="heading-anchor" href="#inspirations" aria-labelledby="inspirations"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#inspirations" aria-labelledby="inspirations"><span hidden="">#</span></a></div>
<ul> <ul>
<li>The character and fashion of Cecelia has been largely inspired by Anita Mui.<sup class="footnote-ref"><a href="#fn8" id="fnref8">[<span class="visually-hidden">Footnote #</span>8]</a></sup></li> <li>The character and fashion of Cecelia has been largely inspired by Anita Mui.<sup class="footnote-ref"><a href="#fn8" id="fnref8">[Note 8]</a></sup></li>
</ul> </ul>
<footer class="footnotes"> <footer class="footnotes">
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
@ -514,21 +514,105 @@
<a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a> <a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a>
</div> </div>
<ol class="footnotes-list"> <ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Answer to a <a href="https://oracleandbone.tumblr.com/post/650935977958866944/hello-i-love-the-game-to-death-but-i-was-just">fan's question about Sam and Michelle's Chinese names on Tumblr</a> <a aria-label="Back to reference #1" href="#fnref1" class="footnote-backref">↩︎</a></p> <li id="fn1" class="footnote-item"><p>Answer to a <a href="https://oracleandbone.tumblr.com/post/650935977958866944/hello-i-love-the-game-to-death-but-i-was-just">fan's question about Sam and Michelle's Chinese names on Tumblr</a>
</p><p class="footnote-item__back">
<a href="#fnref1" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1
</a>
</p>
<p></p>
</li> </li>
<li id="fn2" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/643241885438197760/spring-day-february-16-is-michelles-birthday">art for Michelle's Birthday</a> on 16 February 2021 <a aria-label="Back to reference #2" href="#fnref2" class="footnote-backref">↩︎</a></p> <li id="fn2" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/643241885438197760/spring-day-february-16-is-michelles-birthday">art for Michelle's Birthday</a> on 16 February 2021
</p><p class="footnote-item__back">
<a href="#fnref2" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 2
</a>
</p>
<p></p>
</li> </li>
<li id="fn3" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/638707575113891840/hit-rewind-december-28-is-sams-birthday-happy">art for Sam's Birthday</a> on 28 December 2020 <a aria-label="Back to reference #3" href="#fnref3" class="footnote-backref">↩︎</a></p> <li id="fn3" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/638707575113891840/hit-rewind-december-28-is-sams-birthday-happy">art for Sam's Birthday</a> on 28 December 2020
</p><p class="footnote-item__back">
<a href="#fnref3" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 3
</a>
</p>
<p></p>
</li> </li>
<li id="fn4" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/625985188093214720/%E9%BB%91%E5%A4%9C%E7%9A%84%E8%B1%B9-night-leopard-august-9-is-cecilias-birthday">art for Cecelia's Birthday</a> on 9 August 2020 <a aria-label="Back to reference #4" href="#fnref4" class="footnote-backref">↩︎</a></p> <li id="fn4" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/625985188093214720/%E9%BB%91%E5%A4%9C%E7%9A%84%E8%B1%B9-night-leopard-august-9-is-cecilias-birthday">art for Cecelia's Birthday</a> on 9 August 2020
</p><p class="footnote-item__back">
<a href="#fnref4" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 4
</a>
</p>
<p></p>
</li> </li>
<li id="fn5" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle">answer on 27 April 2020 on Tumblr</a> <a aria-label="Back to reference #5" href="#fnref5" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #5:1" href="#fnref5:1" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #5:2" href="#fnref5:2" class="footnote-backref">↩︎</a></p> <li id="fn5" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle">answer on 27 April 2020 on Tumblr</a>
</p><p class="footnote-item__back">
<a href="#fnref5" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 5
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref5:1" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 5:1
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref5:2" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 5:2
</a>
</p>
<p></p>
</li> </li>
<li id="fn6" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/616711590970081280/hey-its-the-anon-that-asked-about-the-zodiac">answer on 29 April 2020 on Tumblr</a> <a aria-label="Back to reference #6" href="#fnref6" class="footnote-backref">↩︎</a></p> <li id="fn6" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/616711590970081280/hey-its-the-anon-that-asked-about-the-zodiac">answer on 29 April 2020 on Tumblr</a>
</p><p class="footnote-item__back">
<a href="#fnref6" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 6
</a>
</p>
<p></p>
</li> </li>
<li id="fn7" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a">answer on 29 June 2020 on Tumblr</a> <a aria-label="Back to reference #7" href="#fnref7" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #7:1" href="#fnref7:1" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #7:2" href="#fnref7:2" class="footnote-backref">↩︎</a></p> <li id="fn7" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a">answer on 29 June 2020 on Tumblr</a>
</p><p class="footnote-item__back">
<a href="#fnref7" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 7
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref7:1" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 7:1
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref7:2" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 7:2
</a>
</p>
<p></p>
</li> </li>
<li id="fn8" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/659052064213696512/%E7%83%88%E7%84%B0%E7%B4%85%E5%94%87-august-9-is-cecilias-birthday-happy">art for Cecelia's birthday on 9 August 2021</a> <a aria-label="Back to reference #8" href="#fnref8" class="footnote-backref">↩︎</a></p> <li id="fn8" class="footnote-item"><p>Oracle and Bone's <a href="https://oracleandbone.tumblr.com/post/659052064213696512/%E7%83%88%E7%84%B0%E7%B4%85%E5%94%87-august-9-is-cecilias-birthday-happy">art for Cecelia's birthday on 9 August 2021</a>
</p><p class="footnote-item__back">
<a href="#fnref8" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 8
</a>
</p>
<p></p>
</li> </li>
</ol> </ol>
</footer> </footer>

140
shrines/cassettebeasts/facts/index.html
View File

@ -512,7 +512,7 @@
<a class="heading-anchor" href="#development-history" aria-labelledby="development-history"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#development-history" aria-labelledby="development-history"><span hidden="">#</span></a></div>
<dl> <dl>
<dt>Late 2019</dt> <dt>Late 2019</dt>
<dd>Development of Cassette Beasts began<sup class="footnote-ref"><a href="#fn1" id="fnref1">[<span class="visually-hidden">Footnote #</span>1]</a></sup>.</dd> <dd>Development of Cassette Beasts began<sup class="footnote-ref"><a href="#fn1" id="fnref1">[Note 1]</a></sup>.</dd>
<dt>11 May 2020</dt> <dt>11 May 2020</dt>
<dd><a href="https://www.youtube.com/watch?v=H-bD1Pf3xGY">Reveal trailer</a> released.</dd> <dd><a href="https://www.youtube.com/watch?v=H-bD1Pf3xGY">Reveal trailer</a> released.</dd>
<dt>19 October 2021</dt> <dt>19 October 2021</dt>
@ -567,21 +567,21 @@
<h2 id="design-philosophy">Design Philosophy</h2> <h2 id="design-philosophy">Design Philosophy</h2>
<a class="heading-anchor" href="#design-philosophy" aria-labelledby="design-philosophy"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#design-philosophy" aria-labelledby="design-philosophy"><span hidden="">#</span></a></div>
<p>On 12 October 2023, Bytten Studio wrote a Steam blog post <a href="https://store.steampowered.com/news/app/1321440/view/6349565145235433772">&quot;Cassette Beasts - Design &amp; Expectations&quot;</a> about their design philosophy of <cite>Cassette Beasts</cite> to celebrate the game reaching 350,000+ players.</p> <p>On 12 October 2023, Bytten Studio wrote a Steam blog post <a href="https://store.steampowered.com/news/app/1321440/view/6349565145235433772">&quot;Cassette Beasts - Design &amp; Expectations&quot;</a> about their design philosophy of <cite>Cassette Beasts</cite> to celebrate the game reaching 350,000+ players.</p>
<p><cite>Cassette Beasts</cite> very consciously opens with exploration and combat within the first minute of the game and leaves the lore for later, because Bytten Studio believes in giving players the game first and selling the players on the story later.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[<span class="visually-hidden">Footnote #</span>2]</a></sup></p> <p><cite>Cassette Beasts</cite> very consciously opens with exploration and combat within the first minute of the game and leaves the lore for later, because Bytten Studio believes in giving players the game first and selling the players on the story later.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[Note 2]</a></sup></p>
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="influences-and-inspirations">Influences and Inspirations</h2> <h2 id="influences-and-inspirations">Influences and Inspirations</h2>
<a class="heading-anchor" href="#influences-and-inspirations" aria-labelledby="influences-and-inspirations"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#influences-and-inspirations" aria-labelledby="influences-and-inspirations"><span hidden="">#</span></a></div>
<p>The YouTube channel Lockstin &amp; Gnoggin has a video that explains the names and designs of the monsters and Archangels: <a href="https://www.youtube.com/watch?v=GlKQzL6gpxc">EVERY Cassette Beast EXPLAINED! 🖭</a>. The video was <a href="/assets/shrines/cassettebeasts/socmed/Screenshot-2023-10-05-at-14-27-39-Lockstin-on-X.avif">retweeted</a> by Bytten Studio.</p> <p>The YouTube channel Lockstin &amp; Gnoggin has a video that explains the names and designs of the monsters and Archangels: <a href="https://www.youtube.com/watch?v=GlKQzL6gpxc">EVERY Cassette Beast EXPLAINED! 🖭</a>. The video was <a href="/assets/shrines/cassettebeasts/socmed/Screenshot-2023-10-05-at-14-27-39-Lockstin-on-X.avif">retweeted</a> by Bytten Studio.</p>
<p>The idea of copying monster forms to transform into came from Tom Coxon's dream. Jay Baylis, inspired by <cite>Kamen Rider</cite>, later suggested doing the copying and transforming with physical cassette tapes.<sup class="footnote-ref"><a href="#fn1" id="fnref1:1">[<span class="visually-hidden">Footnote #</span>1:1]</a></sup></p> <p>The idea of copying monster forms to transform into came from Tom Coxon's dream. Jay Baylis, inspired by <cite>Kamen Rider</cite>, later suggested doing the copying and transforming with physical cassette tapes.<sup class="footnote-ref"><a href="#fn1" id="fnref1:1">[Note 1:1]</a></sup></p>
<p>Another oddball source of inspiration for Tom the story <a href="https://thebeatlesneverbrokeup.com/story/">“The Beatles Never Broke Up”</a>, about a man who in 2009 hit his head and woke up in another world where the Beatles still exist, where people still use analogue technology, and where parallel universe travel is commonplace.<sup class="footnote-ref"><a href="#fn1" id="fnref1:2">[<span class="visually-hidden">Footnote #</span>1:2]</a></sup></p> <p>Another oddball source of inspiration for Tom the story <a href="https://thebeatlesneverbrokeup.com/story/">“The Beatles Never Broke Up”</a>, about a man who in 2009 hit his head and woke up in another world where the Beatles still exist, where people still use analogue technology, and where parallel universe travel is commonplace.<sup class="footnote-ref"><a href="#fn1" id="fnref1:2">[Note 1:2]</a></sup></p>
<p>The presentation of Archangels is inspired a little by the Witches in <cite>Puella Magi Madoka Magica</cite>.<sup class="footnote-ref"><a href="#fn1" id="fnref1:3">[<span class="visually-hidden">Footnote #</span>1:3]</a></sup></p> <p>The presentation of Archangels is inspired a little by the Witches in <cite>Puella Magi Madoka Magica</cite>.<sup class="footnote-ref"><a href="#fn1" id="fnref1:3">[Note 1:3]</a></sup></p>
<p>The way the relationship system ties into fusions is heavily influenced by <cite>Steven Universe</cite>, which both Tom and Jay are fans of.<sup class="footnote-ref"><a href="#fn1" id="fnref1:4">[<span class="visually-hidden">Footnote #</span>1:4]</a></sup></p> <p>The way the relationship system ties into fusions is heavily influenced by <cite>Steven Universe</cite>, which both Tom and Jay are fans of.<sup class="footnote-ref"><a href="#fn1" id="fnref1:4">[Note 1:4]</a></sup></p>
<p>The AP system in <cite>Cassette Beasts</cite> is taken from board and card games.<sup class="footnote-ref"><a href="#fn1" id="fnref1:5">[<span class="visually-hidden">Footnote #</span>1:5]</a></sup></p> <p>The AP system in <cite>Cassette Beasts</cite> is taken from board and card games.<sup class="footnote-ref"><a href="#fn1" id="fnref1:5">[Note 1:5]</a></sup></p>
<p>Jay cited comic author Grant Morrison as an influence on the broader themes of the game (as well as the strange English surrealism of the setting), as Morrison's stories often explore the nature of fiction, multiple realities, and their influence on one another.<sup class="footnote-ref"><a href="#fn1" id="fnref1:6">[<span class="visually-hidden">Footnote #</span>1:6]</a></sup></p> <p>Jay cited comic author Grant Morrison as an influence on the broader themes of the game (as well as the strange English surrealism of the setting), as Morrison's stories often explore the nature of fiction, multiple realities, and their influence on one another.<sup class="footnote-ref"><a href="#fn1" id="fnref1:6">[Note 1:6]</a></sup></p>
<p>Archangels Morgante and Aleph were inspired by Morgan le Fay and King Arthur from Arturian legends, but with an unusual twist that Aleph is portrayed as a conqueror instead of a &quot;rightful king&quot; to reflect Britain's history of conquest.<sup class="footnote-ref"><a href="#fn3" id="fnref3">[<span class="visually-hidden">Footnote #</span>3]</a></sup></p> <p>Archangels Morgante and Aleph were inspired by Morgan le Fay and King Arthur from Arturian legends, but with an unusual twist that Aleph is portrayed as a conqueror instead of a &quot;rightful king&quot; to reflect Britain's history of conquest.<sup class="footnote-ref"><a href="#fn3" id="fnref3">[Note 3]</a></sup></p>
<p>The ideas for the other Archangels came after Morgante and Aleph. Their themes were kind of arbitrarily chosen to match the design Jay had given them.<sup class="footnote-ref"><a href="#fn3" id="fnref3:1">[<span class="visually-hidden">Footnote #</span>3:1]</a></sup></p> <p>The ideas for the other Archangels came after Morgante and Aleph. Their themes were kind of arbitrarily chosen to match the design Jay had given them.<sup class="footnote-ref"><a href="#fn3" id="fnref3:1">[Note 3:1]</a></sup></p>
<p>Bytten Studio made a point to not put in a huge amount of Japanese mythological monsters in comparison to mythology from other nations, especially since well-known mons franchises such as <cite>Shin Megami Tensei</cite>, <cite>Pokémon</cite> and <cite>Digimon</cite> are Japanese franchises; they do not want to seem derivative.<sup class="footnote-ref"><a href="#fn4" id="fnref4">[<span class="visually-hidden">Footnote #</span>4]</a></sup></p> <p>Bytten Studio made a point to not put in a huge amount of Japanese mythological monsters in comparison to mythology from other nations, especially since well-known mons franchises such as <cite>Shin Megami Tensei</cite>, <cite>Pokémon</cite> and <cite>Digimon</cite> are Japanese franchises; they do not want to seem derivative.<sup class="footnote-ref"><a href="#fn4" id="fnref4">[Note 4]</a></sup></p>
<p>Barkley was not inspired by anything in particular; he was added in the game to surprise players as a non-human partner.<sup class="footnote-ref"><a href="#fn5" id="fnref5">[<span class="visually-hidden">Footnote #</span>5]</a></sup></p> <p>Barkley was not inspired by anything in particular; he was added in the game to surprise players as a non-human partner.<sup class="footnote-ref"><a href="#fn5" id="fnref5">[Note 5]</a></sup></p>
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="developer-notes">Developer Notes</h2> <h2 id="developer-notes">Developer Notes</h2>
<a class="heading-anchor" href="#developer-notes" aria-labelledby="developer-notes"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#developer-notes" aria-labelledby="developer-notes"><span hidden="">#</span></a></div>
@ -647,8 +647,8 @@
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="the-developers">The Developers</h2> <h2 id="the-developers">The Developers</h2>
<a class="heading-anchor" href="#the-developers" aria-labelledby="the-developers"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#the-developers" aria-labelledby="the-developers"><span hidden="">#</span></a></div>
<p>Jay Baylis' favourite monster catching game is <cite>Pokémon Ruby/Sapphire</cite>.<sup class="footnote-ref"><a href="#fn6" id="fnref6">[<span class="visually-hidden">Footnote #</span>6]</a></sup></p> <p>Jay Baylis' favourite monster catching game is <cite>Pokémon Ruby/Sapphire</cite>.<sup class="footnote-ref"><a href="#fn6" id="fnref6">[Note 6]</a></sup></p>
<p>Tom Coxon's favourite monster catching game is <cite>Siralim Ultimate</cite>.<sup class="footnote-ref"><a href="#fn7" id="fnref7">[<span class="visually-hidden">Footnote #</span>7]</a></sup></p> <p>Tom Coxon's favourite monster catching game is <cite>Siralim Ultimate</cite>.<sup class="footnote-ref"><a href="#fn7" id="fnref7">[Note 7]</a></sup></p>
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="frequently-asked-topics">Frequently Asked Topics</h2> <h2 id="frequently-asked-topics">Frequently Asked Topics</h2>
<a class="heading-anchor" href="#frequently-asked-topics" aria-labelledby="frequently-asked-topics"><span hidden="">#</span></a></div> <a class="heading-anchor" href="#frequently-asked-topics" aria-labelledby="frequently-asked-topics"><span hidden="">#</span></a></div>
@ -698,19 +698,117 @@
<a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a> <a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a>
</div> </div>
<ol class="footnotes-list"> <ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://store.steampowered.com/news/app/1321440/view/3669908058337516561">&quot;Cassette Beasts Blog #13 - You asked, we answered!&quot;</a>. <cite>Cassette Beasts</cite> Steam blog. 28 February 2023. <a aria-label="Back to reference #1" href="#fnref1" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #1:1" href="#fnref1:1" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #1:2" href="#fnref1:2" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #1:3" href="#fnref1:3" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #1:4" href="#fnref1:4" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #1:5" href="#fnref1:5" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #1:6" href="#fnref1:6" class="footnote-backref">↩︎</a></p> <li id="fn1" class="footnote-item"><p><a href="https://store.steampowered.com/news/app/1321440/view/3669908058337516561">&quot;Cassette Beasts Blog #13 - You asked, we answered!&quot;</a>. <cite>Cassette Beasts</cite> Steam blog. 28 February 2023.
</p><p class="footnote-item__back">
<a href="#fnref1" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref1:1" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1:1
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref1:2" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1:2
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref1:3" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1:3
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref1:4" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1:4
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref1:5" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1:5
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref1:6" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 1:6
</a>
</p>
<p></p>
</li> </li>
<li id="fn2" class="footnote-item"><p>Jay Baylis' (@SamuriFerret) <a href="https://x.com/SamuriFerret/status/1788943762594369890">quote tweet</a> from @DavidKayConrad. 10 May 2024. <a aria-label="Back to reference #2" href="#fnref2" class="footnote-backref">↩︎</a></p> <li id="fn2" class="footnote-item"><p>Jay Baylis' (@SamuriFerret) <a href="https://x.com/SamuriFerret/status/1788943762594369890">quote tweet</a> from @DavidKayConrad. 10 May 2024.
</p><p class="footnote-item__back">
<a href="#fnref2" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 2
</a>
</p>
<p></p>
</li> </li>
<li id="fn3" class="footnote-item"><p>Tom Coxon's (u/tcoxon) <a href="https://www.reddit.com/r/NintendoSwitch/comments/14nvsiu/ama_we_are_bytten_studio_the_developers_of/jq9v6q5/">comment</a>. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. <a aria-label="Back to reference #3" href="#fnref3" class="footnote-backref">↩︎</a> <a aria-label="Back to reference #3:1" href="#fnref3:1" class="footnote-backref">↩︎</a></p> <li id="fn3" class="footnote-item"><p>Tom Coxon's (u/tcoxon) <a href="https://www.reddit.com/r/NintendoSwitch/comments/14nvsiu/ama_we_are_bytten_studio_the_developers_of/jq9v6q5/">comment</a>. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023.
</p><p class="footnote-item__back">
<a href="#fnref3" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 3
</a>
</p>
<p class="footnote-item__back">
<a href="#fnref3:1" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 3:1
</a>
</p>
<p></p>
</li> </li>
<li id="fn4" class="footnote-item"><p>Jay Baylis's (samuri) <a href="https://discord.com/channels/594939411775619102/709417227652431942/1206255854211305523">message</a>. Bytten Studio Discord server. 11 February 2024. <a aria-label="Back to reference #4" href="#fnref4" class="footnote-backref">↩︎</a></p> <li id="fn4" class="footnote-item"><p>Jay Baylis's (samuri) <a href="https://discord.com/channels/594939411775619102/709417227652431942/1206255854211305523">message</a>. Bytten Studio Discord server. 11 February 2024.
</p><p class="footnote-item__back">
<a href="#fnref4" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 4
</a>
</p>
<p></p>
</li> </li>
<li id="fn5" class="footnote-item"><p>Tom Coxon's (u/tcoxon) <a href="https://www.reddit.com/r/JRPG/comments/1bniroh/comment/kwiqbm5/">comment</a>. Bytten Studio's AMA on r/JRPG. 25 March 2024. <a aria-label="Back to reference #5" href="#fnref5" class="footnote-backref">↩︎</a></p> <li id="fn5" class="footnote-item"><p>Tom Coxon's (u/tcoxon) <a href="https://www.reddit.com/r/JRPG/comments/1bniroh/comment/kwiqbm5/">comment</a>. Bytten Studio's AMA on r/JRPG. 25 March 2024.
</p><p class="footnote-item__back">
<a href="#fnref5" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 5
</a>
</p>
<p></p>
</li> </li>
<li id="fn6" class="footnote-item"><p>Jay Baylis' (u/SamuriFerret) <a href="https://www.reddit.com/r/NintendoSwitch/comments/14nvsiu/ama_we_are_bytten_studio_the_developers_of/jq9qo03/">comment</a>. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. <a aria-label="Back to reference #6" href="#fnref6" class="footnote-backref">↩︎</a></p> <li id="fn6" class="footnote-item"><p>Jay Baylis' (u/SamuriFerret) <a href="https://www.reddit.com/r/NintendoSwitch/comments/14nvsiu/ama_we_are_bytten_studio_the_developers_of/jq9qo03/">comment</a>. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023.
</p><p class="footnote-item__back">
<a href="#fnref6" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 6
</a>
</p>
<p></p>
</li> </li>
<li id="fn7" class="footnote-item"><p>Tom Coxon's (u/tcoxon) <a href="https://www.reddit.com/r/NintendoSwitch/comments/14nvsiu/ama_we_are_bytten_studio_the_developers_of/jq9qicf/">comment</a>. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. <a aria-label="Back to reference #7" href="#fnref7" class="footnote-backref">↩︎</a></p> <li id="fn7" class="footnote-item"><p>Tom Coxon's (u/tcoxon) <a href="https://www.reddit.com/r/NintendoSwitch/comments/14nvsiu/ama_we_are_bytten_studio_the_developers_of/jq9qicf/">comment</a>. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023.
</p><p class="footnote-item__back">
<a href="#fnref7" class="footnote-backref">
<span aria-hidden="true">↩︎</span>
Back to reference 7
</a>
</p>
<p></p>
</li> </li>
</ol> </ol>
</footer> </footer>

82
sitemap.xml
View File

@ -1146,231 +1146,237 @@
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url>
<loc>https://leilukin.comfalse</loc>
<lastmod>2024-12-03T15:53:36.000Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url> <url>
<loc>https://leilukin.com/blog/posts/</loc> <loc>https://leilukin.com/blog/posts/</loc>
<lastmod>2024-12-03T11:05:41.250Z</lastmod> <lastmod>2024-12-03T15:57:08.285Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/changelogs/2022/</loc> <loc>https://leilukin.com/changelogs/2022/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/changelogs/2023/</loc> <loc>https://leilukin.com/changelogs/2023/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/changelogs/2024/</loc> <loc>https://leilukin.com/changelogs/2024/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/changelogs/layouts/</loc> <loc>https://leilukin.com/changelogs/layouts/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/</loc> <loc>https://leilukin.com/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/projects/code/bellabuffs-phpmailer/</loc> <loc>https://leilukin.com/projects/code/bellabuffs-phpmailer/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/projects/playlists/</loc> <loc>https://leilukin.com/projects/playlists/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/projects/snippets/disability-pride-flag-background/</loc> <loc>https://leilukin.com/projects/snippets/disability-pride-flag-background/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/asummersend/gallery/</loc> <loc>https://leilukin.com/shrines/asummersend/gallery/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/asummersend/playlists/</loc> <loc>https://leilukin.com/shrines/asummersend/playlists/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/asummersend/trivia/</loc> <loc>https://leilukin.com/shrines/asummersend/trivia/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/cassettebeasts/articles/</loc> <loc>https://leilukin.com/shrines/cassettebeasts/articles/</loc>
<lastmod>2024-12-03T11:05:41.254Z</lastmod> <lastmod>2024-12-03T15:57:08.289Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/cassettebeasts/facts/</loc> <loc>https://leilukin.com/shrines/cassettebeasts/facts/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/cassettebeasts/featured/</loc> <loc>https://leilukin.com/shrines/cassettebeasts/featured/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/cassettebeasts/gamelog/</loc> <loc>https://leilukin.com/shrines/cassettebeasts/gamelog/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/cassettebeasts/resources/</loc> <loc>https://leilukin.com/shrines/cassettebeasts/resources/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/articles/</loc> <loc>https://leilukin.com/shrines/starwarskotor/articles/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/guides/</loc> <loc>https://leilukin.com/shrines/starwarskotor/guides/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/</loc> <loc>https://leilukin.com/shrines/starwarskotor/resources/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/</loc> <loc>https://leilukin.com/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/</loc> <loc>https://leilukin.com/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/</loc> <loc>https://leilukin.com/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/starwarskotor/universes/</loc> <loc>https://leilukin.com/shrines/starwarskotor/universes/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/archive/</loc> <loc>https://leilukin.com/archive/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/categories/</loc> <loc>https://leilukin.com/categories/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/changelogs/</loc> <loc>https://leilukin.com/changelogs/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/about/</loc> <loc>https://leilukin.com/about/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/adoptables/</loc> <loc>https://leilukin.com/adoptables/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/articles/</loc> <loc>https://leilukin.com/articles/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/blog/</loc> <loc>https://leilukin.com/blog/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/guestbook/</loc> <loc>https://leilukin.com/guestbook/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/links/</loc> <loc>https://leilukin.com/links/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/now/</loc> <loc>https://leilukin.com/now/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/projects/</loc> <loc>https://leilukin.com/projects/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/shrines/</loc> <loc>https://leilukin.com/shrines/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/accessibility/</loc> <loc>https://leilukin.com/accessibility/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>https://leilukin.com/colophon/</loc> <loc>https://leilukin.com/colophon/</loc>
<lastmod>2024-12-03T11:05:41.258Z</lastmod> <lastmod>2024-12-03T15:57:08.293Z</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>