style(header): optimize header style in the first screen mode

source/css/common/variables.styl

@@ -105,7 +105,7 @@ $toc-scrollbar-color = alpha($text-color-3, 0.1)
 $copyright-info-color = #cc0033
 $avatar-background-color = $primary-color-dark-1
 $header-transparent-background-1 = alpha($background-color-1, 0.28)
-$header-transparent-background-2 = alpha($background-color-1, 0.58)
+$header-transparent-background-2 = alpha($background-color-1, 0.4)
 
 $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
 
@@ -144,7 +144,7 @@ $dark-copyright-info-color = darken($copyright-info-color, 20%)
 $dark-avatar-background-color = darken($avatar-background-color, 20%)
 
 $dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
-$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.58)
+$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4)
 
 $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
 

source/css/layout/_partial/first-screen.styl

@@ -17,14 +17,14 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
 
   if (!(hexo-config('style.first_screen.header_transparent') == true)) {
     background-position-y $header-height
-  }
 
-  +keep-tablet() {
-    background-position-y $header-height * 0.9
-  }
+    +keep-tablet() {
+      background-position-y $header-height * 0.9
+    }
 
-  +keep-mobile() {
-    background-position-y $header-height * 0.8
+    +keep-mobile() {
+      background-position-y $header-height * 0.8
+    }
   }
 
   .content {

source/css/layout/page.styl

@@ -5,11 +5,6 @@
   height auto
   background var(--background-color-1)
 
-  +keep-tablet() {
-    padding-left 0 !important
-  }
-
-
   .page-main-content {
     position relative
     box-sizing border-box
@@ -18,13 +13,18 @@
     &.is-home {
       .transparent-1 {
         background var(--header-transparent-background-1)
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
       }
 
       .transparent-2 {
         background var(--header-transparent-background-2)
+        backdrop-filter: blur(5px);
+        -webkit-backdrop-filter: blur(5px);
       }
     }
 
+
     .header-shrink & {
       padding-top $header-shrink-height
 
@@ -78,7 +78,6 @@
 
       +keep-tablet() {
         height $header-height * 0.9
-        padding-left 0 !important
       }