update: header 样式 && fix: header收缩因高度不够产生的bug

layout/_partial/header.ejs

@@ -2,15 +2,18 @@
 
     <div class="header-content">
 
-        <a class="logo vertical-center" href="/">
+        <a class="logo-title vertical-center" href="/">
             <%= config.title %>
         </a>
 
         <ul class="menu-list vertical-center">
             <% for (let i in theme.menu) { %>
                 <li class="menu-item">
-                    <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'current' : is_current(theme.menu[i]) ? 'current' : '' %>"
+                    <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
-                       href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a>
+                       href="<%- url_for(theme.menu[i]) %>"
+                    >
+                        <%= __(i.toLowerCase()).toUpperCase() %>
+                    </a>
                 </li>
             <% } %>
             <% if (theme.local_search.enable) { %>

layout/about.ejs

@@ -5,7 +5,7 @@
         </div>
         <div class="about-comments">
             <% if (page.comments) { %>
-                <%- partial('common/valine') %>
+                <%- partial('_partial/valine') %>
             <% } %>
         </div>
     </div>

layout/home-content.ejs

@@ -1,59 +1,25 @@
 <div class="home-content-container">
-    <!-- 左侧边栏-->
-    <div class="left-sidebar">
 
-        <!-- 文章列表 -->
+    <ul class="home-article-list">
-        <!--<ul class="active-list">
-                <% for(let i = 0; i < 8; i++) { %>
-                    <li class="active-item">
-
-                        <h2 class="title">
-                            <a href="/">
-                                这个世界很苦，但你要很甜
-                            </a>
-                        </h2>
-
-                        <p class="summary">
-                            在薄情的世界里深情的活着。 01 昨天，许久没找我聊天的外甥女，突然发个大哭的表情过来说，小姨，我要活不下去了。
-                            我知道在上高二的她，能让她大悲大喜的事情，除了考试成绩还是考...
-                        </p>
-
-                        <div class="meta-info">
-                            <span class="date meta-info-item">
-                                <i class="fa fa-calendar"></i> 2020-03-31 08:55:00
-                            </span>
-                            <span class="tags meta-info-item">
-                                <i class="fa fa-tags"></i>TS
-                            </span>
-                            <span class="views meta-info-item">
-                                <i class="fa fa-eye"></i>1234
-                            </span>
-                        </div>
-
-                    </li>
-                <% } %>
-            </ul>-->
-
-        <div class="home-container">
-            <ul class="article-post-list">
         <% page.posts.forEach(post => { %>
-                    <li class="article-post-item">
+            <li class="home-article-item">
-                        <div class="article-post-title">
+                <div class="home-article-title">
                     <h3>
                         <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
                     </h3>
                 </div>
 
-                        <div class="article-post-content">
+                <div class="home-article-content">
                     <%- truncate(strip_html(post.content), {length: 150}) %>
                 </div>
 
-                        <div class="article-post-meta-info">
+                <div class="home-article-meta-info">
                     <%- partial('_partial/article-meta-info', {articleObject: post, index: true}) %>
                 </div>
             </li>
         <% }) %>
     </ul>
+
     <div class="paginator">
         <% if (page.prev)  { %>
             <a class="prev btn"
@@ -68,36 +34,3 @@
         <% } %>
     </div>
 </div>
-
-    </div>
-
-    <!-- 右侧边栏 -->
-    <div class="right-sidebar">
-
-        <!-- 友情链接  -->
-        <!--<div class="friend-link">
-
-                <div class="friend-link-title">
-                    <span>友情链接</span>
-                    <a class="page-change" href=""><i class="fa fa-refresh"></i> 换一批</a>
-                </div>
-
-                <ul class="friend-link-list">
-                    <% for(let i = 0; i < 5; i++){ %>
-                        <li class="friend-link-item">
-                            <div class="avatar-box">
-                                <%- image_tag(theme.avatar, {class: 'avatar'}) %>
-                            </div>
-                            <a class="go-friend-link" target="_blank" href="">+前往探索</a>
-                            <a class="friend-name" href="">X诗人</a>
-                            <p class="friend-intro">代码如诗，代码如诗</p>
-                        </li>
-                    <% } %>
-                </ul>
-                <div class="view-more">
-                    查看更多
-                </div>
-            </div>-->
-
-    </div>
-</div>

source/css/layout/_partial/header.styl

@@ -1,4 +1,5 @@
 @require "../common/variables.styl"
+@import "../common/root.styl"
 
 .header-wrapper {
   width: 100%;
@@ -23,21 +24,76 @@
       transform: translateY(-50%);
     }
 
-    .logo {
+    .logo-title {
       left: 0;
       font-size: 28px;
       font-weight: bold;
       color: #555;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -12px;
+        left: 0;
+        width: 40px;
+        height: 2px;
+        background: $a-hover-color;
+        transition: all 0.5s ease;
       }
+    }
+
 
     .menu-list {
       right: 0;
 
-      li {
+      .menu-item {
         float: left;
-        margin-left: 20px;
+        position: relative;
-        font-size: 14px;
+        margin-left: 30px;
+
+        &:first-child {
+          margin-left: 0;
         }
+
+        a {
+
+          &:hover {
+
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: -10px;
+              left: 50%;
+              width: 100%;
+              height: 2px;
+              transform: translateX(-50%);
+              background: $a-hover-color;
+              transition: all 0.5s ease;
+            }
+          }
+
+        }
+
+
+        .active {
+          color: #555;
+          font-weight: 700;
+          transition: all 0.5s ease;
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            width: 100%;
+            height: 2px;
+            transform: translateX(-50%);
+            background: $a-hover-color;
+            transition: all 0.5s ease;
+          }
+        }
+      }
+
     }
 
 
