From d813199658ea633e9862529e6f1d03cfdd4cb5f8 Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Mon, 8 Mar 2021 00:20:51 +0800
Subject: [PATCH] fix bugs

---
 _config.yml                               |  2 +-
 scripts/filters/lib/img_lazyload.js       |  2 +-
 scripts/tags/image.js                     | 24 +++++------
 scripts/tags/swiper.js                    |  4 +-
 source/css/_common/blur.styl              | 12 ++++++
 source/css/_layout/md.styl                |  6 ++-
 source/css/_layout/tag-plugins/frame.styl |  2 +-
 source/css/_layout/tag-plugins/image.styl | 50 +++++++++++++----------
 source/css/_plugins/lazyload.styl         |  2 +
 source/css/_plugins/swiper.styl           |  5 +--
 10 files changed, 64 insertions(+), 45 deletions(-)
 create mode 100644 source/css/_common/blur.styl

diff --git a/_config.yml b/_config.yml
index ee217d9..9f30e68 100755
--- a/_config.yml
+++ b/_config.yml
@@ -140,7 +140,7 @@ plugins:
   # https://scrollrevealjs.org/api/reveal.html
   scrollreveal:
     enable: true
-    js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js
+    js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.9/dist/scrollreveal.min.js
     distance: 8px
     duration: 500 # ms
     interval: 100 # ms
diff --git a/scripts/filters/lib/img_lazyload.js b/scripts/filters/lib/img_lazyload.js
index 5788075..b6ead76 100644
--- a/scripts/filters/lib/img_lazyload.js
+++ b/scripts/filters/lib/img_lazyload.js
@@ -35,7 +35,7 @@ function lazyProcess(htmlContent) {
       }
       newClass += 'lazy';
       if (value) {
-        return ori.replace(value, newClass);
+        return ori.replace('class="' + value, 'class="' + newClass);
       } else {
         return ori.replace('class="', 'class="' + newClass);
       }
