Added caption sytle for hyperlinked images (cotes2020#144).

cotes2020 · cotes2020 · commit d0d0780efc1d · 2020-10-07T12:24:44.000+08:00
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
@@ -816,30 +816,45 @@ div.post-content .table-wrapper {
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  a {
-    @extend %link-color;
-    @extend %link-underline;
-    &:hover {
-      @extend %link-hover;
-    }
-  }
-  p {
-    font-size: 1.08rem;
+
+  @mixin img {
     > img {
       &:not([style]) {
         margin: .5rem 0;
         @include align-center;
-        + em {
-          display: block;
-          text-align: center;
-          font-style: normal;
-          font-size: 80%;
-          padding: 0;
-          color: #6d6c6c;
-        }
+        @include img-caption;
+      }
+    }
+  }
 
+  @mixin img-caption {
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
+    }
+  }
+
+  a {
+    &:not(.img-hyperlink) {
+      @extend %link-color;
+      @extend %link-underline;
+      &:hover {
+        @extend %link-hover;
       }
     }
+    &.img-hyperlink {
+      @include img;
+      @include img-caption;
+    }
+  }
+
+  p {
+    font-size: 1.08rem;
+    @include img;
   }// p
 }
 
diff --git a/assets/js/_utils/img-hyperlink.js b/assets/js/_utils/img-hyperlink.js
@@ -0,0 +1,16 @@
+/*
+ * Find out the <a> tag contains an image and mark it.
+ *
+ * v2.5.1
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2020 Cotes Chung
+ * MIT Licensed
+ */
+
+$(function() {
+
+  var MARK="img-hyperlink";
+
+  $("a:has(img)").addClass(MARK);
+  
+});
diff --git a/assets/js/post.min.js b/assets/js/post.min.js
@@ -13,3 +13,5 @@ layout: compress
 {% include_relative lib/_bootstrap-toc.min.js %}
 
 {% include_relative _utils/toc-filter.js %}
+
+{% include_relative _utils/img-hyperlink.js %}
