From 944d0ad7244f7ac881543c7e1818c10e93f620bf Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 6 Oct 2020 20:15:19 +0800
Subject: [PATCH] Add styles to image caption (#144)

---
 _posts/2019-08-08-text-and-typography.md | 15 ++++++++++++++-
 assets/css/_addon/main.scss              | 24 ++++++++++++++----------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 211d517..ebd2a85 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -77,9 +77,22 @@ Fluttering and dancing in the breeze.
 Click the hook will locate the footnote[^footnote].
 
 
-## Image
+## Images
+
+By default, the image is centered and the image caption can be displayed at the bottom:
 
 ![Desktop View](/assets/img/sample/mockup.png)
+_Full screen width and center alignment_
+
+You can change the size of the picture:
+
+![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+_400px image width_
+
+In addition, you can use custom styles to change the image position (do not use caption in this case):
+
+![Desktop View](/assets/img/sample/mockup.png){: width="200" style="float: left; margin: .75rem 1rem 1rem 0"}
+_A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space._
 
 
 ## Inline code
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index 5043bd3..b656335 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -461,11 +461,6 @@ $sidebar-display: "sidebar-display";
 #post-wrapper {
   min-height: calc(100vh - #{$topbar-height}
     - #{$footer-height} - #{$post-extend-min-height})!important;
-  .post-content {
-    a:hover {
-      @extend %link-hover;
-    }
-  }
 }
 
 #topbar-wrapper.row,
@@ -795,7 +790,6 @@ div.post-content .table-wrapper {
 }
 
 
-
 /*--- post ---*/
 
 .pageviews .fa-spinner {
@@ -832,11 +826,21 @@ div.post-content .table-wrapper {
   p {
     font-size: 1.08rem;
     > img {
-      margin-top: .5rem;
-      margin-bottom: 1.5rem;
-      @include align-center;
+      &:not([style]) {
+        margin: .5rem 0;
+        @include align-center;
+        + em {
+          display: block;
+          text-align: center;
+          font-style: normal;
+          font-size: 80%;
+          padding: 0;
+          margin-top: .7rem;
+          color: #6d6c6c;
+        }
+      }
     }
-  }
+  }// p
 }
 
 .tag:hover {