feat: Add mask effect of top image & remove blur effect

_config.yml

@@ -46,11 +46,11 @@ header:
     # In site directory (source/uploads): /uploads/avatar.png
     # You can also use a link of image.
     url: 
-  # Blur filter effect of the header background.
-  blur_effect:
+  # Mask effect of the top background image.
+  mask:
     enable: false
-    # Degree of blur.
-    level: 15px
+    # Opacity of mask (value: 0 ~ 1).
+    opacity: 0.5
 
 # Creative Commons 4.0 International License.
 creative_commons:

source/css/_common/header.styl

@@ -18,6 +18,7 @@ if (hexo-config('header.height'))
   background-position: center
   background-size: cover
   flex-direction: column
+  transition: height .5s
 
 $header-nav-color
   .header-nav-menu a,
@@ -108,39 +109,15 @@ $header-nav-item
   &:hover
     cursor: pointer
 
-$site-info-blur-level = convert(
-  hexo-config('header.blur_effect.level') || '0')
-
 .header-info
   display: flex
   text-align: center
   flex: 1
   flex-direction: column
-  
-  // enable blur effect for site info
-  if (hexo-config('header.blur_effect.enable'))
-    z-index: $z-index-1
-    overflow: hidden
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background: inherit
-
-    // blur effect
-    &::before
-      content: ''
-      position: absolute
-      top: 0
-      right: 0
-      bottom: 0
-      left: 0
-      z-index: $z-index-0
-      margin: 0 - $site-info-blur-level * 2
-      background: inherit
-      background-attachment: fixed
-      filter: blur($site-info-blur-level)
+
+  if (hexo-config('header.mask.enable'))
+    background-color: alpha(#000, 
+      hexo-config('header.mask.opacity'))
 
 .header-info-inner
   display: flex
@@ -150,11 +127,13 @@ $site-info-blur-level = convert(
   justify-content: center
 
   .site-info-title
-    font-size: 2.5rem
+    font-size: 4rem
     font-weight: $font-weight-bolder
     color: #f9f9f9
+    transition: font-size .3s
 
   .site-info-subtitle
-    font-size: 2rem
-    font-weight: $font-weight-bold
+    font-size: 1.2rem
+    font-weight: $font-weight-normal
     color: #f9f9f9
+    transition: font-size .3s

source/css/_common/responsive.styl

@@ -14,13 +14,6 @@
   .header-nav-inner
     width: 100%
 
-  .header-info-inner
-    .site-info-title
-      font-size: 2rem
-
-    .site-info-subtitle
-      font-size: 1.75rem
-
   #sidebar
     display: none
 
@@ -53,7 +46,7 @@
     background-attachment: local
 
   #header
-    height: 300px
+    height: 50vh
 
   #header,
   #main
@@ -105,10 +98,10 @@
 
   .header-info-inner
     .site-info-title
-      font-size: 2rem
+      font-size: 3rem
 
     .site-info-subtitle
-      font-size: 1.5rem
+      font-size: 1rem
   
   div.algolia-popup
     left: 0
@@ -127,10 +120,10 @@
 
   .header-info-inner
     .site-info-title
-      font-size: 1.75rem
+      font-size: 2.5rem
 
     .site-info-subtitle
-      font-size: 1.25rem
+      font-size: .8rem
 
   .header-nav-search
     span