Style figure and figcaption elements

_site/articles/anti-harry-potter-jk-rowling-masterlist/index.html

@@ -380,9 +380,9 @@
 
     
         <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.
     </figcaption>
 </figure>

_site/assets/css/main.css

@@ -211,6 +211,19 @@ details:focus {
     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 {
     font-family: monospace;
     border: 0.07rem solid var(--clr-code-border);

_site/feed.xml

@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <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>
     <author>
         <name>Leilukin</name>
@@ -1189,9 +1189,9 @@
             <link href="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/"/>
             <updated>2023-03-19T00:00:00Z</updated>
             <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.
     &lt;/figcaption&gt;
 &lt;/figure&gt;

_site/projects/playlists/index.html

@@ -434,7 +434,12 @@
 			<div class="heading-wrapper 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>
-<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 Summer’s End — Hong Kong 1986</a></cite>, dedicated to Sam and Michelle’s 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 Summer’s 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 Michelle’s relationship development throughout A Summer’s 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">
 <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>
-<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><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>

src/articles/myarticles/anti-harry-potter-jk-rowling-masterlist.md

@@ -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"]
 ---
 
-<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.
     </figcaption>
 </figure>

src/assets/css/main.css

@@ -211,6 +211,19 @@ details:focus {
     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 {
     font-family: monospace;
     border: 0.07rem solid var(--clr-code-border);

src/projects/playlists.md

@@ -9,7 +9,12 @@ eleventyNavigation:
 
 ## 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 Summer’s End — Hong Kong 1986](https://www.asummersend.com/home)</cite>, dedicated to Sam and Michelle’s 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 華語流行音樂同志國歌
 
-![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).