Add styles to image caption (cotes2020#144)

cotes2020 · cotes2020 · commit 7a1a8202c9ae · 2020-10-06T23:13:01.000+08:00
diff --git 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
@@ -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 {