diff --git a/scripts/tags/image.js b/scripts/tags/image.js
index f168003..2e1234a 100644
--- a/scripts/tags/image.js
+++ b/scripts/tags/image.js
@@ -18,7 +18,7 @@ hexo.extend.tag.register('image', function(args) {
   }
   function img(src, alt, style) {
     let img = '';
-    img += '<img class="img" src="' + src + '"';
+    img += '<img src="' + src + '"';
     if (alt) {
       img += ' alt="' + alt + '"';
     }
@@ -31,9 +31,9 @@ hexo.extend.tag.register('image', function(args) {
 
   var el = '';
   // wrap
-  el += '<div class="tag-plugin img-wrap">';
+  el += '<div class="tag-plugin image">';
   // bg
-  el += '<div class="img-bg"';
+  el += '<div class="image-bg"';
   if (args.bg || args.padding) {
     el += ' style="';
     if (args.bg && args.bg.length > 0) {
@@ -46,20 +46,18 @@ hexo.extend.tag.register('image', function(args) {
   }
   el += '>';
   el += img(args.src, args.alt, style);
+  if (args.download && args.download.length > 0) {
+    let href = args.download;
+    if (args.download == 'true') {
+      href = args.src;
+    }
+    el += '<a class="image-download blur" style="opacity:0" href="' + href + '"><svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734"><path d="M561.00682908 685.55838913a111.03077546 111.03077546 0 0 1-106.8895062 0L256.23182837 487.72885783a55.96309219 55.96309219 0 0 1 79.13181253-79.18777574L450.70357448 523.88101491V181.55477937a55.96309219 55.96309219 0 0 1 111.92618438 0v344.06109173l117.07478902-117.07478901a55.96309219 55.96309219 0 0 1 79.13181252 79.18777574zM282.81429711 797.1487951h447.70473912a55.96309219 55.96309219 0 0 1 0 111.92618438H282.81429711a55.96309219 55.96309219 0 0 1 0-111.92618438z" p-id="3735"></path></svg></a>';
+  }
   el += '</div>';
 
   if (args.alt && args.alt.length > 0) {
     el += '<div class="image-meta">';
-    if (args.download && args.download.length > 0) {
-      el += '<span class="image-caption left">' + args.alt + '</span>';
-      let href = args.download;
-      if (args.download == 'true') {
-        href = args.src;
-      }
-      el += '<a class="image-download" href="' + href + '"><svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734"><path d="M561.00682908 685.55838913a111.03077546 111.03077546 0 0 1-106.8895062 0L256.23182837 487.72885783a55.96309219 55.96309219 0 0 1 79.13181253-79.18777574L450.70357448 523.88101491V181.55477937a55.96309219 55.96309219 0 0 1 111.92618438 0v344.06109173l117.07478902-117.07478901a55.96309219 55.96309219 0 0 1 79.13181252 79.18777574zM282.81429711 797.1487951h447.70473912a55.96309219 55.96309219 0 0 1 0 111.92618438H282.81429711a55.96309219 55.96309219 0 0 1 0-111.92618438z" p-id="3735"></path></svg></a>';
-    } else {
-      el += '<span class="image-caption center">' + args.alt + '</span>';
-    }
+    el += '<span class="image-caption center">' + args.alt + '</span>';
     el += '</div>';
   }
 
diff --git a/scripts/tags/swiper.js b/scripts/tags/swiper.js
index 036697a..cf547f6 100644
--- a/scripts/tags/swiper.js
+++ b/scripts/tags/swiper.js
@@ -31,8 +31,8 @@ hexo.extend.tag.register('swiper', function(args, content) {
   slide();
   el += '</div>';
   el += '<div class="swiper-pagination"></div>';
-  el += '<div class="swiper-button-prev"></div>';
-  el += '<div class="swiper-button-next"></div>';
+  el += '<div class="swiper-button-prev blur"></div>';
+  el += '<div class="swiper-button-next blur"></div>';
   el += '</div>';
   return el;
 }, {ends: true});
diff --git a/source/css/_common/blur.styl b/source/css/_common/blur.styl
new file mode 100644
index 0000000..dda1701
--- /dev/null
+++ b/source/css/_common/blur.styl
@@ -0,0 +1,12 @@
+body[theme='light']
+  --blur-bg: alpha(white, .5)
+body[theme='dark']
+  --blur-bg: alpha(black, .5)
+.blur
+  background: var(--blur-bg)
+  @supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px)))
+    background: var(--blur-bg) !important
+    backdrop-filter: saturate(200%) blur(12px)
+    -webkit-backdrop-filter: saturate(200%) blur(12px)
+  &:hover
+    background: var(--card)
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index c1c08fa..d0691cb 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -18,7 +18,7 @@ article.md.content
     color: var(--text-p0)
   h2,h3,h4,h5,h6
     color: var(--text-p0)
-    padding-top: 1em
+    padding-top: 1rem
     margin-bottom: 1em
     &:hover
       a.headerlink:before
@@ -36,12 +36,14 @@ article.md
     border-bottom: 1px solid var(--block-border)
     font-weight: 400
     &:first-child
-      margin-top: 1rem
+      margin-top: 0
   h3
     margin-top: 3rem
     font-weight: 400
   h4,h5,h6
     font-weight: 500
+  h1+h2
+    margin-top: 0
   h2+h3
     margin-top: 0
   h3+h4
diff --git a/source/css/_layout/tag-plugins/frame.styl b/source/css/_layout/tag-plugins/frame.styl
index 6cbfc19..23138f1 100644
--- a/source/css/_layout/tag-plugins/frame.styl
+++ b/source/css/_layout/tag-plugins/frame.styl
@@ -16,7 +16,7 @@
   background-repeat: no-repeat;
   overflow: hidden;
 
-.md .img-wrap .frame-wrap
+.md .tag-plugin.img-wrap .frame-wrap
   &[focus]
     height: auto
 
diff --git a/source/css/_layout/tag-plugins/image.styl b/source/css/_layout/tag-plugins/image.styl
index cfcf5f3..075c4df 100644
--- a/source/css/_layout/tag-plugins/image.styl
+++ b/source/css/_layout/tag-plugins/image.styl
@@ -1,35 +1,43 @@
-.img-wrap
+.tag-plugin.image
   margin-top: 1rem
   margin-bottom: 1rem
-  .img-bg
+  .image-bg
     line-height: 0
     text-align: center
     border-radius: 4px
-  img
-    display: inline-block
-    object-fit: contain
+    position: relative
+    overflow: hidden
+    &:hover
+      .image-download
+        opacity: 1 !important
+    img
+      display: inline-block
+      object-fit: contain
+    .image-download
+      position: absolute
+      bottom: 8px
+      right: 8px
+      font-size: 1.125rem
+      padding: 6px
+      line-height: 0
+      border-radius: 4px
+      trans3: color opacity background
+      color: var(--text-p1)
+      &:hover
+        background: var(--card) !important
+        color: $color-hover
   .image-meta
     display: flex
-    justify-content: space-between
-    align-items: flex-start
-    padding-top: 0.5rem
+    justify-content: center
+    padding: 0.5rem 0
     .image-caption
       display: inline-block
       font-size: $fs-12
       line-height: 1.4
       color: var(--text-p3)
-      flex-grow: 1
       &:empty
         display: none
-      &.left
-        text-align: left
-      &.center
-        text-align: center
-    .image-download
-      margin-left: 4px
-      padding: 4px
-      line-height: 0
-      border-radius: 4px
-      trans2: color background
-      &:hover
-        background: var(--hover-block)
+      // &.left
+      //   text-align: left
+      // &.center
+      //   text-align: center
diff --git a/source/css/_plugins/lazyload.styl b/source/css/_plugins/lazyload.styl
index 44c31f1..6427588 100644
--- a/source/css/_plugins/lazyload.styl
+++ b/source/css/_plugins/lazyload.styl
@@ -10,8 +10,10 @@ if hexo-config('plugins.lazyload.transition') == 'blur'
     trans-cover filter
     &:not(.loaded)
       filter blur(8px)
+      -webkit-filter blur(8px)
     &.loaded,&.error
       filter none
+      -webkit-filter none
   .group-body .site-card .card-link>img
     trans-site filter
   .group-body .user-card .card-link>img
diff --git a/source/css/_plugins/swiper.styl b/source/css/_plugins/swiper.styl
index 47305df..dbca383 100644
--- a/source/css/_plugins/swiper.styl
+++ b/source/css/_plugins/swiper.styl
@@ -37,12 +37,9 @@ div.swiper-slide
   background: alpha(white, 0.25)
   trans1 background
   --swiper-theme-color: black !important
-  @supports (backdrop-filter: blur(20px))
-    background: alpha(white, 0.5)
-    backdrop-filter: saturate(200%) blur(20px)
   &:after
     font-size: 1.2rem !important
     font-weight: 700 !important
   &:hover
-    background: white
+    background: white !important
     --swiper-theme-color: $color-hover !important