From eb3fd11b3f9213335565834d1b4f7fdbfa22461c Mon Sep 17 00:00:00 2001 From: helenclx Date: Sun, 11 Aug 2024 15:15:14 +0000 Subject: [PATCH] Build: (ae77477) Modify 11 August 2024 changelog --- 404.html | 2 +- about/index.html | 2 +- accessibility/index.html | 2 +- adoptables/index.html | 2 +- archive/index.html | 10 +- articles/accessible-footnotes/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- articles/index.html | 4 +- .../index.html | 2 +- .../index.html | 2 +- .../my-dislike-of-shipping-culture/index.html | 2 +- articles/palestine-masterlist/index.html | 2 +- blog/index.html | 8 +- blog/page/2/index.html | 2 +- blog/page/3/index.html | 2 +- blog/page/4/index.html | 2 +- blog/page/5/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 4 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- blog/posts/index.html | 8 +- categories/32-bit-cafe/index.html | 4 +- categories/a-bugs-life/index.html | 2 +- categories/a-summers-end/index.html | 2 +- categories/accessibility/index.html | 4 +- categories/cassette-beasts/index.html | 4 +- categories/code-projects/index.html | 4 +- categories/css/index.html | 4 +- categories/dracula-daily/index.html | 2 +- categories/eleventy/index.html | 4 +- categories/fandom-culture/index.html | 2 +- categories/gaming/index.html | 2 +- categories/harry-potter/index.html | 2 +- categories/html/index.html | 4 +- categories/index.html | 2 +- categories/jk-rowling/index.html | 2 +- categories/lesbian/index.html | 2 +- categories/lgbtq/index.html | 2 +- categories/life-updates/index.html | 2 +- categories/malaysia/index.html | 2 +- categories/markdown-it/index.html | 4 +- categories/my-birthday/index.html | 2 +- categories/my-interviews/index.html | 2 +- categories/palestine/index.html | 2 +- categories/shrines/index.html | 2 +- categories/site-anniversary/index.html | 2 +- categories/site-updates/index.html | 8 +- categories/star-wars-kotor-2/index.html | 2 +- categories/star-wars-kotor/index.html | 2 +- categories/video-game-mods/index.html | 2 +- categories/web-development/index.html | 2 +- categories/youtube/index.html | 2 +- changelogs/2022/index.html | 2 +- changelogs/2023/index.html | 2 +- changelogs/2024/index.html | 34 +- changelogs/index.html | 32 +- changelogs/layouts/index.html | 2 +- changelogs/page/2/index.html | 27 +- changelogs/page/3/index.html | 12 +- changelogs/page/4/index.html | 21 +- changelogs/page/5/index.html | 28 +- changelogs/page/6/index.html | 21 +- changelogs/page/7/index.html | 9 +- colophon/index.html | 2 +- feed.xml | 536 ------------------ guestbook/index.html | 2 +- index.html | 11 +- links/index.html | 2 +- now/index.html | 2 +- projects/code/bellabuffs-phpmailer/index.html | 2 +- projects/index.html | 2 +- projects/playlists/index.html | 2 +- .../index.html | 2 +- projects/videogamemods/kotor1/index.html | 2 +- projects/videogamemods/kotor2/index.html | 2 +- shrines/asummersend/gallery/index.html | 2 +- shrines/asummersend/index.html | 2 +- shrines/asummersend/playlists/index.html | 2 +- shrines/asummersend/trivia/index.html | 2 +- .../index.html | 2 +- shrines/cassettebeasts/articles/index.html | 2 +- shrines/cassettebeasts/facts/index.html | 2 +- shrines/cassettebeasts/featured/index.html | 2 +- shrines/cassettebeasts/gamelog/index.html | 2 +- shrines/cassettebeasts/index.html | 2 +- shrines/cassettebeasts/resources/index.html | 2 +- shrines/index.html | 2 +- .../arren-kae-kreia-theory/index.html | 2 +- .../faq-same-gender-romance-mods/index.html | 2 +- .../handmaiden-sisters-mother/index.html | 2 +- shrines/starwarskotor/articles/index.html | 2 +- .../index.html | 2 +- .../juhani-lesbian-evidence/index.html | 2 +- .../articles/keep-juhani-a-lesbian/index.html | 2 +- .../partyswap-management-takeover/index.html | 2 +- .../index.html | 2 +- shrines/starwarskotor/guides/index.html | 2 +- .../kotor-juhani-romance-guide/index.html | 2 +- .../kotor-redeeming-bastila-guide/index.html | 2 +- .../index.html | 2 +- shrines/starwarskotor/index.html | 2 +- shrines/starwarskotor/resources/index.html | 2 +- .../kotor-same-gender-romance-mods/index.html | 2 +- .../index.html | 2 +- .../tslrcm-m478ep-modules-music/index.html | 2 +- shrines/starwarskotor/universes/index.html | 2 +- sitemap/index.html | 2 +- 126 files changed, 252 insertions(+), 757 deletions(-) delete mode 100644 feed.xml diff --git a/404.html b/404.html index 5970ccb2..9da1f61c 100644 --- a/404.html +++ b/404.html @@ -22,7 +22,7 @@ - + diff --git a/about/index.html b/about/index.html index 515b2609..ab598077 100644 --- a/about/index.html +++ b/about/index.html @@ -23,7 +23,7 @@ - + diff --git a/accessibility/index.html b/accessibility/index.html index e4585079..179e2d90 100644 --- a/accessibility/index.html +++ b/accessibility/index.html @@ -23,7 +23,7 @@ - + diff --git a/adoptables/index.html b/adoptables/index.html index b8b0e972..2e734e36 100644 --- a/adoptables/index.html +++ b/adoptables/index.html @@ -23,7 +23,7 @@ - + diff --git a/archive/index.html b/archive/index.html index 67d5544e..dcc534a5 100644 --- a/archive/index.html +++ b/archive/index.html @@ -23,7 +23,7 @@ - + @@ -436,7 +436,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

-

6 August 2024

+

