perf: optimize header

layout/_partial/header.ejs

@@ -1,6 +1,6 @@
 <header class="header-wrapper">
 
-    <div class="header-content">
+    <div class="header-content<%- (theme.style.first_screen.enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
         <div class="left">
             <a class="logo-title" href="/">
                 <%= theme.base_info.title || config.title || 'Keep theme' %>

source/css/layout/_partial/header.styl

@@ -1,5 +1,7 @@
 $header-progress-height = 2.8px;
 $logo-title-font-size = 2.2rem;
+$pc-search-icon-font-size = 1.5rem;
+$menu-bar-line-height = 2.5px;
 
 .header-wrapper {
   width: 100%;
@@ -23,12 +25,16 @@ $logo-title-font-size = 2.2rem;
     justify-content: space-between;
     align-items: center;
     z-index: $z-index-5;
+    transition();
+
+    &.has-first-screen {
+      max-width: $content-max-width * 1.2;
+    }
 
     +keep-tablet() {
       width: $main-content-width-tablet;
     }
 
-
     +keep-mobile() {
       width: $main-content-width-mobile;
     }
@@ -117,12 +123,8 @@ $logo-title-font-size = 2.2rem;
 
 
             &.search {
-              font-size: 1.5rem;
+              font-size: $pc-search-icon-font-size;
               margin-left: 26px;
-
-              &:hover {
-                color: var(--primary-color);
-              }
             }
           }
 
@@ -156,20 +158,11 @@ $logo-title-font-size = 2.2rem;
           }
         }
 
-        .search {
-
-          &:hover {
-            color: var(--primary-color);
-          }
-
-        }
-
-
         .menu-bar {
 
           .menu-bar-middle {
             width: 18px;
-            height: 2.6px;
+            height: $menu-bar-line-height;
             position: relative;
             background: var(--default-text-color);
             transition();
@@ -180,7 +173,7 @@ $logo-title-font-size = 2.2rem;
               top: -6px;
               left: 0;
               width: 100%;
-              height: 2.6px;
+              height: $menu-bar-line-height;
               background: var(--default-text-color);
               transition();
             }
@@ -191,7 +184,7 @@ $logo-title-font-size = 2.2rem;
               bottom: -6px;
               left: 0;
               width: 100%;
-              height: 2.6px;
+              height: $menu-bar-line-height;
               background: var(--default-text-color);
               transition();
             }
@@ -309,8 +302,8 @@ $logo-title-font-size = 2.2rem;
   .header-content {
 
     .left {
-      transform: scale(0.88);
+      transform: scale(0.86);
-      transform-origin: left top;
+      transform-origin: left;
       transition();
     }
 
@@ -319,7 +312,9 @@ $logo-title-font-size = 2.2rem;
       .pc {
 
         .menu-list {
+
           .menu-item {
+
             a:hover {
               &::after {
                 bottom: -($header-shrink-height / 2 - 12);

source/css/layout/common/variables.styl

@@ -5,7 +5,7 @@
 // ========================================================================
 // layout
 // ========================================================================
-$header-height = 72px;                          // 头部默认高度
+$header-height = 76px;                          // 头部默认高度
 $main-content-width = 80%;                      // 中间内容区域宽度（PC）
 $main-content-width-tablet = 85%;               // 中间内容区域宽度（平板）
 $main-content-width-mobile = 90%;               // 中间内容区域宽度（手机）

source/js/utils.js

@@ -86,13 +86,19 @@ KEEP.utils = {
 
   contentAreaWidthAdjust() {
     const toolExpandDom = document.querySelector('.tool-expand-width');
-    const mainContentDom = document.querySelector('.main-content');
     const headerContentDom = document.querySelector('.header-content');
+    const mainContentDom = document.querySelector('.main-content');
     const iconDom = toolExpandDom.querySelector('i');
 
+    const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px';
+    const expandMaxWidth = '90%';
+    let headerMaxWidth = defaultMaxWidth;
+
     let isExpand = false;
-    const expandWidth = '90%';
+
-    const notExpandWidth = (KEEP.theme_config.style.content_max_width || '1000px');
+    if (KEEP.theme_config.style.first_screen.enable === true) {
+      headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px';
+    }
 
     toolExpandDom.addEventListener('click', () => {
       isExpand = !isExpand;
@@ -100,13 +106,13 @@ KEEP.utils = {
       if (isExpand) {
         iconDom.classList.remove('fa-arrows-alt-h');
         iconDom.classList.add('fa-compress-arrows-alt');
-        mainContentDom.style.maxWidth = expandWidth;
+        headerContentDom.style.maxWidth = expandMaxWidth;
-        headerContentDom.style.maxWidth = expandWidth;
+        mainContentDom.style.maxWidth = expandMaxWidth;
       } else {
         iconDom.classList.remove('fa-compress-arrows-alt');
         iconDom.classList.add('fa-arrows-alt-h');
-        mainContentDom.style.maxWidth = notExpandWidth;
+        headerContentDom.style.maxWidth = headerMaxWidth;
-        headerContentDom.style.maxWidth = notExpandWidth;
+        mainContentDom.style.maxWidth = defaultMaxWidth;
       }
 
     });