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

View File

@ -30,7 +30,7 @@
<h1 class="blog-post__title" id="postTitleH1"></h1> <h1 class="blog-post__title" id="postTitleH1"></h1>
<h2 class="blog-post__date" id="postDate"></h2> <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"> <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> <figcaption>
<p>[Image description: A partial email message from Nexus Mods that reads:</p> <p>[Image description: A partial email message from Nexus Mods that reads:</p>
@ -44,14 +44,14 @@
</figcaption> </figcaption>
</figure> </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"> <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> <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.] [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> </figcaption>
</figure> </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"> <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> <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.] [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.]