feat: better image style

- centered image
- rounded image
- hide redundant `<p>` tag unexpectedly rendered in `{{< gallery >}}`
- prettier SCSS code

1 files changed, 12 insertions, 13 deletions

diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
index 92ed9fbf..f61295ed 100644
--- a/assets/css/components/_shortcodes.scss
+++ b/assets/css/components/_shortcodes.scss
@@ -138,21 +138,20 @@ a.blog-link img {
   scroll-behavior: smooth;
   gap: 1rem;
   white-space: nowrap;
+  & > figure {
+    display: inline-block;
+    margin: 0;
+    flex-shrink: 0;
+    img {
+      height: 20rem;
+      object-fit: cover;
+      display: block;
+      border-radius: 4px;
+    }
+  }
+  & > p { display: none }
 }
 
-.inline-image > figure {
-  display: inline-block;
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.inline-image > figure img {
-  height: 20rem;
-  object-fit: cover;
-  display: block;
-}
-
-
 /* gallery */
 
 .gallery-img {