From 65dbea9d3b7b9863885dcc020be5e1f21019c0c0 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 2 Jul 2021 19:13:47 +0800
Subject: [PATCH] Prevent image caption shifting

Before the image tag modified by JS, the caption will shift
---
 _sass/addon/commons.scss | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 104ec70..337b1c6 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -364,6 +364,17 @@ footer {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
+  @mixin caption {
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
+    }
+  }
+
   img[data-src] {
     margin: 0.5rem 0;
 
@@ -381,6 +392,8 @@ footer {
       filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
     }
 
+    @include caption;
+
   }
 
   a {
@@ -405,14 +418,7 @@ footer {
     }
 
     &.img-link {
-      + em {
-        display: block;
-        text-align: center;
-        font-style: normal;
-        font-size: 80%;
-        padding: 0;
-        color: #6d6c6c;
-      }
+      @include caption;
     }
 
   } // a