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 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 %}