feat: 新增標籤外掛 timeline closed #644

fix: 自建頁面圖片沒有 blur 效果
improvement: 優化 404 頁面 UI
improvement: lazyload 默認佔位圖改為透明圖片
improvement: 優化 lazyload blur 出現特效
improvement: 優化 css

source/css/_page/404.styl

@@ -6,75 +6,64 @@ if hexo-config('error_404.enable')
       right: 0
       left: 0
       margin: 0 auto
-      padding: 0 20px
+      padding: 60px 20px 0
       max-width: 1000px
       transform: translate(0, -50%)
 
       .error-content
         @extend .cardHover
-        display: flex
-        flex-direction: row
-        justify-content: center
-        align-items: center
+        overflow: hidden
         margin: 0 20px
         height: 360px
 
         +maxWidth768()
-          flex-direction: column
           margin: 0
           height: 500px
 
         .error-img
-          flex: 1
+          display: inline-block
+          overflow: hidden
+          width: 50%
           height: 100%
-          border-top-left-radius: 8px
-          border-bottom-left-radius: 8px
-          background-color: $theme-color
-          background-position: center
-          background-size: cover
 
           +maxWidth768()
-            flex: 1
             width: 100%
-            border-top-right-radius: 8px
-            border-bottom-left-radius: 0
+            height: 45%
+
+          img
+            @extend .imgHover
+            background-color: $theme-color
 
         .error-info
-          flex: 1
-          padding: 10px
+          display: inline-flex
+          flex-direction: column
+          justify-content: center
+          align-content: center
+          width: 50%
+          height: 100%
+          vertical-align: top
           text-align: center
-          font-size: 14px
 
           if $site-name-font
             font-family: $site-name-font
 
           +maxWidth768()
-            flex: 1.1
             width: 100%
+            height: 55%
 
           .error_title
-            margin-top: -80px
+            margin-top: -.6em
             font-size: 9em
 
             +maxWidth768()
-              margin-top: -60px
+              font-size: 8em
 
           .error_subtitle
             @extend .limit-more-line
-            margin-top: -70px
+            margin-top: -3em
             word-break: break-word
             font-size: 1.6em
             -webkit-line-clamp: 2
 
-          a
-            display: inline-block
-            margin-top: 10px
-            padding: 6px 30px
-            background: var(--btn-bg)
-            color: var(--btn-color)
-
-            i
-              padding-right: 6px
-
     & + #rightside
       display: none

source/css/_page/archives.styl

@@ -12,7 +12,7 @@
 
     &:hover
       &:before
-        border-color: $pseudo-hover
+        border-color: var(--pseudo-hover)
 
     &:before
       position: absolute
@@ -47,7 +47,7 @@
 
     &:hover
       &:before
-        border-color: $pseudo-hover
+        border-color: var(--pseudo-hover)
 
     &:before
       $w = 6px
@@ -75,7 +75,7 @@
           border-color: $light-blue
 
       &:before
-        border-color: $pseudo-hover
+        border-color: var(--pseudo-hover)
 
     &-time
       color: $theme-meta-color
@@ -102,13 +102,7 @@
       height: 80px
 
       img
-        width: 100%
-        height: 100%
-        transition: all .6s
-        object-fit: cover
-
-        &:hover
-          transform: scale(1.1)
+        @extend .imgHover
 
     &-info
       flex: 1

source/css/_page/categories.styl

@@ -59,4 +59,4 @@
 
         &:hover
           &:before
-            border-color: $pseudo-hover
+            border-color: var(--pseudo-hover)

source/css/_page/flink.styl

@@ -58,7 +58,8 @@
             img
               width: 100%
               height: 100%
-              transition: all .3s
+              object-fit: cover
+              transition: filter 375ms ease-in 0.2s, transform .3s
 
           .img-alt
             display: none

source/css/_page/homepage.styl

@@ -32,10 +32,7 @@
         height: 230px
 
       img.post_bg
-        width: 100%
-        height: 100%
-        transition: all .6s
-        object-fit: cover
+        @extend .imgHover
 
       &.right
         order: 1