Add padding for figure elements in blog posts

This commit is contained in:
Helen Chong 2024-03-07 00:22:45 +08:00
parent a21ea5e32c
commit 0e779e3d12
2 changed files with 10 additions and 5 deletions

View File

@ -158,14 +158,14 @@ a {
color: #ffc000;
}
a:hover {
a:hover {
background-color: #34220b;
}
hr {
border-width: 0.1rem 0 0 0;
border-style: dotted;
border-color: #a3bdc4;
border-color: #a3bdc4;
}
/* The rectangle that has contains everything but the background */
@ -224,6 +224,11 @@ hr {
font-size: 1.75em;
}
/* POST STYLE */
.blog-post__figure--img {
padding: 1rem 0;
}
/* POST DATE STYLE */
.blog-post__date {
font-size: 1.1em;

View File

@ -30,7 +30,7 @@
<h1 class="blog-post__title" id="postTitleH1"></h1>
<h2 class="blog-post__date" id="postDate"></h2>
<figure>
<figure class="blog-post__figure--img">
<img src="https://i.postimg.cc/P5zQQ9dt/thunderbird-2024-03-06-20-45-36-381.png" alt="A partial email message from Nexus Mods about a free lifetime Premium membership reward">
<figcaption>
<p>[Image description: A partial email message from Nexus Mods that reads:</p>
@ -44,14 +44,14 @@
</figcaption>
</figure>
<figure>
<figure class="blog-post__figure--img">
<img src="https://i.postimg.cc/XqCYnKpJ/Screenshot-2024-03-06-at-20-49-26-Nexus-Mods-Home.png" alt="Nexus Mods website notification about a lifetime Premium membership reward">
<figcaption>
[Image description: A notification on the Nexus Mods website that reads, "Your mods reached 30,000 UDLs! Enjoy Lifetime Premium membership on us." End description.]
</figcaption>
</figure>
<figure>
<figure class="blog-post__figure--img">
<img src="https://i.postimg.cc/SjbNRXMG/Screenshot-2024-03-06-at-20-52-27-Nexus-Mods-Users.png" alt="The Membership tab on Nexus Mods account settings showing lifetime Premium membership">
<figcaption>
[Image description: The Membership tab in the Nexus Mods account setting page, showing the current membershiup being "Mod Author Reward: Lifetime Premium", starting from 6th Mar 2024 with no end date. End description.]