feat: better image style

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

2 files changed, 18 insertions, 21 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index 0cb8bb9e..71a99edb 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -114,18 +114,16 @@ $em-text-color: #889E73;
   img {
     max-width: 100%;
     display: block;
-    margin-right: auto;
-    margin-top: 6px;
+    margin: 1rem auto;
   }
 
   figure {
     margin: 0;
-  }
-
-  figure figcaption h4 {
-    font-size: 0.9rem;
-    color: var(--secondary-text-color);
-    font-weight: 400;
+    figcaption h4 {
+      font-size: 0.9rem;
+      color: var(--secondary-text-color);
+      font-weight: 400;
+    }
   }
 
   ul {
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 {