diff --git a/articles/accessible-footnotes/index.html b/articles/accessible-footnotes/index.html index c93979d0..9817b242 100644 --- a/articles/accessible-footnotes/index.html +++ b/articles/accessible-footnotes/index.html @@ -482,7 +482,9 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
-

32-Bit Cafe is holding its fifth community code jam, titled "Back to School", from 4 to 17 August 2024. I have been looking forward to participating in 32-Bit Cafe's community code jam for the first time, so I am excited. This motivates me to finally write a how-to article I have been meaning to do for a while: how to implement accessible footnotes on Leilukin's Hub, or at least, I tried to do so to the best of my abilities.

+

32-Bit Cafe "Back to School" Code Jam button

+

(32-Bit Cafe "Back to School" button made by Loren)

+

32-Bit Cafe is holding its fifth community code jam, titled "Back to School", from 4 to 17 August 2024. I have been looking forward to participating in 32-Bit Cafe's community code jam for the first time, so I am excited. This motivates me to finally write a how-to article I have been meaning to do for a while: how to implement accessible footnotes on Leilukin's Hub, or at least, I tried to do so to the best of my abilities.

On 32-Bit Cafe's Discourse forum, I made a post on 28 June 2024 in response to solaria's thread "Handling Citations and/or Footnotes" to share my methods of adding footnotes on my website. Now, I am writing an extended version of that post of mine in the form of this article, so I could share what I learned about web page footnotes on my website as well.

(Note: This article assumes a foundational familiarity with HTML and CSS)

diff --git a/assets/css/general.css b/assets/css/general.css index 922d026f..7e3de051 100644 --- a/assets/css/general.css +++ b/assets/css/general.css @@ -10,7 +10,6 @@ body { main { width: 100%; - display: grid; font-size: var(--fs-main); } diff --git a/assets/css/utility.css b/assets/css/utility.css index e6d1974f..3a6898bf 100644 --- a/assets/css/utility.css +++ b/assets/css/utility.css @@ -4,11 +4,6 @@ .inline-img { display: inline-block; } .update-info { margin-top: 3em; } -.center-el { - display: grid; - place-content: center; -} - .indent-text { padding: 1em 0 1em 2em; display: grid; diff --git a/assets/images/articles/accessible-footnotes/32bitcafe-backtoschool.png b/assets/images/articles/accessible-footnotes/32bitcafe-backtoschool.png new file mode 100644 index 00000000..f4e76db1 Binary files /dev/null and b/assets/images/articles/accessible-footnotes/32bitcafe-backtoschool.png differ diff --git a/feed.xml b/feed.xml index 1bfb49cd..c9bd5ccb 100644 --- a/feed.xml +++ b/feed.xml @@ -4,7 +4,7 @@ Leilukin's personal website. - 2024-08-06T11:52:37Z + 2024-08-06T12:16:54Z https://leilukin.com/ Leilukin @@ -27,7 +27,9 @@ 2024-08-06T00:00:00Z https://leilukin.com/articles/accessible-footnotes/ - <p><a href="https://32bit.cafe/">32-Bit Cafe</a> is holding its fifth community code jam, titled <a href="https://32bit.cafe/~xandra/events/codejam5/">&quot;Back to School&quot;</a>, from 4 to 17 August 2024. I have been looking forward to participating in 32-Bit Cafe's community code jam for the first time, so I am excited. This motivates me to finally write a how-to article I have been meaning to do for a while: how to implement accessible footnotes on Leilukin's Hub, or at least, I tried to do so to the best of my abilities.</p> + <p class="center-text"><a href="https://32bit.cafe/~xandra/events/codejam5/" class="inline-img"><img src="https://leilukin.com/assets/images/articles/accessible-footnotes/32bitcafe-backtoschool.png" alt="32-Bit Cafe &quot;Back to School&quot; Code Jam button" /></a></p> +<p class="center-text">(32-Bit Cafe &quot;Back to School&quot; button made by <a href="https://ribo.zone/">Loren</a>)</p> +<p><a href="https://32bit.cafe/">32-Bit Cafe</a> is holding its fifth community code jam, titled <a href="https://32bit.cafe/~xandra/events/codejam5/">&quot;Back to School&quot;</a>, from 4 to 17 August 2024. I have been looking forward to participating in 32-Bit Cafe's community code jam for the first time, so I am excited. This motivates me to finally write a how-to article I have been meaning to do for a while: how to implement accessible footnotes on Leilukin's Hub, or at least, I tried to do so to the best of my abilities.</p> <p>On <a href="https://discourse.32bit.cafe/">32-Bit Cafe's Discourse forum</a>, I made a <a href="https://discourse.32bit.cafe/t/handling-citations-and-or-footnotes/1061/2?u=leilukin">post on 28 June 2024</a> in response to <a href="https://solaria.neocities.org/">solaria</a>'s thread <a href="https://discourse.32bit.cafe/t/handling-citations-and-or-footnotes/1061">&quot;Handling Citations and/or Footnotes&quot;</a> to share my methods of adding footnotes on my website. Now, I am writing an extended version of that post of mine in the form of this article, so I could share what I learned about web page footnotes on my website as well.</p> <p>(Note: This article assumes a foundational familiarity with HTML and CSS)</p> <div class="heading-wrapper h2">