Style figure and figcaption elements

This commit is contained in:
Helen Chong 2024-04-25 20:18:09 +08:00
parent f7fef85d90
commit b905a2d1f4
7 changed files with 62 additions and 16 deletions

View File

@ -380,9 +380,9 @@
<article class="article"> <article class="article">
<figure style="margin: 1rem 0;"> <figure>
<img src="/assets/banners/harry-potter-free-site.png" alt="A banner of an anime girl with a Harry Potter-free message" style="margin: 0 auto;"> <img src="/assets/banners/harry-potter-free-site.png" alt="An anime girl crossing arms with a sidelong look and a Harry Potter-free message">
<figcaption class="center-text" style="font-size: 0.9em;"> <figcaption>
This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave. This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave.
</figcaption> </figcaption>
</figure> </figure>

View File

@ -211,6 +211,19 @@ details:focus {
outline-offset: 0.2em; outline-offset: 0.2em;
} }
figure {
margin-bottom: var(--sz-paragraph-margin);
display: grid;
place-content: center;
justify-items: center;
}
figcaption {
text-align: center;
font-size: 0.9em;
margin-top: 0.2em;
}
code { code {
font-family: monospace; font-family: monospace;
border: 0.07rem solid var(--clr-code-border); border: 0.07rem solid var(--clr-code-border);

View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/> <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/> <link href="https://leilukin.neocities.org"/>
<updated>2024-04-24T17:41:33Z</updated> <updated>2024-04-25T12:16:56Z</updated>
<id>https://leilukin.neocities.org</id> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>
@ -1189,9 +1189,9 @@
<link href="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/"/> <link href="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/"/>
<updated>2023-03-19T00:00:00Z</updated> <updated>2023-03-19T00:00:00Z</updated>
<id>https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/</id> <id>https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/</id>
<content type="html">&lt;figure style=&quot;margin: 1rem 0;&quot;&gt; <content type="html">&lt;figure&gt;
&lt;img src=&quot;https://leilukin.neocities.org/assets/banners/harry-potter-free-site.png&quot; alt=&quot;A banner of an anime girl with a Harry Potter-free message&quot; style=&quot;margin: 0 auto;&quot; /&gt; &lt;img src=&quot;https://leilukin.neocities.org/assets/banners/harry-potter-free-site.png&quot; alt=&quot;An anime girl crossing arms with a sidelong look and a Harry Potter-free message&quot; /&gt;
&lt;figcaption class=&quot;center-text&quot; style=&quot;font-size: 0.9em;&quot;&gt; &lt;figcaption&gt;
This site is Harry Potter free. Lookin [&lt;i&gt;sic&lt;/i&gt;] for it? Leave. This site is Harry Potter free. Lookin [&lt;i&gt;sic&lt;/i&gt;] for it? Leave.
&lt;/figcaption&gt; &lt;/figcaption&gt;
&lt;/figure&gt; &lt;/figure&gt;

View File

@ -434,7 +434,12 @@
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="my-dear-summer-lover">My Dear Summer Lover</h2> <h2 id="my-dear-summer-lover">My Dear Summer Lover</h2>
<a class="heading-anchor" href="#my-dear-summer-lover" aria-labelledby="my-dear-summer-lover"><span hidden>#</span></a></div> <a class="heading-anchor" href="#my-dear-summer-lover" aria-labelledby="my-dear-summer-lover"><span hidden>#</span></a></div>
<p><img src="/assets/projects/playlists/My-Dear-Summer-Lover-cover.png" alt="A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix'"></p> <figure>
<img src="/assets/projects/playlists/My-Dear-Summer-Lover-cover.png" alt="Cover image of A Summer's End fanmix 'My Dear Summer Lover: A Sam x Michelle Fanmix'">
<figcaption>
[Image description: Sam and Michelle from A Summer's End almost kisses, with a play symbol and text on the top left corner, and the text "My Dear Summer Lover: A Sam x Michelle Fanmix" in a digital style font in front.]
</figcaption>
</figure>
<p>A fanmix for the visual novel <cite><a href="https://www.asummersend.com/home">A Summers End — Hong Kong 1986</a></cite>, dedicated to Sam and Michelles love story.</p> <p>A fanmix for the visual novel <cite><a href="https://www.asummersend.com/home">A Summers End — Hong Kong 1986</a></cite>, dedicated to Sam and Michelles love story.</p>
<p>This mix contains mostly Cantonese and English songs, with one Mandarin song. Majority of these songs were performed by Hong Kong artists and released in the 80s, because A Summers End took place in Hong Kong and in the 80s.</p> <p>This mix contains mostly Cantonese and English songs, with one Mandarin song. Majority of these songs were performed by Hong Kong artists and released in the 80s, because A Summers End took place in Hong Kong and in the 80s.</p>
<p>I have carefully selected and arranged these tracks, so the lyrics would reflect Sam and Michelles relationship development throughout A Summers End. Therefore, the content of this mix could be considered spoilers if you have not played the visual novel.</p> <p>I have carefully selected and arranged these tracks, so the lyrics would reflect Sam and Michelles relationship development throughout A Summers End. Therefore, the content of this mix could be considered spoilers if you have not played the visual novel.</p>
@ -444,8 +449,13 @@
<div class="heading-wrapper h2"> <div class="heading-wrapper h2">
<h2 id="mandopop-lgbtq-anthem">Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌</h2> <h2 id="mandopop-lgbtq-anthem">Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌</h2>
<a class="heading-anchor" href="#mandopop-lgbtq-anthem" aria-labelledby="mandopop-lgbtq-anthem"><span hidden>#</span></a></div> <a class="heading-anchor" href="#mandopop-lgbtq-anthem" aria-labelledby="mandopop-lgbtq-anthem"><span hidden>#</span></a></div>
<p><img src="/assets/projects/playlists/Mandopop-LGBTQ+-Anthem-Cover.png" alt="A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top"></p> <figure>
<p>Collection of Mandarin queer anthems.</p> <img src="/assets/projects/playlists/Mandopop-LGBTQ+-Anthem-Cover.png" alt="Cover image of the Mandopop LGBTQ+ Anthem playlist">
<figcaption>
[Image description: A progress pride flag, with Chinese words meaning queer anthem on top.]
</figcaption>
</figure>
<p>A collection of Mandarin queer anthems.</p>
<p>I made this playlist after discovering Wikipedia's list of Chinese queer anthems on <a href="https://zh.wikipedia.org/wiki/%E5%90%8C%E5%BF%97%E5%9C%8B%E6%AD%8C#%E8%8F%AF%E8%AA%9E">its Mandarin article for Gay Anthem (同志國歌)</a>.</p> <p>I made this playlist after discovering Wikipedia's list of Chinese queer anthems on <a href="https://zh.wikipedia.org/wiki/%E5%90%8C%E5%BF%97%E5%9C%8B%E6%AD%8C#%E8%8F%AF%E8%AA%9E">its Mandarin article for Gay Anthem (同志國歌)</a>.</p>
<p><a class="link-btn" href="https://open.spotify.com/playlist/5JXAUPZkmv1cFScAfhOkXh" target="_blank">Listen on Spotify</a></p> <p><a class="link-btn" href="https://open.spotify.com/playlist/5JXAUPZkmv1cFScAfhOkXh" target="_blank">Listen on Spotify</a></p>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5JXAUPZkmv1cFScAfhOkXh?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5JXAUPZkmv1cFScAfhOkXh?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

View File

@ -6,9 +6,9 @@ desc: My masterlist of criticisms of the Harry Potter series and J. K. Rowling.
categories: ["anti harry potter", "anti jk rowling"] categories: ["anti harry potter", "anti jk rowling"]
--- ---
<figure style="margin: 1rem 0;"> <figure>
<img src="/assets/banners/harry-potter-free-site.png" alt="A banner of an anime girl with a Harry Potter-free message" style="margin: 0 auto;"> <img src="/assets/banners/harry-potter-free-site.png" alt="An anime girl crossing arms with a sidelong look and a Harry Potter-free message">
<figcaption class="center-text" style="font-size: 0.9em;"> <figcaption>
This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave. This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave.
</figcaption> </figcaption>
</figure> </figure>

View File

@ -211,6 +211,19 @@ details:focus {
outline-offset: 0.2em; outline-offset: 0.2em;
} }
figure {
margin-bottom: var(--sz-paragraph-margin);
display: grid;
place-content: center;
justify-items: center;
}
figcaption {
text-align: center;
font-size: 0.9em;
margin-top: 0.2em;
}
code { code {
font-family: monospace; font-family: monospace;
border: 0.07rem solid var(--clr-code-border); border: 0.07rem solid var(--clr-code-border);

View File

@ -9,7 +9,12 @@ eleventyNavigation:
## My Dear Summer Lover ## My Dear Summer Lover
![A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix'](/assets/projects/playlists/My-Dear-Summer-Lover-cover.png) <figure>
<img src="/assets/projects/playlists/My-Dear-Summer-Lover-cover.png" alt="Cover image of A Summer's End fanmix 'My Dear Summer Lover: A Sam x Michelle Fanmix'">
<figcaption>
[Image description: Sam and Michelle from A Summer's End almost kisses, with a play symbol and text on the top left corner, and the text "My Dear Summer Lover: A Sam x Michelle Fanmix" in a digital style font in front.]
</figcaption>
</figure>
A fanmix for the visual novel <cite>[A Summers End — Hong Kong 1986](https://www.asummersend.com/home)</cite>, dedicated to Sam and Michelles love story. A fanmix for the visual novel <cite>[A Summers End — Hong Kong 1986](https://www.asummersend.com/home)</cite>, dedicated to Sam and Michelles love story.
@ -25,9 +30,14 @@ Since Oracle and Bone has cited Anita Mui as a major inspiration for them and th
## Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌 ## Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌
![A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top](/assets/projects/playlists/Mandopop-LGBTQ+-Anthem-Cover.png) <figure>
<img src="/assets/projects/playlists/Mandopop-LGBTQ+-Anthem-Cover.png" alt="Cover image of the Mandopop LGBTQ+ Anthem playlist">
<figcaption>
[Image description: A progress pride flag, with Chinese words meaning queer anthem on top.]
</figcaption>
</figure>
Collection of Mandarin queer anthems. A collection of Mandarin queer anthems.
I made this playlist after discovering Wikipedia's list of Chinese queer anthems on [its Mandarin article for Gay Anthem (同志國歌)](https://zh.wikipedia.org/wiki/%E5%90%8C%E5%BF%97%E5%9C%8B%E6%AD%8C#%E8%8F%AF%E8%AA%9E). I made this playlist after discovering Wikipedia's list of Chinese queer anthems on [its Mandarin article for Gay Anthem (同志國歌)](https://zh.wikipedia.org/wiki/%E5%90%8C%E5%BF%97%E5%9C%8B%E6%AD%8C#%E8%8F%AF%E8%AA%9E).