Add borders to all four sides to disclosure contents

This commit is contained in:
Helen Chong 2025-01-06 09:39:04 +08:00
parent 1cf6abaa60
commit 890ef635cd
3 changed files with 4 additions and 6 deletions

View File

@ -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 `<details>` tag, with a [`<summary>`](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 `<details>` and `<summary>` elements" %}
`<details>` and `<summary>` 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:

View File

@ -15,7 +15,7 @@ This site is Harry Potter free. Lookin [<i>sic</i>] 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 Snapes 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. Rowlings 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 Snapes 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. Rowlings 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 Rowlings worldview and prejudice are inextricably linked to her writing.

View File

@ -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 */