From 890ef635cd7f7d0c4eaedcb47db55a29199b3806 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Mon, 6 Jan 2025 09:39:04 +0800 Subject: [PATCH] Add borders to all four sides to disclosure contents --- src/articles/myarticles/accessible-footnotes.md | 2 +- .../myarticles/anti-harry-potter-jk-rowling-masterlist.md | 2 +- src/assets/css/components.css | 6 ++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/articles/myarticles/accessible-footnotes.md b/src/articles/myarticles/accessible-footnotes.md index 5ddc299a..f299ea89 100644 --- a/src/articles/myarticles/accessible-footnotes.md +++ b/src/articles/myarticles/accessible-footnotes.md @@ -222,7 +222,7 @@ As you likely have realised, footnotes are really tricky to implement on web pag For extra comments and tangents, by favourite approach is using HTML's details disclosure element with the `
` tag, with a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) element and a sibling element wrapping the content displayed when the disclosure is expanded. -I have been using the disclosure element for additional comments or information on this website, like in my blog post, ["My Cassette Beasts Fanlisting Application has been Approved"](/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/). 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 [Starbreaker](https://starbreaker.org/)'s website, who also has a post about footnotes, ["Footnotes: No Fun to Create, Either"](https://starbreaker.org/blog/tech/footnotes-no-fun-to-create-either/index.html). +I have been using the disclosure element for additional comments or information on this website, like in my blog post, ["My Cassette Beasts Fanlisting Application has been Approved"](/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/). 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 borders to the content after being inspired by [Starbreaker](https://starbreaker.org/)'s website, who also has a post about footnotes, ["Footnotes: No Fun to Create, Either"](https://starbreaker.org/blog/tech/footnotes-no-fun-to-create-either/index.html). {% disclosure "More ways to use `
` and `` elements" %} `
` and `` 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: diff --git a/src/articles/myarticles/anti-harry-potter-jk-rowling-masterlist.md b/src/articles/myarticles/anti-harry-potter-jk-rowling-masterlist.md index f931197d..9dfbd239 100644 --- a/src/articles/myarticles/anti-harry-potter-jk-rowling-masterlist.md +++ b/src/articles/myarticles/anti-harry-potter-jk-rowling-masterlist.md @@ -15,7 +15,7 @@ This site is Harry Potter free. Lookin [sic] for it? Leave. Like many Millennials, I grew up with the {% cite "Harry Potter" %} series and was a major fan of the series. I had read the original 7 books and watched their film adaptations. The series was a passion of mine during my early- to mid-teen years. While the {% cite "Harry Potter" %} novels were far from the first books I read, they were the first fantasy novels I read, and the series’ concept of a magical world set in a contemporary setting fascinated teenage me. -However, even during my {% cite "Harry Potter" %} fixation years, there were things from the series that bothered me, from the idea of house elves being a slave race that naturally love being slaves, to Snape’s unconvincing “redemption” arc. As I got older and became more aware of social issues, I started to notice more problems with the series. In addition, reading more books has also made me realise that even on a technical writing level, the {% cite "Harry Potter" %} series was mediocre at best. As a result, I had stopped becoming a {% cite "Harry Potter" %} fan even before J. K. Rowling’s transphobia got mainstream attention. +However, even during my {% cite "Harry Potter" %} fixation years, there were things from the series that bothered me, from the idea of house elves being a slave race that naturally love being slaves, to Snape’s unconvincing “redemption” arc. As I got older and became more aware of social issues, I started to notice more problems with the series. In addition, reading more books has also made me realise that even on a technical writing level, the {% cite "Harry Potter" %} series was mediocre at best. As a result, I had stopped becoming a {% cite "Harry Potter" %} fan even before J. K. Rowling’s anti-trans sentiments got mainstream attention. Unfortunately, many adults with nostalgia goggles still refuse to let go of {% cite "Harry Potter" %}, and they believe {% cite "Harry Potter" %} can be separated or “reclaimed” by J. K. Rowling, despite how much Rowling’s worldview and prejudice are inextricably linked to her writing. diff --git a/src/assets/css/components.css b/src/assets/css/components.css index ac8d34be..915e4114 100644 --- a/src/assets/css/components.css +++ b/src/assets/css/components.css @@ -110,10 +110,8 @@ a.link-btn[href^="http"]:not([href*="leilukin.com"]) { padding-right: calc(var(- .content-disclosure__content p + p { margin-top: 1em; } .content-disclosure__content { - --bdr-disclosure: 0.15em solid var(--clr-title-border); - padding: 1em 0; - border-top: var(--bdr-disclosure); - border-bottom: var(--bdr-disclosure); + padding: 1em; + border: 0.15em solid var(--clr-title-border); } /* Content warning disclosure */