5 August 2024

  • @@ -446,7 +446,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    27 July 2024

    +

    26 July 2024

  • @@ -456,7 +456,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    2 July 2024

    +

    1 July 2024

  • @@ -476,7 +476,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    21 June 2024

    +

    20 June 2024

  • diff --git a/articles/accessible-footnotes/index.html b/articles/accessible-footnotes/index.html index fa391ad3..e8abfb2f 100644 --- a/articles/accessible-footnotes/index.html +++ b/articles/accessible-footnotes/index.html @@ -23,7 +23,7 @@ - + diff --git a/articles/anti-harry-potter-jk-rowling-masterlist/index.html b/articles/anti-harry-potter-jk-rowling-masterlist/index.html index 5e677a75..6d74bbf3 100644 --- a/articles/anti-harry-potter-jk-rowling-masterlist/index.html +++ b/articles/anti-harry-potter-jk-rowling-masterlist/index.html @@ -23,7 +23,7 @@ - + diff --git a/articles/designated-lesbian-syndrome-fandom/index.html b/articles/designated-lesbian-syndrome-fandom/index.html index 90eef1cc..bd7ae1c5 100644 --- a/articles/designated-lesbian-syndrome-fandom/index.html +++ b/articles/designated-lesbian-syndrome-fandom/index.html @@ -23,7 +23,7 @@ - + diff --git a/articles/index.html b/articles/index.html index 2130c0f0..d95af163 100644 --- a/articles/index.html +++ b/articles/index.html @@ -23,7 +23,7 @@ - + @@ -467,7 +467,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    19 June 2024

  • How I (Tried to) Implement Accessible Footnotes

    -

    6 August 2024

    +

    5 August 2024

    • My Articles for Video Games with Their Own Pages

    diff --git a/articles/kotor2-modder-interview-ars-technica/index.html b/articles/kotor2-modder-interview-ars-technica/index.html index 0222f12e..f9f0faa7 100644 --- a/articles/kotor2-modder-interview-ars-technica/index.html +++ b/articles/kotor2-modder-interview-ars-technica/index.html @@ -23,7 +23,7 @@ - + diff --git a/articles/lgbtq-booklet-interview-misi-bawang/index.html b/articles/lgbtq-booklet-interview-misi-bawang/index.html index bb5d34e2..8e68bd78 100644 --- a/articles/lgbtq-booklet-interview-misi-bawang/index.html +++ b/articles/lgbtq-booklet-interview-misi-bawang/index.html @@ -23,7 +23,7 @@ - + diff --git a/articles/my-dislike-of-shipping-culture/index.html b/articles/my-dislike-of-shipping-culture/index.html index b298bc7e..1c8ab61b 100644 --- a/articles/my-dislike-of-shipping-culture/index.html +++ b/articles/my-dislike-of-shipping-culture/index.html @@ -23,7 +23,7 @@ - + diff --git a/articles/palestine-masterlist/index.html b/articles/palestine-masterlist/index.html index 4192cf88..aa8c9db1 100644 --- a/articles/palestine-masterlist/index.html +++ b/articles/palestine-masterlist/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/index.html b/blog/index.html index 48974441..c87b548f 100644 --- a/blog/index.html +++ b/blog/index.html @@ -23,7 +23,7 @@ - + @@ -479,7 +479,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) -

    27 July 2024

    +

    26 July 2024

    Leilukin's Hub has moved hosts again — this time to Hostinger.

    @@ -490,7 +490,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) -

    2 July 2024

    +

    1 July 2024

    Announcing the launch of my fanlisting collective, Cassette Beasts fanlisting and the release of my BellaBuffs fork.

    @@ -512,7 +512,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) -

    21 June 2024

    +

    20 June 2024

    Leilukin's Hub now has a tumbleblog built with Chyrp Lite and hosted on InfinityFree.

    diff --git a/blog/page/2/index.html b/blog/page/2/index.html index 938cdbe2..2be41479 100644 --- a/blog/page/2/index.html +++ b/blog/page/2/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/page/3/index.html b/blog/page/3/index.html index 272e7ffb..ec36b84c 100644 --- a/blog/page/3/index.html +++ b/blog/page/3/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/page/4/index.html b/blog/page/4/index.html index 43dc0a9f..a6fbdeb0 100644 --- a/blog/page/4/index.html +++ b/blog/page/4/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/page/5/index.html b/blog/page/5/index.html index fc2b851e..6e893ad6 100644 --- a/blog/page/5/index.html +++ b/blog/page/5/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html b/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html index 0790c2c4..eaf43c87 100644 --- a/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html +++ b/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html b/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html index 2badee1c..f28a9684 100644 --- a/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html +++ b/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html b/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html index 9a68a5a1..136bddaf 100644 --- a/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html +++ b/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html b/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html index 8ff17d10..6bd5b632 100644 --- a/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html +++ b/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html b/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html index 9b20f257..f171c75c 100644 --- a/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html +++ b/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html b/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html index 942de30d..3ce650d0 100644 --- a/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html +++ b/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html @@ -23,7 +23,7 @@ - + @@ -418,7 +418,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    11 September 2023 marks the first anniversary of Leilukin's Hub, my personal website, hosted on Neocities. I am proud to be able to succeed in not only building my own website, but also updating, improving and maintaining my website to achieve my vision for my own personal hub on the internet outside social media platforms.

    I registered a Neocities account on 28 May 2022, while my own website, Leilukin's Hub, was officially launched on 11 September 2022. I set up this website because I wanted to have a personal web page outside social media platforms to gather various stuff and resources I had created or compiled on online spaces throughout the years. Furthermore, I settled for Neocities because I like the flexibility of customisation by coding my website with HTML, CSS and JavaScript. Initially, I considered and tried Carrd to create my web pages, but free accounts on Carrd can only add up to 100 elements on a web page, which is not enough for my purpose.

    -

    This site's changelog and layout archive document the evolution of Leilukin's Hub throughout the past year: from the humble beginning of a simple black background with white text and light brown titles, to the responsive, mobile-friendly, full-fledged personal website with its own site button, RSS feed, a blog and multiple shrines.

    +

    This site's changelog and layout archive document the evolution of Leilukin's Hub throughout the past year: from the humble beginning of a simple black background with white text and light brown titles, to the responsive, mobile-friendly, full-fledged personal website with its own site button, RSS feed, a blog and multiple shrines.

    Coding my own website was also an excellent way to put my HTML and CSS knowledge and skills into good use. I already had basic knowledge of HTML and CSS from what I learned from my teenage years of customising my blog on Blogger.

    Working on Leilukin's Hub had ignited my interest in coding, so I took courses to learn more about HTML, CSS, JavaScript and more about coding, and in turn, I put my new coding knowledge into good use by improving and adding more features to Leilukin's Hub, which was totally worth it. Therefore, I have also compiled resources for building websites here for those who need it.

    You may feel intimidated by the idea of building your website because you do not know how to code, but good news! There are plenty of resources for you to learn HTML, CSS and JavaScript, including free courses. Neocities also has its own HTML course for you to get started. Happy coding!

    diff --git a/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html b/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html index 34868aca..c509f75a 100644 --- a/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html +++ b/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html b/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html index d270630b..c347733e 100644 --- a/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html +++ b/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html b/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html index c060d341..4b6ddf08 100644 --- a/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html +++ b/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html b/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html index 1ef1a727..fa58cbb0 100644 --- a/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html +++ b/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html b/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html index 25d02ef7..9bb53c45 100644 --- a/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html +++ b/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html b/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html index 99ddf395..117f6ccc 100644 --- a/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html +++ b/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html b/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html index 3405506c..5625373d 100644 --- a/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html +++ b/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-05-14-james-somerton-my-video-game-footage/index.html b/blog/posts/2024-05-14-james-somerton-my-video-game-footage/index.html index adb1e9e2..58665838 100644 --- a/blog/posts/2024-05-14-james-somerton-my-video-game-footage/index.html +++ b/blog/posts/2024-05-14-james-somerton-my-video-game-footage/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-05-29-new-guestbook-leilukins-hub/index.html b/blog/posts/2024-05-29-new-guestbook-leilukins-hub/index.html index 7551e2a5..7e8927c4 100644 --- a/blog/posts/2024-05-29-new-guestbook-leilukins-hub/index.html +++ b/blog/posts/2024-05-29-new-guestbook-leilukins-hub/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/index.html b/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/index.html index 95afbc69..a9602850 100644 --- a/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/index.html +++ b/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-06-12-performance-improvement-leilukins-hub/index.html b/blog/posts/2024-06-12-performance-improvement-leilukins-hub/index.html index becbe6d1..15ef0963 100644 --- a/blog/posts/2024-06-12-performance-improvement-leilukins-hub/index.html +++ b/blog/posts/2024-06-12-performance-improvement-leilukins-hub/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/index.html b/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/index.html index 7babb99a..f8eaf7a9 100644 --- a/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/index.html +++ b/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/index.html b/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/index.html index fbb8bb25..f2b6aba5 100644 --- a/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/index.html +++ b/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-07-02-fanlisting-collective-launch/index.html b/blog/posts/2024-07-02-fanlisting-collective-launch/index.html index e2e94a8b..37db3c06 100644 --- a/blog/posts/2024-07-02-fanlisting-collective-launch/index.html +++ b/blog/posts/2024-07-02-fanlisting-collective-launch/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/index.html b/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/index.html index a2e56916..0d573aa6 100644 --- a/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/index.html +++ b/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/index.html @@ -23,7 +23,7 @@ - + diff --git a/blog/posts/index.html b/blog/posts/index.html index ace770ca..23cf3790 100644 --- a/blog/posts/index.html +++ b/blog/posts/index.html @@ -23,7 +23,7 @@ - + @@ -413,7 +413,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) -

    27 July 2024

    +

    26 July 2024

  • @@ -423,7 +423,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) -

    2 July 2024

    +

    1 July 2024

  • @@ -443,7 +443,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) -

    21 June 2024

    +

    20 June 2024

  • diff --git a/categories/32-bit-cafe/index.html b/categories/32-bit-cafe/index.html index 040e2aef..961d03b4 100644 --- a/categories/32-bit-cafe/index.html +++ b/categories/32-bit-cafe/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    6 August 2024

    +

    5 August 2024

    • diff --git a/categories/a-bugs-life/index.html b/categories/a-bugs-life/index.html index 120bfdf2..e303783e 100644 --- a/categories/a-bugs-life/index.html +++ b/categories/a-bugs-life/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/a-summers-end/index.html b/categories/a-summers-end/index.html index 996b5f95..663b75ac 100644 --- a/categories/a-summers-end/index.html +++ b/categories/a-summers-end/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/accessibility/index.html b/categories/accessibility/index.html index 8eb05a00..36d0e6c1 100644 --- a/categories/accessibility/index.html +++ b/categories/accessibility/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    6 August 2024

    +

    5 August 2024

    diff --git a/categories/cassette-beasts/index.html b/categories/cassette-beasts/index.html index 211faaa0..41530d3e 100644 --- a/categories/cassette-beasts/index.html +++ b/categories/cassette-beasts/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    2 July 2024

    +

    1 July 2024

  • diff --git a/categories/code-projects/index.html b/categories/code-projects/index.html index c81e3b9c..81c154bc 100644 --- a/categories/code-projects/index.html +++ b/categories/code-projects/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    2 July 2024

    +

    1 July 2024

    • diff --git a/categories/css/index.html b/categories/css/index.html index 4345040f..d6ec1d95 100644 --- a/categories/css/index.html +++ b/categories/css/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    6 August 2024

    +

    5 August 2024

    diff --git a/categories/dracula-daily/index.html b/categories/dracula-daily/index.html index e551f7f9..7ce8ec75 100644 --- a/categories/dracula-daily/index.html +++ b/categories/dracula-daily/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/eleventy/index.html b/categories/eleventy/index.html index a0bfc512..14d48f71 100644 --- a/categories/eleventy/index.html +++ b/categories/eleventy/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    6 August 2024

    +

    5 August 2024

  • diff --git a/categories/fandom-culture/index.html b/categories/fandom-culture/index.html index 09d07fa8..ff25f25b 100644 --- a/categories/fandom-culture/index.html +++ b/categories/fandom-culture/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/gaming/index.html b/categories/gaming/index.html index 049d74d6..d9133021 100644 --- a/categories/gaming/index.html +++ b/categories/gaming/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/harry-potter/index.html b/categories/harry-potter/index.html index 56e1bd59..90a03de7 100644 --- a/categories/harry-potter/index.html +++ b/categories/harry-potter/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/html/index.html b/categories/html/index.html index ea54c725..d4311b1c 100644 --- a/categories/html/index.html +++ b/categories/html/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    6 August 2024

    +

    5 August 2024

    • diff --git a/categories/index.html b/categories/index.html index 88b9ffde..743c5afd 100644 --- a/categories/index.html +++ b/categories/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/jk-rowling/index.html b/categories/jk-rowling/index.html index f8a4860c..76252af6 100644 --- a/categories/jk-rowling/index.html +++ b/categories/jk-rowling/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/lesbian/index.html b/categories/lesbian/index.html index b8d58159..4316422d 100644 --- a/categories/lesbian/index.html +++ b/categories/lesbian/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/lgbtq/index.html b/categories/lgbtq/index.html index 512c6dfd..051d3523 100644 --- a/categories/lgbtq/index.html +++ b/categories/lgbtq/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/life-updates/index.html b/categories/life-updates/index.html index 9dcbc4f9..808b9977 100644 --- a/categories/life-updates/index.html +++ b/categories/life-updates/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/malaysia/index.html b/categories/malaysia/index.html index d0c85427..d8205fd5 100644 --- a/categories/malaysia/index.html +++ b/categories/malaysia/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/markdown-it/index.html b/categories/markdown-it/index.html index c6cd9518..24c322ff 100644 --- a/categories/markdown-it/index.html +++ b/categories/markdown-it/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    6 August 2024

    +

    5 August 2024

    diff --git a/categories/my-birthday/index.html b/categories/my-birthday/index.html index 85b9d786..35599d16 100644 --- a/categories/my-birthday/index.html +++ b/categories/my-birthday/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/my-interviews/index.html b/categories/my-interviews/index.html index 1d3b5586..9f52fc76 100644 --- a/categories/my-interviews/index.html +++ b/categories/my-interviews/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/palestine/index.html b/categories/palestine/index.html index ec35901f..2bdedb9d 100644 --- a/categories/palestine/index.html +++ b/categories/palestine/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/shrines/index.html b/categories/shrines/index.html index bd1c8e53..85e0fdda 100644 --- a/categories/shrines/index.html +++ b/categories/shrines/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/site-anniversary/index.html b/categories/site-anniversary/index.html index 15133016..6c9276da 100644 --- a/categories/site-anniversary/index.html +++ b/categories/site-anniversary/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/site-updates/index.html b/categories/site-updates/index.html index 9d5d2394..7c0794ab 100644 --- a/categories/site-updates/index.html +++ b/categories/site-updates/index.html @@ -23,7 +23,7 @@ - + @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    27 July 2024

    +

    26 July 2024

  • @@ -419,7 +419,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    2 July 2024

    +

    1 July 2024

  • @@ -439,7 +439,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    -

    21 June 2024

    +

    20 June 2024

  • diff --git a/categories/star-wars-kotor-2/index.html b/categories/star-wars-kotor-2/index.html index 9a79c71d..d94af229 100644 --- a/categories/star-wars-kotor-2/index.html +++ b/categories/star-wars-kotor-2/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/star-wars-kotor/index.html b/categories/star-wars-kotor/index.html index bb34494f..a2c5cede 100644 --- a/categories/star-wars-kotor/index.html +++ b/categories/star-wars-kotor/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/video-game-mods/index.html b/categories/video-game-mods/index.html index 3ab5a149..a6940bad 100644 --- a/categories/video-game-mods/index.html +++ b/categories/video-game-mods/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/web-development/index.html b/categories/web-development/index.html index 20f0ff1f..c802daf8 100644 --- a/categories/web-development/index.html +++ b/categories/web-development/index.html @@ -23,7 +23,7 @@ - + diff --git a/categories/youtube/index.html b/categories/youtube/index.html index 5f9e0222..203a54fc 100644 --- a/categories/youtube/index.html +++ b/categories/youtube/index.html @@ -23,7 +23,7 @@ - + diff --git a/changelogs/2022/index.html b/changelogs/2022/index.html index 10c9bebc..b87a3456 100644 --- a/changelogs/2022/index.html +++ b/changelogs/2022/index.html @@ -23,7 +23,7 @@ - + diff --git a/changelogs/2023/index.html b/changelogs/2023/index.html index 99e9fc96..2af26db8 100644 --- a/changelogs/2023/index.html +++ b/changelogs/2023/index.html @@ -23,7 +23,7 @@ - + diff --git a/changelogs/2024/index.html b/changelogs/2024/index.html index c681ab48..5ca57f8f 100644 --- a/changelogs/2024/index.html +++ b/changelogs/2024/index.html @@ -23,7 +23,7 @@ - + @@ -451,6 +451,22 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8)) +
    +

    + 11 August 2024 +

    + +
    + + +

    6 August 2024 @@ -475,7 +491,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 27 July 2024 + 26 July 2024

    @@ -643,7 +659,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 21 June 2024 + 20 June 2024

    @@ -665,7 +681,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 13 June 2024 + 12 June 2024

    @@ -678,7 +694,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 12 June 2024 + 11 June 2024

    @@ -727,7 +743,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 7 June 2024 + 6 June 2024

    @@ -801,7 +817,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 26 May 2024 + 27 May 2024

    @@ -824,7 +840,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 25 May 2024 + 24 May 2024

    @@ -870,7 +886,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - 18 May 2024 + 17 May 2024

    diff --git a/changelogs/index.html b/changelogs/index.html index 934d7f93..acb9cf1b 100644 --- a/changelogs/index.html +++ b/changelogs/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,16 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    11 August 2024

    + +

    6 August 2024

    -

    27 July 2024

    +

    26 July 2024

    -

    21 June 2024

    +

    20 June 2024

    @@ -605,31 +615,19 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
  • Add new article: Palestine Masterlist.
    • -

    13 June 2024

    +

    12 June 2024

    • Add a Virtual Pets section to the home page.
    • The status.cafe widget and the Website Carbon badge on the home page will display a note about JavaScript being required for these widgets if the visitor has disabled JavaScript.
    • Remove JavaScript from the "Back to top" button.
    -

    12 June 2024

    +

    11 June 2024

    -

    11 June 2024

    -
      -
    • Improve "Back to top" button and footer link: -
        -
      • Replace arrow unicode with inline SVG for the button and border styling for the footer link
        • -
      • Display the footer link only if JavaScript is disabled
        • -
      • Use anchor HTML tag (<a>) instead of button tag (<button>) for the button
        • -
      -
      • -
    • Disable smooth scrolling for users with reduced motion settings.
      • -
    - diff --git a/changelogs/layouts/index.html b/changelogs/layouts/index.html index 9084d363..78b52673 100644 --- a/changelogs/layouts/index.html +++ b/changelogs/layouts/index.html @@ -23,7 +23,7 @@ - + diff --git a/changelogs/page/2/index.html b/changelogs/page/2/index.html index 735340ee..b0faf674 100644 --- a/changelogs/page/2/index.html +++ b/changelogs/page/2/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,18 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    11 June 2024

    +
      +
    • Improve "Back to top" button and footer link: +
        +
      • Replace arrow unicode with inline SVG for the button and border styling for the footer link
        • +
      • Display the footer link only if JavaScript is disabled
        • +
      • Use anchor HTML tag (<a>) instead of button tag (<button>) for the button
        • +
      +
      • +
    • Disable smooth scrolling for users with reduced motion settings.
      • +
    +

    9 June 2024

    • Convert most of the images on this website to AVIF format to reduce file size and save bandwidth.
      • @@ -508,7 +520,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
    -

    7 June 2024

    +

    6 June 2024

    -

    26 May 2024

    +

    27 May 2024

    • A Summer’s End — Hong Kong 1986 shrine: Add Passion Patch screenshots section to the Gallery page (Warning: The Passion Patch screenshots are not safe for work, though they are hidden by default when you visit the gallery page).
    • Add a "Skip to content" button for screen reader and keyboard users (thank you Kale for the inspiration).
      • @@ -557,7 +569,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
    • Add "Personal Sites I Love" section to the Links page.
    -

    25 May 2024

    +

    24 May 2024

    -

    18 May 2024

    +

    17 May 2024

    @@ -615,11 +627,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
  • New blog post: April 2024 Leilukin's Hub Overhaul with Eleventy.
    • -

    20 April 2024

    -
      -
    • Finished overhauling this entire website with the static site generator Eleventy.
      • -
    - diff --git a/changelogs/page/3/index.html b/changelogs/page/3/index.html index a259bb5f..dd9c2e5e 100644 --- a/changelogs/page/3/index.html +++ b/changelogs/page/3/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    20 April 2024

    +
      +
    • Finished overhauling this entire website with the static site generator Eleventy.
      • +
    +

    5 April 2024

    -

    6 September 2023

    -
      -
    • Moved pages of my video game mods and playlists to Projects page.
      • -
    - diff --git a/changelogs/page/4/index.html b/changelogs/page/4/index.html index 45e3ae85..fc94247d 100644 --- a/changelogs/page/4/index.html +++ b/changelogs/page/4/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    6 September 2023

    +
      +
    • Moved pages of my video game mods and playlists to Projects page.
      • +
    +

    4 September 2023

    -

    27 June 2023

    - - diff --git a/changelogs/page/5/index.html b/changelogs/page/5/index.html index cc792282..b079ab89 100644 --- a/changelogs/page/5/index.html +++ b/changelogs/page/5/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,20 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    27 June 2023

    + +

    26 June 2023

    • Replaced incorrect uses of semantic HTML tags throughout the entire website, such as replacing <em> that were used for media titles with <cite>, <strong> that were used for styling with custom CSS class.
      • @@ -608,18 +622,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
    • Added my latest mod, Juhani Item Pack for TSL, to my mods for Star Wars: Knights of the Old Republic II: The Sith Lords page.
    -

    28 January 2023

    -
      -
    • Added a Links page.
      • -
    • Move the link to changelog to the sidebar.
      • -
    • Due to these new changes to the navigation links on the sidebar, I wrote a JavaScript file to dynamically generate the contents on the right sidebar and the footer across multiple pages on this site.
      • -
    • Adjust the line spacing and the spacing between the listed items on the changelog page.
      • -
    • Made adjustments to the relative paths in the HTML files, to ensure this site's favicons will show up on the title bar by default.
      • -
    • Fixed the issue of the page style not applied to the Not Found page.
      • -
    • Updated the About page.
      • -
    • Update the Page Not Found page.
      • -
    - diff --git a/changelogs/page/6/index.html b/changelogs/page/6/index.html index 68fd2e1f..32c62df4 100644 --- a/changelogs/page/6/index.html +++ b/changelogs/page/6/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,18 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    28 January 2023

    +
      +
    • Added a Links page.
      • +
    • Move the link to changelog to the sidebar.
      • +
    • Due to these new changes to the navigation links on the sidebar, I wrote a JavaScript file to dynamically generate the contents on the right sidebar and the footer across multiple pages on this site.
      • +
    • Adjust the line spacing and the spacing between the listed items on the changelog page.
      • +
    • Made adjustments to the relative paths in the HTML files, to ensure this site's favicons will show up on the title bar by default.
      • +
    • Fixed the issue of the page style not applied to the Not Found page.
      • +
    • Updated the About page.
      • +
    • Update the Page Not Found page.
      • +
    +

    26 January 2023

    -

    5 October 2022

    - - diff --git a/changelogs/page/7/index.html b/changelogs/page/7/index.html index 8019bce4..57b9df6d 100644 --- a/changelogs/page/7/index.html +++ b/changelogs/page/7/index.html @@ -23,7 +23,7 @@ - + @@ -495,6 +495,13 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    +

    5 October 2022

    + +

    4 October 2022

    • Added download links to Love Between Brianna and the Exile - The Sith Lords Restored Content Mod Version and Remote Tells Influence Patch for The Sith Lords Restored Content Mod on my KotOR 2 mods page.
      • diff --git a/colophon/index.html b/colophon/index.html index c3d59198..5755fba6 100644 --- a/colophon/index.html +++ b/colophon/index.html @@ -23,7 +23,7 @@ - + diff --git a/feed.xml b/feed.xml deleted file mode 100644 index 8324e73f..00000000 --- a/feed.xml +++ /dev/null @@ -1,536 +0,0 @@ - - - Leilukin's Hub - Leilukin's personal website. - - - 2024-08-11T09:20:50Z - https://leilukin.com/ - - Leilukin - contact@leilukin.com - - - - Changelog: 6 August 2024 - - 2024-08-06T00:00:00Z - https://leilukin.com/ - <ul> -<li>New article: <a href="https://leilukin.com/articles/accessible-footnotes">&quot;How I (Tried to) Implement Accessible Footnotes&quot;</a>, which is also my entry for <a href="https://32bit.cafe/">32-Bit Cafe</a>'s <a href="https://32bit.cafe/~xandra/events/codejam5/">Community Code Jam #5: Back to School</a>.</li> -</ul> - - - - - How I (Tried to) Implement Accessible Footnotes | Articles - - 2024-08-06T00:00:00Z - https://leilukin.com/articles/accessible-footnotes/ - <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"> -<h2 id="about-footnotes">About Footnotes</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#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>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>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"> -<h2 id="attempted-to-use-css-counters">Attempted to Use CSS Counters</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#attempted-to-use-css-counters" aria-labelledby="attempted-to-use-css-counters"><span hidden="">#</span></a></div> -<p>When I was searching for how to implement accessible footnotes, I discovered <a href="https://kittygiraudel.com/">Kitty Giraudel</a>'s article, <a href="https://www.sitepoint.com/accessible-footnotes-css/">&quot;Accessible Footnotes with CSS&quot;</a> which teaches the method of using the combination of HTML <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a> attribute and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a> to add numbered references, to reduce the hassle of manually re-numbering all existing footnotes in case you want to update or reorder the references.</p> -<p>Her article also teaches adding a highlight background colour when heading to a footnote from a reference, as well as providing back links to head back to a reference from a footnote, by using the combination of the backlink Unicode icon (↩) and the HTML <code>aria-label</code> attribute with a value of “Back to content”. The uses of ARIA labels make footnotes more screen reader-friendly.</p> -<p>Furthermore, Kitty created the <a href="https://github.com/KittyGiraudel/eleventy-plugin-footnotes">eleventy-plugin-footnotes plugin</a> for the static site generator <a href="https://www.11ty.dev/">Eleventy</a>, and wrote a blog post about it, <a href="https://kittygiraudel.com/2020/12/02/footnotes-in-11ty/">&quot;Footnotes in 11ty&quot;</a>. Since I already had begun to <a href="https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy">use Eleventy to build my website</a>, I tried Kitty's plugin.</p> -<p>Unfortunately, a known limitation of using CSS counter method to generate footnotes is <a href="https://github.com/KittyGiraudel/eleventy-plugin-footnotes/issues/83">not being able to reference the same footnote multiple times</a>. As I want to be able to reference the same footnote more than once when I am citing sources on my shrine pages, I had to give up the plugin and look for an alternative.</p> -<div class="heading-wrapper h2"> -<h2 id="starting-with-markdown-it-footnote-plugins-default-footnote-markup">Starting with markdown-it-footnote Plugin's Default Footnote Markup</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#starting-with-markdown-it-footnote-plugins-default-footnote-markup" aria-labelledby="starting-with-markdown-it-footnote-plugins-default-footnote-markup"><span hidden="">#</span></a></div> -<p>Kitty Giraudel's blog post about creating footnotes in Eleventy mentioned <a href="https://github.com/markdown-it/markdown-it-footnote">markdown-it-footnote</a>, the footnotes plugin for <a href="https://github.com/markdown-it/markdown-it">markdown-it</a> Markdown parser, which is integrated in Eleventy by default to convert Markdown to HTML. Kitty commented on the accessibility shortcomings of markdown-it-footnote in the blog post:</p> -<blockquote> -<p>[...]it’s not super accessible (let alone by default), even considering all the customisation options. That’s because the footnote references end up being numbers (e.g. [1]) which are meaningless when listed or tabbed through because devoid of their surrounding context.</p> -</blockquote> -<p>That said, since the plugin is customisable, I still wanted to give it a shot to see if I could make configurations to improve its accessibility, so I installed markdown-it-footnote and looked into the plugin's default HTML markup output.</p> -<p>Here is a sample of what the HTML markup output of markdown-it-footnote looks like:</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>[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>[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>[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>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>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>↩︎<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>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>↩︎<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>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>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>↩︎<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>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> -<p>This is what this HTML markup will look like on a live web page:</p> -<p><img src="https://leilukin.com/assets/images/articles/accessible-footnotes/footnote-sample.avif" alt="Web page footnotes sample screenshot" /></p> -<p>What this HTML markup does:</p> -<ul> -<li>Adding a footnote reference as a superscript by using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup"><code>&lt;sup&gt;</code></a> tag with numbers as the content.</li> -<li>Using a <code>&lt;hr&gt;</code> horizontal line element to separate the main body of the page and the footnote section;</li> -<li>Using the <code>&lt;ol&gt;</code> tag to render the footnotes as a numbered list;</li> -<li>Each footnote list item has an <code>id</code> attribute</li> -<li>If a footnote is referenced more than once, the additional footnote references are labelled with colons.</li> -</ul> -<p>(Note: the class names were added by markdown-it-footnote, but if you do not use it, you can rename the class name to whatever you want, and even if you use markdown-it-footnote, you can still change the class names if you want to go deep into it)</p> -<p>Next step is trying to improve this HTML markup by making it accessible.</p> -<div class="heading-wrapper h2"> -<h2 id="make-markdown-it-footnotes-markup-more-accessible">Make markdown-it-footnote's Markup More Accessible</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#make-markdown-it-footnotes-markup-more-accessible" aria-labelledby="make-markdown-it-footnotes-markup-more-accessible"><span hidden="">#</span></a></div> -<div class="heading-wrapper h3"> -<h3 id="clarify-footnote-reference-labels">Clarify Footnote Reference Labels</h3> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#clarify-footnote-reference-labels" aria-labelledby="clarify-footnote-reference-labels"><span hidden="">#</span></a></div> -<p>As pointed out by Kitty Giraudel, labelling the footnote reference as mere numbers like [1] is an accessibility shortcoming, because these reference links become meaningless when being focused on by tabbing through the links, as these reference links would be devoid of context.</p> -<p>What I did to tackle this was changing the reference labels by adding a word &quot;Footnote&quot; to clarify that these links are for footnotes. For example, [1] becomes [Footnote #1], so when screen readers focus on a footnote reference link, it will be read out as &quot;Footnote number one link&quot;.</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>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>[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></code></pre> -<p>Optionally, if you want your footnote labels to still display only numbers on screen, you can use a CSS class to <a href="https://www.a11yproject.com/posts/how-to-hide-content/">visually hide</a> the extra characters in the footnote label. This <code>.visually-hidden</code> utility class is a useful tool in your arsenal for accessible web design, as it is often used to hide a content that you do not mean to show on screen, but you still want it to be read by assistive technology.</p> -<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.visually-hidden</span> <span class="token punctuation">{</span> - <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>0 0 0 0<span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> - <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> - <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> - <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> - <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> -<span class="token punctuation">}</span></code></pre> -<p>To make my footnote reference labels display only a number on screen, I use a <code>span</code> tag with <code>visually-hidden</code> as the value of the <code>class</code> attribute to wrap around &quot;Footnote #&quot;, so on screen, [Footnote #1] is changed to [1].</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>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> - [<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footnote #<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>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></code></pre> -<div class="heading-wrapper h3"> -<h3 id="add-aria-label-to-footnote-back-links">Add ARIA Label to Footnote Back Links</h3> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#add-aria-label-to-footnote-back-links" aria-labelledby="add-aria-label-to-footnote-back-links"><span hidden="">#</span></a></div> -<p>Next step is adding an ARIA label to the footnote backlinks, by adding an <code>aria-label</code> attribute with &quot;Back to reference #[Insert reference number]&quot; as its value. For example:</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>a</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Back to reference #1<span class="token punctuation">"</span></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>↩︎<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre> -<p>When a footnote back link is focused on via tabbing, screen readers will read it out as &quot;Back to reference number one link&quot;.</p> -<div class="heading-wrapper h3"> -<h3 id="add-heading-to-footnote-section">Add Heading to Footnote Section</h3> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#add-heading-to-footnote-section" aria-labelledby="add-heading-to-footnote-section"><span hidden="">#</span></a></div> -<p>To make it clear that the section is for footnotes, I add a HTML heading before the list of footnotes, such as:</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>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></code></pre> -<div class="heading-wrapper h2"> -<h2 id="final-html-markup-for-accessible-footnotes">Final HTML Markup for Accessible Footnotes</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#final-html-markup-for-accessible-footnotes" aria-labelledby="final-html-markup-for-accessible-footnotes"><span hidden="">#</span></a></div> -<p>Here is my final HTML markup sample to create accessible footnotes:</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>[<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footnote #<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>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>[<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footnote #<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>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>[<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footnote #<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>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>a</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Back to reference #1<span class="token punctuation">"</span></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>↩︎<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>a</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Back to reference #1:1<span class="token punctuation">"</span></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>↩︎<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>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>a</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Back to reference #2<span class="token punctuation">"</span></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>↩︎<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>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> -<p>As for the CSS, in addition to using the <code>.visually-hidden</code> utility class, I refer to Kitty Giraudel's <a href="https://www.sitepoint.com/accessible-footnotes-css/">&quot;Accessible Footnotes with CSS&quot;</a> article to style the highlight background color when heading to a footnote from a reference.</p> -<div class="heading-wrapper h2"> -<h2 id="configure-markdown-it-footnote-in-eleventys-configuration-file">Configure markdown-it-footnote in Eleventy's Configuration File</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#configure-markdown-it-footnote-in-eleventys-configuration-file" aria-labelledby="configure-markdown-it-footnote-in-eleventys-configuration-file"><span hidden="">#</span></a></div> -<p>(If you do not use Eleventy, you may skip this section)</p> -<p>My final step was to configure the markdown-it-footnote plugin, by editing Eleventy's configuration file (I named mine <code>eleventy.config.js</code>), so the plugin would render my accessible footnote HTML markup.</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;a aria-label="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">" 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">\u21a9\uFE0E&lt;/a></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">'[&lt;span class="visually-hidden">Footnote #&lt;/span>'</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> -<p>If you are a fellow Eleventy user, feel free to borrow my markdown-it-footnote configurations in your own. Make sure you install markdown-it-footnote first by keying in the installation command in the terminal:</p> -<pre class="language-powershell" tabindex="0"><code class="language-powershell">npm install markdown-it-footnote <span class="token operator">--</span>save</code></pre> -<div class="heading-wrapper h2"> -<h2 id="bonus-alternatives-to-footnotes">Bonus: Alternatives to Footnotes</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#bonus-alternatives-to-footnotes" aria-labelledby="bonus-alternatives-to-footnotes"><span hidden="">#</span></a></div> -<p>As you likely have realised, footnotes are really tricky to implement on web pages, so you may be wondering: is there any alternative to footnotes?</p> -<p>For extra comments and tangents, by favourite approach is using HTML's details disclosure element with the <code>&lt;details&gt;</code> tag, with a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a> element and a sibling element wrapping the content displayed when the disclosure is expanded.</p> -<p>I have been using the disclosure element for additional comments or information on this website, like in my blog post, <a href="https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/">&quot;My Cassette Beasts Fanlisting Application has been Approved&quot;</a>. As for the styling, initially I indented the content inside the disclosure to differentiate the disclosure content from the rest of the content of the page, but recently I switched to adding top and bottom borders after being inspired by <a href="https://starbreaker.org/">Starbreaker</a>'s website, who also has a post about footnotes, <a href="https://starbreaker.org/blog/tech/footnotes-no-fun-to-create-either/index.html">&quot;Footnotes: No Fun to Create, Either&quot;</a>.</p> -<details class="content-disclosure"> - <summary class="content-disclosure__summary">More ways to use <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> elements</summary> - <div class="content-disclosure__content"><p><code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> have become among my favourite HTML elements due to how useful they are. In addition to extra comments and info, Leilukin's Hub has also used the elements for the following purposes:</p> -<ul> -<li>Table of contents, like the one this very article has</li> -<li>Hiding spoilers, like in my <cite>Cassette Beasts</cite> shrine article, <a href="https://leilukin.com/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/">&quot;How Cassette Beasts is Much More than a Pokémon Clone&quot;</a></li> -<li>Content warnings, like in my <a href="https://leilukin.com/shrines/asummersend/gallery/"><cite>A Summer’s End — Hong Kong 1986</cite> shrine's gallery page</a>, with its styling being inspired by another Kitty Giraudel's blog post, <a href="https://kittygiraudel.com/2022/09/04/a-content-warning-component/">&quot;A content warning component&quot;</a></li> -</ul> -</div> - </details> -<p>As for citing sources, the simplest way would be naming and linking to the source in the main text of your page, though it does mean you may end up repeating the title of the source if you want to attribute to it more than once on your page. This was once the approach of my shrine pages, though I found the pages looked rather cluttered, so I eventually chose to use markdown-it-footnote alongside Eleventy.</p> -<div class="heading-wrapper h2"> -<h2 id="wrapping-up">Wrapping Up</h2> -<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#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>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> - - - - - Changelog: 2 August 2024 - - 2024-08-02T00:00:00Z - https://leilukin.com/ - <ul> -<li>Added my first publicly released code snippet on this website: <a href="https://leilukin.com/projects/snippets/disability-pride-flag-background">Responsive Disability Pride Flag CSS Background</a>.</li> -</ul> - - - - - Changelog: 27 July 2024 - - 2024-07-27T00:00:00Z - https://leilukin.com/ - <ul> -<li>Leilukin's Hub and all its subsites have been migrated to <a href="https://www.hostinger.my/">Hostinger</a></li> -<li>New blog post: <a href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub">Leilukin's Hub Has Migrated to Hostinger</a></li> -<li>Change the theme of <a href="https://tumbleblog.leilukin.com/">Leilukin's Hub Tumbleblog</a> to a custom theme based on the Umbra theme from Chyrp Lite</li> -<li>Add a link to contact me via email to the website's footer</li> -</ul> - - - - - Leilukin's Hub Has Migrated to Hostinger | Blog - - 2024-07-27T00:00:00Z - https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/ - <p>Starting with 25 July 2024, Leilukin's Hub and all its subsites, including its <a href="https://tumbleblog.leilukin.com/">tumbleblog</a> and <a href="https://fan.leilukin.com/">fanlisting collective</a>, have been migrated to <a href="https://www.hostinger.my/">Hostinger</a>. In other words, I have moved hosts again almost two months after <a href="https://leilukin.com/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub">moving Leilukin's Hub to Netlify</a>.</p> -<p>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.</p> -<div class="heading-wrapper h2"> -<h2 id="why-decided-to-move-hosts-again">Why Decided to Move Hosts Again</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#why-decided-to-move-hosts-again" aria-labelledby="why-decided-to-move-hosts-again"><span hidden="">#</span></a></div> -<div class="heading-wrapper h3"> -<h3 id="owning-both-static-and-dynamic-sites">Owning Both Static and Dynamic Sites</h3> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#owning-both-static-and-dynamic-sites" aria-labelledby="owning-both-static-and-dynamic-sites"><span hidden="">#</span></a></div> -<p>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.</p> -<p><a href="https://www.netlify.com/">Netlify</a>, which previously hosted the main site of Leilukin's Hub, does not support PHP hosting, so I hosted my tumbleblog and fanlisting collective on <a href="https://www.infinityfree.com/">InfinityFree</a>, 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.</p> -<div class="heading-wrapper h3"> -<h3 id="limitations-of-infinityfrees-free-hosting">Limitations of InfinityFree's Free Hosting</h3> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#limitations-of-infinityfrees-free-hosting" aria-labelledby="limitations-of-infinityfrees-free-hosting"><span hidden="">#</span></a></div> -<p>InfinityFree places <a href="https://forum.infinityfree.com/docs?topic=49356">their own security measures</a> on websites on their free hosting plan to ensure <a href="https://forum.infinityfree.com/docs?topic=49353">only regular browsers can access these websites</a>. While it is understandable to apply these security measures on free websites to prevent abuse, it can be a dealbreaker depending on your needs.</p> -<p>In my case, tht thing that frustrated me the most about InfinityFree's security system on their free websites is the fact that my tumbleblog was unable to provide RSS feed in usual way. <a href="https://chyrplite.net/">Chyrp Lite</a>, which powers my tumbleblog, includes the feature of providing blog RSS feeds, but InfinityFree'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's feeds to get around it.</p> -<div class="heading-wrapper h3"> -<h3 id="invested-in-webmastery-enough-to-spend-money">Invested in Webmastery Enough to Spend Money</h3> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#invested-in-webmastery-enough-to-spend-money" aria-labelledby="invested-in-webmastery-enough-to-spend-money"><span hidden="">#</span></a></div> -<p>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.</p> -<p>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.</p> -<div class="heading-wrapper h2"> -<h2 id="why-hostinger">Why Hostinger</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#why-hostinger" aria-labelledby="why-hostinger"><span hidden="">#</span></a></div> -<div class="heading-wrapper h3"> -<h3 id="affordable-price-with-regional-pricing">Affordable Price with Regional Pricing</h3> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#affordable-price-with-regional-pricing" aria-labelledby="affordable-price-with-regional-pricing"><span hidden="">#</span></a></div> -<p>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.</p> -<p>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.</p> -<p>Compare the pricing of the 48-month Premium Shared Hosting plan, which was what I ended up spending to host my websites, of <a href="https://www.hostinger.my/">Hostinger.my</a> to <a href="https://www.hostinger.com/">Hostinger.com</a>: 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's own hosting plan with different currencies, let alone comparing Hostinger's hosting plan to its competitors.</p> -<p>As a bonus, being able to purchase Hostinger's hosting plans in Malaysian Ringgit means I can pay by directly transferring money from a Malaysian bank account.</p> -<p>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.</p> -<div class="heading-wrapper h3"> -<h3 id="many-many-features-at-a-cheap-price">Many, Many Features at a Cheap Price</h3> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#many-many-features-at-a-cheap-price" aria-labelledby="many-many-features-at-a-cheap-price"><span hidden="">#</span></a></div> -<p>The cheap price of the Premium Shared Hosting Plan of Hostinger is jam-packed with many features, including but not limited to:</p> -<ul> -<li>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)</li> -<li>100 GB SSD storage</li> -<li>Unlimited bandwidth (InfinityFree's free hosting also allows unlimited bandwidth, but Netlify has a limit of 100GB per month)</li> -<li>Unlimited MySQL databases (while Infinity has a limit of 400 databases)</li> -<li>Email accounts included for free</li> -<li>Built-in Git support, which allows me to continue deploying my main site from its Git repository</li> -<li>And more!</li> -</ul> -<p>On the subject of email accounts, it is worth pointing out that Hostinger'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.</p> -<div class="heading-wrapper h2"> -<h2 id="a-birthday-present-for-myself">A Birthday Present for Myself</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#a-birthday-present-for-myself" aria-labelledby="a-birthday-present-for-myself"><span hidden="">#</span></a></div> -<p>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.</p> -<div class="heading-wrapper h2"> -<h2 id="domain-names-remaining-at-porkbun">Domain Names Remaining at Porkbun</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#domain-names-remaining-at-porkbun" aria-labelledby="domain-names-remaining-at-porkbun"><span hidden="">#</span></a></div> -<p>While Hostinger provides domain registration and transfer service, I chose to have the leilukin.com domain name stay with <a href="https://porkbun.com/">Porkbun</a>, because I already spent money on the domain name, so Hostinger's hosting plan providing domain name registration for free for the first year does not benefit me.</p> -<p>In addition, Porkbun's renewal rate for domain names is cheaper than Hostinger. For example, Porkbun renews the <code>.com</code> domain extension at 10.37 USD per year, while Hostinger renews at 15.99 USD per year. Even the Malaysian Ringgit pricing of Hostinger's domain renewal rate for <code>.com</code>, 55.99 MYR per year, is still more expansive than Porkbun's approximately 48.3 MYR per year rate.</p> -<div class="heading-wrapper h2"> -<h2 id="wrapping-up">Wrapping Up</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/#wrapping-up" aria-labelledby="wrapping-up"><span hidden="">#</span></a></div> -<p>Leilukin's Hub'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 <a href="https://web.dev/articles/codelab-preload-web-fonts">preloading the fonts</a>.</p> -<p>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's address every time I move hosts.</p> - - - - - Changelog: 22 July 2024 - - 2024-07-22T00:00:00Z - https://leilukin.com/ - <ul> -<li>Add a <a href="https://zine.kalechips.net/index">Salad Magazine</a> section to my <a href="https://leilukin.com/adoptables">Adoptables pages</a>.</li> -</ul> - - - - - Changelog: 21 July 2024 - - 2024-07-21T00:00:00Z - https://leilukin.com/ - <ul> -<li>Add a section for the <a href="https://divergentrays.com/kitty">Kitty Friends Pixel Club</a> to my <a href="https://leilukin.com/adoptables">Adoptables page</a>, including my kitty friends!</li> -</ul> - - - - - Changelog: 20 July 2024 - - 2024-07-20T00:00:00Z - https://leilukin.com/ - <ul> -<li>Remake the mobile version of navigation menu by using the HTML <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover"><code>popover</code></a> attirbutes, allowing the navigation menu to be dismissed without JavaScript</li> -</ul> - - - - - Changelog: 18 July 2024 - - 2024-07-18T00:00:00Z - https://leilukin.com/ - <ul> -<li>Add list of web cliques I joined to the home page</li> -<li>Add pixel cliques I joined to the <a href="https://leilukin.com/adoptables">Adoptables page</a></li> -<li>Add a <a href="https://leilukin.com/links/#joined">Joined</a> tab to the <a href="https://leilukin.com/links">Links page</a> to list the web cliques and widgets of web rings I joined, as well as linking to my fanlisting collective.</li> -<li>Upgrade Eleventy to version 3.0</li> -<li>Bundle page-specific CSS and JavaScript in the <code>&lt;head&gt;</code> element with Eleventy 3.0's <a href="https://github.com/11ty/eleventy-plugin-bundle">built-in bundle plugin</a></li> -</ul> - - - - - Changelog: 13 July 2024 - - 2024-07-13T00:00:00Z - https://leilukin.com/ - <ul> -<li>Add an inline SVG icon to external links</li> -<li>Use inline SVG for Font Awesome icons to remove the need of hosting Font Awesome assets</li> -<li>Add dark mode support for <a href="https://leilukin.com/shrines/cassettebeasts"><cite>Cassette Beasts</cite> shrine</a> based on user preference in system setting</li> -</ul> - - - - - Changelog: 6 July 2024 - - 2024-07-06T00:00:00Z - https://leilukin.com/ - <ul> -<li>Implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for <a href="https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html">1.4.13: Content on Hover or Focus (Level AA)</a>, by utilising <a href="https://github.com/scottaohara/a11y_tooltips">Scott O'Hara's ARIA Tooltips</a> script. (Thank you <a href="https://www.groundedwren.com/">Vera</a> for your feedback on my previous implementation of the tooltips)</li> -</ul> - - - - - Changelog: 3 July 2024 - - 2024-07-03T00:00:00Z - https://leilukin.com/ - <ul> -<li>Add <a href="https://leilukin.com/links/#articles">Articles</a> and <a href="https://leilukin.com/links/#resources">Resources</a> tabs to the <a href="https://leilukin.com/links">links page</a>.</li> -<li>Show visible stylised tooltips for some website buttons on mouse hover or keyboard focus (thanks to <a href="https://solaria.neocities.org/accessibility">Solaria's web accessibility guide</a> for the inspiration).</li> -<li>Add a list of webrings my website is part of to the home page.</li> -</ul> - - - - - Changelog: 2 July 2024 - - 2024-07-02T00:00:00Z - https://leilukin.com/ - <ul> -<li>The main site header now would display a Disability Pride Month blurb and the disability pride flag during July</li> -<li><a href="https://fan.leilukin.com/">My fanlisting collective</a> and <a href="https://fan.leilukin.com/cassettebeasts"><cite>Cassette Beasts</cite> fanlisting</a> launched!</li> -<li><a href="https://leilukin.com/projects">Projects page</a>: -<ul> -<li>Reorganised pages for my video game mods into their own directory</li> -<li>Add code projects, started with <a href="https://leilukin.com/projects/code/bellabuffs-phpmailer">BellaBuffs with PHPMailer Integration</a></li> -</ul> -</li> -<li>New blog post: <a href="https://leilukin.com/blog/posts/2024-07-02-fanlisting-collective-launch">Cassette Beasts Fanlisting and My Fanlisting Collective Launched</a></li> -<li><a href="https://leilukin.com/links">Links page</a>: -<ul> -<li>Add tabs to sort my link collection by category (thanks to <a href="https://kalechips.net/projects/snippets/tabs">Kalechips' JavaScript-free tabs code scnippet</a> for the inspiration)</li> -<li>Add <a href="https://leilukin.com/links/#webmastery">webmastery resources</a></li> -</ul> -</li> -</ul> - - - - - Cassette Beasts Fanlisting and My Fanlisting Collective Launched | Blog - - 2024-07-02T00:00:00Z - https://leilukin.com/blog/posts/2024-07-02-fanlisting-collective-launch/ - <p>I am incredibly excited to announce the official launch of <a href="https://fan.leilukin.com/cassettebeasts">Land of Confusion</a>, <a href="https://thefanlistings.org/">The Fanlistings Network</a>-approved fanlisting for <cite>Cassette Beasts</cite>, and <a href="https://fan.leilukin.com/">Beehive</a>, my fanlisting collective! 🥳</p> -<p>If you are a fan of <cite>Cassette Beasts</cite>, feel free to join my fanlisting! If you like fanlistings as well, feel free to check out my fanlisting collective!</p> -<p>In addition, in light of the launch of my first fanlisting, I am also releasing <a href="https://leilukin.com/projects/code/bellabuffs-phpmailer">my fork of BellaBuffs</a>, the fanlisting script written in PHP, with integration of <a href="https://github.com/PHPMailer/PHPMailer">PHPMailer</a>, the email sending library!</p> -<p>My fanlisting collective and <cite>Cassette Beasts</cite> fanlisting are hosted on <a href="https://www.infinityfree.com/">InfinityFree</a>, since <a href="https://www.netlify.com/">Netlify</a>, which currently hosts the main site of Leilukin's Hub, does not support PHP.</p> -<div class="heading-wrapper h2"> -<h2 id="a-milestone">A Milestone</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-02-fanlisting-collective-launch/#a-milestone" aria-labelledby="a-milestone"><span hidden="">#</span></a></div> -<p>In <a href="https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved">my previous post</a>, I announced that The Fanlistings Network (also known as TFL.org) had approved my application for building and running a fanlisting for <cite>Cassette Beasts</cite>.</p> -<p>After completing the <cite>Cassette Beasts</cite> fanlisting on 30 June 2024, I submitted a <a href="https://thefanlistings.org/finished.php">finished form</a> to TFL.org to let them know that I have finished my fanlisting. The Fanlistings Network responded by emailing me and informing me thatthey have added the URL of my <cite>Cassette Beasts</cite> fanlisting to the list of approved fanlistings under the Games category and the <a href="https://www.thefanlistings.org/browse.php?show=games&amp;start=8">Computer, Console, &amp; Video Games subcategory</a> (<a href="https://web.archive.org/web/20240702062715/https://www.thefanlistings.org/browse.php?show=games&amp;start=8">view the web archive version</a>).</p> -<p>The launch of my <cite>Cassette Beasts</cite> fanlisting is a major moment for me as both a webmaster and a <cite>Cassette Beasts</cite> fan, as I am enthusiastic about the fact that the very first fanlisting I create would be for my absolute favourite video game.</p> -<div class="heading-wrapper h2"> -<h2 id="first-foray-in-php">First Foray in PHP</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-02-fanlisting-collective-launch/#first-foray-in-php" aria-labelledby="first-foray-in-php"><span hidden="">#</span></a></div> -<p>My <cite>Cassette Beasts</cite> fanlisting is powered by <a href="https://www.jemjabella.co.uk/scripts/bellabuffs/">BellaBuffs</a>. I was new to PHP when I started considering building fanlistings myself, as my main site Leilukin's Hub is a static site, so building the <cite>Cassette Beasts</cite> fanlisting was my first foray in learning to code in PHP.</p> -<p>Before starting to actually work on building the <cite>Cassette Beasts</cite> fanlisting, I tried out <a href="https://scripts.indisguise.org/enthusiast/">Enthusiast</a>, the other commonly used fanlisting script also written in PHP. I tried <a href="https://github.com/DudeThatsErin/enth">Erin's fork of Enthusiast</a> specifically, since InfinityFree uses version 8.2 of PHP Enthusiast also has extra features that BellaBuffs does not have, including allowing fanlisting members to set passwords and even managing the entire fanlisting collective.</p> -<p>Unfortunately, I encountered a critical issue with Enthusiast when I tried it: whenever I added a fanlisting to my joined fanlisting list in the admin panel, the home page of the fanlisting collective would go completely blank. I do not know the cause of the issue, and I was not familiar enough with PHP to be confident in attempting to investigate the entire fanlisting collective code just to find the culprit, especially when it uses MySQL database to store data, adding another complexity in troubleshooting it.</p> -<p>Therefore, I later tried BellaBuffs, and chose BellaBuffs as the script to power my fanlistings, then code my own fanlisting collective myself.</p> -<p>There were a few setbacks I encountered when I was building the <a href="https://fan.leilukin.com/cassettebeasts"><cite>Cassette Beasts</cite> fanlisting</a> with BellaBuffs and hosting the fanlisting on InfinityFree — I learned that InfinityFree's free hosting plan <a href="https://forum.infinityfree.com/t/sending-email-from-your-website-php-mail/49242">does not support PHP <code>mail()</code> function</a>, which is used by BellaBuffs.</p> -<div class="heading-wrapper h2"> -<h2 id="integrating-phpmailer-into-bellabuffs">Integrating PHPMailer into BellaBuffs</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-02-fanlisting-collective-launch/#integrating-phpmailer-into-bellabuffs" aria-labelledby="integrating-phpmailer-into-bellabuffs"><span hidden="">#</span></a></div> -<p>BellaBuffs includes the optional features to email new members after submitting the join form, email the fanlisting admin when a new member joins or email new members when their applications were approved. The original BellaBuffs script achieved this by using PHP's built-in <code>mail()</code> feature, which unfortunately the free hosting of InfinityFree does not support, so I had to figure out an alternative way for my fanlisting on InfinityFree to send emails.</p> -<p>Thankfully, InfinityFree suggested using PHPMailer, and even providing a <a href="https://github.com/InfinityFreeHosting/contactform">contact form powered by PHPMailer</a> as a sample. As a result, I spent time in trying to incorporate PHPMailer into BellaBuffs based on the InfinityFree's PHPMailer contact form code, and voilà, I did it!</p> -<p>I am glad that despite my inexperience in PHP, I was able to apply the programming knowledge I learned from building my main site and taking online coding courses to build my fanlisting.</p> -<p>After successfully setting up the <cite>Cassette Beasts</cite> fanlisting, I decided to fork BellaBuffs and release my version of the fanlisting script with PHPMailer integration, in case there are others who want to use BellaBuffs to build fanlistings, but cannot or do not want to use the PHP <code>mail()</code> function.</p> -<p>You can download my BellaBuffs fork and learn about how to use it from <a href="https://github.com/helenclx/BellaBuffs-PHPMailer">its GitHub repository</a>.</p> -<div class="heading-wrapper h2"> -<h2 id="building-beehive">Building Beehive</h2> -<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-07-02-fanlisting-collective-launch/#building-beehive" aria-labelledby="building-beehive"><span hidden="">#</span></a></div> -<p>To give myself more practice in PHP as I built my first fanlisting, I decided to code my fanlisting collective in PHP as well.</p> -<p>I decided to name my fanlisting collective Beehive, since I have been using my drawing of a bee with a pair of glasses as my main avatar on the Internet, I figured it would be a good idea to name a subsite of mine something related to bees.</p> -<p>Furthermore, Beehive is a fitting name for a fanlisting collective, as beehives house honey bees, while this website houses all the fanlistings I created, maintain, joined and have applied to join.</p> -<p>Welcome to Beehive! 🐝</p> - - - - - Changelog: 27 June 2024 - - 2024-06-27T00:00:00Z - https://leilukin.com/ - <ul> -<li>Added a <a href="https://leilukin.com/articles/palestine-masterlist/#spotlight-crowdfunding-campaigns">Spotlight Crowdfunding Campaigns</a> section to my <a href="https://leilukin.com/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> - - - - - Changelog: 26 June 2024 - - 2024-06-26T00:00:00Z - https://leilukin.com/ - <ul> -<li>Added my other websites to my <a href="https://leilukin.com/projects">Projects page</a>.</li> -</ul> - - - - - Changelog: 24 June 2024 - - 2024-06-24T00:00:00Z - https://leilukin.com/ - <ul> -<li>New blog post: <a href="https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved">My Cassette Beasts Fanlisting Application has been Approved</a></li> -</ul> - - - - - My Cassette Beasts Fanlisting Application has been Approved | Blog - - 2024-06-24T00:00:00Z - https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/ - <p>On 22 June 2024, I submitted an <a href="https://thefanlistings.org/start/apply.php">application form</a> to <a href="https://thefanlistings.org/">The Fanlistings Network</a>, also known as TFL.org, to build and run a <cite>Cassette Beasts</cite> fanlisting, and now TFL.org has approved my application! <cite>Cassette Beasts</cite> is now on TFL.org's approved list under the Games category and the <a href="https://www.thefanlistings.org/browse.php?show=games&amp;start=8">Computer, Console, &amp; Video Games subcategory</a> (<a href="https://web.archive.org/web/20240624045621/https%3A%2F%2Fwww.thefanlistings.org%2Fbrowse.php%3Fshow%3Dgames%26start%3D8">view the web archive version</a>).</p> -<details class="content-disclosure"> - <summary class="content-disclosure__summary">What is a fanlisting?</summary> - <div class="content-disclosure__content"><p>For those who do not know what a fanlisting is, TFL.org has defined fanslitings as below:</p> -<blockquote> -<p>A fanlisting is simply an online listing of fans of a subject, such as a TV show, actor, or musician, that is created by an individual and open for fans from around the world to join. There are no costs, and the only requirements to join a fanlisting are your name and country. Fanlistings do not have to be large sites (although some are) - they are just a place where you can have your name listed along with other fans of the same subject. TheFanlistings.org is the original (but not only) web directory for fanlistings, dedicated to uniting fans across the globe.</p> -</blockquote> -</div> - </details> -<p>This is a major moment for me as both a webmaster and a <cite>Cassette Beasts</cite> fan. As a webmaster, I have been applying and joining fanlistings since I built my own website, as I have always found fanlistings a neat idea to gather and discover other people who share your interests across the world, as listing your country is a requirement when you apply to join a fanlisting. Recently, I have been considering building and running a fanlisting myself, with <cite>Cassette Beasts</cite> being my first choice since there is no fanlisting for <cite>Cassette Beasts</cite> yet. I began to dabble in PHP, so I can use a script like <a href="https://www.jemjabella.co.uk/scripts/bellabuffs/">BellaBuffs</a> to build a fanlisting. With my application approved by The Fanlistings Network, the <cite>Cassette Beasts</cite> fanlisting will be the first fanlisting I build and run.</p> -<p><cite>Cassette Beasts</cite> has become my favourite video game ever since I started playing it in July 2023, to the extent that not only I have a <a href="https://leilukin.com/shrines/cassettebeasts"><cite>Cassette Beasts</cite> shrine</a> on my website, I had already begun to consider creating the shrine even before beating the main campaign. I have also been tirelessly recommending the game throughout various online spaces. Therefore, I am honoured to be given this opportunity to build and run a fanlisting for <cite>Cassette Beasts</cite> that is approved by The Fanlistings Network, to add to my ongoing effort to boost the game's visibility.</p> -<p>The <cite>Cassette Beasts</cite> fanlisting is not ready yet at this moment, especially since I was not certain if The Fanlistings Network would approve my application, but now with their approval, I am going to work on building the <cite>Cassette Beasts</cite> fanlisting. TFL.org has a <a href="https://thefanlistings.org/start/rules.php">rule</a> that fanlisting owners need to complete their fanlisting within four weeks, so stay tuned for upcoming updates for my <cite>Cassette Beasts</cite> fanlisting!</p> -<p>Now that I will be running my own fanlisting, I will be also creating a fanlisting collective to gather all fanlistings I own, join and have applied to in one place. Since <a href="https://www.netlify.com/">Netlify</a>, which currently hosts the main site of Leilukin's Hub, does not support PHP, I will be hosting my fanlisting collective, including my <cite>Cassette Beasts</cite> fanlisting, on <a href="https://www.infinityfree.com/">InfinityFree</a>.</p> - - - - - Changelog: 23 June 2024 - - 2024-06-23T00:00:00Z - https://leilukin.com/ - <ul> -<li>Add <a href="https://leilukin.com/adoptables">Adoptables page</a>.</li> -</ul> - - - - - Changelog: 21 June 2024 - - 2024-06-21T00:00:00Z - https://leilukin.com/ - <ul> -<li>Leilukin's Hub now has a tumbleblog at <a href="https://tumbleblog.leilukin.com/">tumbleblog.leilukin.com</a>! Read the latest blog post to learn more: <a href="https://leilukin.com/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched">Leilukin's Hub Tumbleblog Launched</a>.</li> -</ul> - - - \ No newline at end of file diff --git a/guestbook/index.html b/guestbook/index.html index 5e988b8d..fc638561 100644 --- a/guestbook/index.html +++ b/guestbook/index.html @@ -23,7 +23,7 @@ - + diff --git a/index.html b/index.html index aad8e01f..21ad6e2b 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ - + @@ -435,9 +435,14 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

      What is New?

      -

      Changelog: 6 August 2024

      +

      Changelog: 11 August 2024

      View all site changelogs

      diff --git a/links/index.html b/links/index.html index 72648430..508b8b2c 100644 --- a/links/index.html +++ b/links/index.html @@ -23,7 +23,7 @@ - + diff --git a/now/index.html b/now/index.html index 88d215f6..868ee263 100644 --- a/now/index.html +++ b/now/index.html @@ -23,7 +23,7 @@ - + diff --git a/projects/code/bellabuffs-phpmailer/index.html b/projects/code/bellabuffs-phpmailer/index.html index bcd2b7fc..eefde1d3 100644 --- a/projects/code/bellabuffs-phpmailer/index.html +++ b/projects/code/bellabuffs-phpmailer/index.html @@ -23,7 +23,7 @@ - + diff --git a/projects/index.html b/projects/index.html index af9005b6..b163caf2 100644 --- a/projects/index.html +++ b/projects/index.html @@ -23,7 +23,7 @@ - + diff --git a/projects/playlists/index.html b/projects/playlists/index.html index d38ceda8..53e1c9d7 100644 --- a/projects/playlists/index.html +++ b/projects/playlists/index.html @@ -23,7 +23,7 @@ - + diff --git a/projects/snippets/disability-pride-flag-background/index.html b/projects/snippets/disability-pride-flag-background/index.html index 270a625c..20adf827 100644 --- a/projects/snippets/disability-pride-flag-background/index.html +++ b/projects/snippets/disability-pride-flag-background/index.html @@ -23,7 +23,7 @@ - + diff --git a/projects/videogamemods/kotor1/index.html b/projects/videogamemods/kotor1/index.html index a5c9f1b9..22f5a571 100644 --- a/projects/videogamemods/kotor1/index.html +++ b/projects/videogamemods/kotor1/index.html @@ -23,7 +23,7 @@ - + diff --git a/projects/videogamemods/kotor2/index.html b/projects/videogamemods/kotor2/index.html index d6440d27..20d2b063 100644 --- a/projects/videogamemods/kotor2/index.html +++ b/projects/videogamemods/kotor2/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/asummersend/gallery/index.html b/shrines/asummersend/gallery/index.html index dc821c53..b33da0fe 100644 --- a/shrines/asummersend/gallery/index.html +++ b/shrines/asummersend/gallery/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/asummersend/index.html b/shrines/asummersend/index.html index 8bc5226f..17fa0cb6 100644 --- a/shrines/asummersend/index.html +++ b/shrines/asummersend/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/asummersend/playlists/index.html b/shrines/asummersend/playlists/index.html index 55281c21..954de7b7 100644 --- a/shrines/asummersend/playlists/index.html +++ b/shrines/asummersend/playlists/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/asummersend/trivia/index.html b/shrines/asummersend/trivia/index.html index 9d511c87..985c30c3 100644 --- a/shrines/asummersend/trivia/index.html +++ b/shrines/asummersend/trivia/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html b/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html index db4ca368..4cc0c338 100644 --- a/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html +++ b/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/articles/index.html b/shrines/cassettebeasts/articles/index.html index 80db173b..ad6fb8b5 100644 --- a/shrines/cassettebeasts/articles/index.html +++ b/shrines/cassettebeasts/articles/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/facts/index.html b/shrines/cassettebeasts/facts/index.html index 630bb529..aec5d06c 100644 --- a/shrines/cassettebeasts/facts/index.html +++ b/shrines/cassettebeasts/facts/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/featured/index.html b/shrines/cassettebeasts/featured/index.html index f548c1b0..9439ff71 100644 --- a/shrines/cassettebeasts/featured/index.html +++ b/shrines/cassettebeasts/featured/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/gamelog/index.html b/shrines/cassettebeasts/gamelog/index.html index e2e542e7..dd43a777 100644 --- a/shrines/cassettebeasts/gamelog/index.html +++ b/shrines/cassettebeasts/gamelog/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/index.html b/shrines/cassettebeasts/index.html index 1906ac6a..feb42676 100644 --- a/shrines/cassettebeasts/index.html +++ b/shrines/cassettebeasts/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/cassettebeasts/resources/index.html b/shrines/cassettebeasts/resources/index.html index 383667bc..1a1d95ea 100644 --- a/shrines/cassettebeasts/resources/index.html +++ b/shrines/cassettebeasts/resources/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/index.html b/shrines/index.html index 0f8feec2..dc5af801 100644 --- a/shrines/index.html +++ b/shrines/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html b/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html index 02e956c8..5fbc53ad 100644 --- a/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html +++ b/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html b/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html index 09c8f201..2badf75f 100644 --- a/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html +++ b/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html b/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html index 6fa47603..3e375988 100644 --- a/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html +++ b/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/index.html b/shrines/starwarskotor/articles/index.html index 65d3f503..9519ceb4 100644 --- a/shrines/starwarskotor/articles/index.html +++ b/shrines/starwarskotor/articles/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html b/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html index e733c8ac..01b13ef6 100644 --- a/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html +++ b/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html b/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html index dd80b6f5..2e4e5086 100644 --- a/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html +++ b/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html b/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html index 711f6331..97b919db 100644 --- a/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html +++ b/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/partyswap-management-takeover/index.html b/shrines/starwarskotor/articles/partyswap-management-takeover/index.html index 0bf416a9..6c032ebd 100644 --- a/shrines/starwarskotor/articles/partyswap-management-takeover/index.html +++ b/shrines/starwarskotor/articles/partyswap-management-takeover/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html b/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html index 38c72f27..d05aae69 100644 --- a/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html +++ b/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/guides/index.html b/shrines/starwarskotor/guides/index.html index 675c731f..c65207c4 100644 --- a/shrines/starwarskotor/guides/index.html +++ b/shrines/starwarskotor/guides/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html b/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html index 15341cf5..481c1a87 100644 --- a/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html +++ b/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html b/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html index e8dc515c..522165aa 100644 --- a/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html +++ b/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html b/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html index 67d7e509..83a34100 100644 --- a/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html +++ b/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/index.html b/shrines/starwarskotor/index.html index f88906b8..b29087a6 100644 --- a/shrines/starwarskotor/index.html +++ b/shrines/starwarskotor/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/resources/index.html b/shrines/starwarskotor/resources/index.html index 5f98f630..b70209f4 100644 --- a/shrines/starwarskotor/resources/index.html +++ b/shrines/starwarskotor/resources/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html b/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html index c3496dbf..0cf1cdbd 100644 --- a/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html +++ b/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html b/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html index e9213c22..01edf3ac 100644 --- a/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html +++ b/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html b/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html index 6717bce3..76d2db57 100644 --- a/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html +++ b/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html @@ -23,7 +23,7 @@ - + diff --git a/shrines/starwarskotor/universes/index.html b/shrines/starwarskotor/universes/index.html index 7de57035..e19b8632 100644 --- a/shrines/starwarskotor/universes/index.html +++ b/shrines/starwarskotor/universes/index.html @@ -23,7 +23,7 @@ - + diff --git a/sitemap/index.html b/sitemap/index.html index f83a8ad1..10900aaa 100644 --- a/sitemap/index.html +++ b/sitemap/index.html @@ -23,7 +23,7 @@ - +