menu

layout/_partial/header.ejs

@@ -31,9 +31,9 @@
 			<% } %>
 			<ul class='switcher h-list'>
 				<% if (config.search.enable === true) { %>
-					<li class='s-search'><a href='javascript:void(0)'><i class="fa fa-search fa-fw"></i></span></a></li>
+					<li class='s-search'><a class="fa fa-search fa-fw" href='javascript:void(0)'></span></a></li>
 				<% } %>
-				<li class='s-menu'><a href='javascript:void(0)'><i class="fa fa-navicon fa-fw"></i></a></li>
+				<li class='s-menu'><a class="fa fa-navicon fa-fw" href='javascript:void(0)'></a></li>
 			</ul>
 		</div>
 
@@ -43,9 +43,9 @@
 			</a>
 
 			<ul class='switcher h-list'>
-				<li class='s-comment'><a href='javascript:void(0)'><i class="fa fa-comments fa-fw"></i></a></li>
+				<li class='s-comment'><a class="fa fa-comments fa-fw flat-box" href='javascript:void(0)'></a></li>
-				<li class='s-top'><a href='javascript:void(0)'><i class="fa fa-arrow-up fa-fw"></i></a></li>
+				<li class='s-top'><a class="fa fa-arrow-up fa-fw flat-box" href='javascript:void(0)'></a></li>
-				<li class='s-toc'><a href='javascript:void(0)'><i class="fa fa-list-ul fa-fw"></i></a></li>
+				<li class='s-toc'><a class="fa fa-list-ul fa-fw flat-box" href='javascript:void(0)'></a></li>
 			</ul>
 		</div>
 	</div>

source/less/_defines.less

@@ -141,7 +141,7 @@
 // 卡片背景
 @theme-bg-card: white;
 // 卡片标题栏背景
-@theme-bg-card-header: darken(@theme-base-main, 4%);
+@theme-bg-card-header: @theme-bg-nav-header;
 // 按钮背景
 @theme-bg-button: @theme-base-main;
 // 代码的背景色

source/less/_header.less

@@ -10,12 +10,13 @@
 	overflow: hidden;
 	font-family: @title-font-family;
 	.wrapper{
+        padding: auto @gap;
 		.enable-trans();
 	}
 	.wrapper.sub{
 		transform: translateY(-@header-height);
         .logo{
-            padding-left: 0;
+            // padding-left: 0;
             @media(max-width: @on-phone){
                 padding-left: @gap;
                 padding-right: @gap/2;
@@ -57,16 +58,17 @@
 		ul > li > a{
 			.enable-trans();
 			display: block;
-			font-size: @header-font-size * .95;
+			font-size: @base-font-size * .95;
+            font-weight: bold;
+            &::before{
+                font-weight: lighter;
+            }
 			color: fade(@theme-text-in-header,60%);
 			padding: 0 8px;
 			&:hover,&.active{
 				color: @theme-text-in-header;
 			}
 		}
-		@media(max-width: @on-laptop){
-			font-size: @header-font-size * .95;
-		}
 		@media(max-width: @on-phone){
 			display:none;
 		}
@@ -91,12 +93,29 @@
         line-height: @header-height;
 
 		& > li{
-            border-radius: @header-height;
+            height: @header-height - @gap;
-			margin-left: 8px;
 			.enable-trans();
-
+            margin: 0;
             @media(max-width: @on-phone){
-			margin-left: 4px;
+            width: @header-height - 1.5*@gap;
+            height: @header-height - 1.5*@gap;
+            }
+            a{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: @header-height - @gap;
+                height: @header-height - @gap;
+                border-radius: 100px;
+                .enable-trans();
+                &:hover {
+                    background: darken(@theme-bg-nav-header, 10%);
+                    // color: @theme-bg-quote;
+                }
+                @media(max-width: @on-phone){
+                    width: @header-height - 1.5*@gap;
+                    height: @header-height - 1.5*@gap;
+                }
             }
 		}
 		@media(max-width: @on-phone){