From a6c73e8f4f6c8a436e499ac81bdc9fcc60f5ceb1 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 13 Jan 2022 01:07:47 +0800
Subject: [PATCH] Avoid image caption shifting on load

---
 _sass/addon/commons.scss | 11 ++++-------
 _sass/addon/module.scss  | 11 +++++++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 4796dc2..da27ff1 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -192,6 +192,8 @@ img[data-src] {
   &.shadow {
     filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
   }
+
+  @extend %img-caption;
 }
 
 /* --- Panels --- */
@@ -439,13 +441,8 @@ img[data-src] {
       }
     }
 
-    &.img-link + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
+    &.img-link {
+      @extend %img-caption;
     }
 
   }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 6afbcd4..f7ad4c1 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -93,6 +93,17 @@
   font-style: normal;
 }
 
+%img-caption {
+  + em {
+    display: block;
+    text-align: center;
+    font-style: normal;
+    font-size: 80%;
+    padding: 0;
+    color: #6d6c6c;
+  }
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {