From cb908bbb2bc4d30c52a0ef007232be1119860762 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 7 Oct 2020 12:24:25 +0800
Subject: [PATCH] Added caption sytle for hyperlinked images (#144).

---
 assets/css/_addon/main.scss       | 51 ++++++++++++++++++++-----------
 assets/js/_utils/img-hyperlink.js | 16 ++++++++++
 assets/js/post.min.js             |  2 ++
 3 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 assets/js/_utils/img-hyperlink.js

diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index 2b49de1..5ea6472 100644
--- 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
new file mode 100644
index 0000000..c910af0
--- /dev/null
+++ 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
index 16d4533..c85f452 100644
--- 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 %}