From 9dcab7ac1f0486cbb9daa72f59b7e018b1f85d01 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 2 Sep 2020 18:25:57 +0800
Subject: [PATCH] Improve the image style.

---
 assets/css/_addon/main.scss   | 20 +++++++++-----------
 assets/css/_addon/module.scss |  8 ++++++++
 assets/css/post.scss          | 10 +---------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index d37cebc..8a09541 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -734,6 +734,10 @@ a {
 
 } // a
 
+img {
+  max-width: 100%;
+}
+
 .post {
   h1 {
     margin-top: 3rem;
@@ -823,20 +827,14 @@ div.post-content .table-wrapper {
   }
   p {
     font-size: 1.08rem;
-  }
-  img {
-    max-width: 100%;
-    margin-top: .5rem;
-    margin-bottom: 1.5rem;
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
+    > img {
+      margin-top: .5rem;
+      margin-bottom: 1.5rem;
+      @include align-center;
+    }
   }
 }
 
-
 .tag:hover {
   @extend %tag-hover;
 }
diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss
index b24bc26..6335ebf 100644
--- a/assets/css/_addon/module.scss
+++ b/assets/css/_addon/module.scss
@@ -98,3 +98,11 @@
   font-weight: $font-weight;
   font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
 }
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 4fa9715..ac5cf3b 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -45,6 +45,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   .post-preview-img {
     margin-top: 0;
     margin-bottom: 2.5rem;
+    @include align-center;
   }
 }
 
@@ -341,19 +342,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  .post img {
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-
   .post-navigation {
     padding-left: 0;
     padding-right: 0;
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
-
 }