@@ -84,7 +140,7 @@
 
 
       .drawer-menu-active {
-        background: #f45a6f;
+        background: $a-hover-color;
         color: white;
       }
 
@@ -141,9 +197,38 @@
   background: #fff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 
+  .header-content {
+
+    .logo-title {
+      &::after {
+        opacity: 0;
+      }
+    }
+
+
+    .menu-list {
+
+      .menu-item {
+        a:hover {
+          &::after {
+            bottom: -22px;
+          }
+        }
+
+        .active::after {
+          bottom: -22px;
+        }
+      }
+
+    }
+  }
+
+
   .header-drawer {
     padding: $header-shrink-height 0 20px 0;
   }
+
+
 }
 
 

source/css/layout/common/basic.styl

@@ -72,7 +72,7 @@ a:hover, a:active {
     position: absolute;
     width: 100%;
     height: 2px;
-    bottom: 0;
+    bottom: -2px;
     left: 0;
     background-color: $article-title-color;
     visibility: hidden;

source/css/layout/home-content.styl

@@ -1,40 +1,16 @@
 @require "common/variables.styl"
 
 .home-content-container {
-  .left-sidebar {
-    float: left;
-    width: 70%;
 
-    /*.active-list {
+  .home-article-list {
 
-      .active-item {
+    .home-article-item {
-        padding-bottom: 30px;
-        margin-top: 10px;
-        border-bottom: 1px solid #eee;
-
-        .meta-info {
-          font-size: 12px;
-
-          .meta-info-item {
-            margin-right: 5px;
-          }
-
-        }
-      }
-
-    }*/
-
-    .home-container {
-
-      .article-post-list {
-
-        .article-post-item {
 
       margin-bottom: 30px;
       padding-bottom: 30px;
       border-bottom: 1px solid $border-color;
 
-          .article-post-title {
+      .home-article-title {
 
         h3 {
           font-weight: 600;
@@ -48,7 +24,7 @@
         }
       }
 
-          .article-post-content {
+      .home-article-content {
         padding: 15px 0;
         line-height: 2em;
       }
@@ -56,6 +32,7 @@
     }
   }
 
+
   .paginator {
 
     padding-bottom: 40px;
@@ -73,93 +50,5 @@
     }
 
   }
-    }
-
 
 }
-
-
-  .right-sidebar {
-    float: right;
-    width: 30%;
-
-    /*.friend-link {
-      text-align: center;
-      border: 1px solid #eeeeee;
-
-      .friend-link-title {
-
-        text-align: left;
-
-        .page-change {
-          float: right;
-          display: inline-block;
-          font-size: 14px;
-          color: #969696;
-        }
-
-      }
-
-
-      .friend-link-list {
-        margin: 0 0 20px;
-        text-align: left;
-        .friend-link-item {
-
-          margin-top: 15px;
-
-          .avatar-box {
-            float: left;
-            width: 48px;
-            height: 48px;
-            margin-right: 10px;
-
-            img.avatar {
-              width: 100%;
-              height: 100%;
-              border-radius: 2px;
-            }
-          }
-
-
-          .go-friend-link {
-            float: right;
-            margin-top: 2px;
-            padding: 0;
-            font-size: 13px;
-            color: #42c02e;
-          }
-
-          .friend-name {
-            padding-top: 2px;
-            margin-right: 60px;
-            font-size: 14px;
-            display: block;
-          }
-
-          p.friend-intro {
-            margin-top: 2px;
-            font-size: 12px;
-            color: #969696;
-          }
-
-
-        }
-
-      }
-
-
-      .view-more {
-        left: 0;
-        width: 100%;
-        font-size: 13px;
-        color: #787878;
-        background-color: #f7f7f7;
-        border: 1px solid #dcdcdc;
-        border-radius: 4px;
-      }
-
-    }
-*/
-  }
-}

source/css/layout/page.styl

@@ -22,6 +22,7 @@
       width: 80%;
       height: 100%;
       position: relative;
+      padding: 20px 0;
     }
 
 

source/css/style.styl

@@ -1,4 +1,3 @@
-//@import "layout/variables.styl"
 @import "libs/font-awesome.min.css"
 @import "layout/common/animated.styl"
 @import "layout/common/basic.styl"

source/js/common.js

@@ -1,19 +1,19 @@
 let isHeaderShrink = false;
-let header = document.querySelector('.header-wrapper');
+const header = document.querySelector('.header-wrapper');
-let pageTemplateContainer = document.querySelector('.page-template');
+const pageTemplateContainer = document.querySelector('.page-template');
-let menuBar = document.querySelector('.menu-bar');
+const menuBar = document.querySelector('.menu-bar');
-let windowMask = document.querySelector('.window-mask');
+const windowMask = document.querySelector('.window-mask');
-
+const headerHeight = header.getBoundingClientRect().height;
-
 
 window.addEventListener('scroll', function (e) {
-    var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
 
-    if (!isHeaderShrink && scrollTop > 10) {
+    const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
+
+    if (!isHeaderShrink && scrollTop > headerHeight) {
         isHeaderShrink = true;
         header.classList.add('header-wrapper-shrink');
         pageTemplateContainer.classList.add('page-top-shrink');
-    } else if (isHeaderShrink && scrollTop <= 10) {
+    } else if (isHeaderShrink && scrollTop <= headerHeight) {
         isHeaderShrink = false;
         header.classList.remove('header-wrapper-shrink');
         pageTemplateContainer.classList.remove('page-top-shrink');