update

layout/_partial/article.ejs

@@ -1,12 +1,10 @@
 <article id="<%= post.layout %>-<%= post.slug %>" class="post white-box article-type-<%= post.layout %>" itemscope itemprop="blogPost">
     <section class='meta'>
-        <h1 class="title">
-            <% if(post.title){ %>
-                <%= post.title %>
-            <% } else if (post.date) { %>
-                <%= date(post.date, config.date_format) %>
-            <% } %>
-        </h1>
+        <% if(post.title){ %>
+            <h1 class="title"><%= post.title %></h1>
+        <% } else if (post.date) { %>
+            <h1 class="title"><%= date(post.date, config.date_format) %></h1>
+        <% } %>
         <time class="time">
             <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
             <%= date(post.date, config.date_format) %>
@@ -25,7 +23,7 @@
 
         <section class='meta'>
             <time class="time" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>">
-                <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
+                <i class="fas fa-pen fa-fw" aria-hidden="true"></i>
                 本文最后更新于：<%- date(post.updated, config.date_format) %>
             </time>
             <% if (post.tags && post.tags.length && post.tags.each) { %>
@@ -35,7 +33,7 @@
                     items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
                 });
                 %>
-                <div class="article-tags tags">
+                <div class="tags">
                     <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
                     <%- items.join(', ') %>
                 </div>

layout/_partial/header.ejs

@@ -1,11 +1,7 @@
 <header class="l_header">
 	<div class='wrapper'>
 		<div class="nav-main container container--flex">
-			<a class="logo flat-box" href='<%= url_for("/") %>' >
-				<!-- <i class="fas fa-home"></i> -->
-				<%- config.title %>
-			</a>
-
+			<a class="logo flat-box" href='<%= url_for("/") %>' ><%- config.title %></a>
 				<div class='menu'>
 					<ul class='h-list'>
             <% if (config.nav_menu) { %>
@@ -41,7 +37,7 @@
 			<a class="logo flat-box"></a>
 			<ul class='switcher h-list'>
 				<li class='s-comment'><a class="fas fa-comments fa-fw flat-box" href='javascript:void(0)'></a></li>
-				<li class='s-top'><a class="fas fa-arrow-up fa-fw flat-box" href='javascript:void(0)'></a></li>
+				<li class='s-top'><a class="fas fa-arrow-circle-up fa-fw flat-box" href='javascript:void(0)'></a></li>
 				<li class='s-toc'><a class="fas fa-list fa-fw flat-box" href='javascript:void(0)'></a></li>
 			</ul>
 		</div>

source/less/_header.less

@@ -15,10 +15,12 @@
         .enable-trans();
     }
     .wrapper.sub{
+        .enable-trans();
         transform: translateY(-@height_navbar);
         .logo{
             // padding-left: 0;
             @media(max-width: @on_phone){
+                .enable-trans();
                 padding-left: @gap;
                 padding-right: 0;
                 font-size: @fontsize_base;
@@ -223,18 +225,17 @@
         line-height: 1.8em;
         padding: 8px @gap+6px;
     }
-    width: @width_sidebar;
     position: fixed;
-    top: @height_navbar + @gap;
+    top: @height_navbar + 2*@gap;
     right: 0;
-    width: @width_sidebar;
+    width: 100% - 0.5*@gap;
     z-index:9999 + 1;
     line-height: 2 * @gap;
     background: white;
     border-right: 0;
     box-shadow: @boxshadow_card_raised;
     border-radius: @border_radius;
-    transform: translate3d(@width_sidebar, -0, 0);
+    transform: translate3d(100%, -0, 0);
     .enable-trans();
     &:hover {
         box-shadow: @boxshadow_card_raised;

source/less/_main.less

@@ -214,10 +214,12 @@
         }
         .meta {
             color: fade(@theme_text_main, 70%);
+            margin-top: 2*@gap;
             margin-bottom: 0.5*@gap;
             font-size: @fontsize_small * .95;
             &:first-child{
-                margin-bottom: 1.5*@gap;
+                margin-top: 0;
+                margin-bottom: 1*@gap;
             }
             .title {
                 left: 0;
@@ -253,15 +255,16 @@
             .browse,
             .tags {
                 font-size: @fontsize_small * .95;
+                line-height: 24px;
                 color: fade(@theme_text_main, 70%);
                 display: inline-block;
                 background: fade(@theme_bg_quote, 10%);
-                margin-right: 4px;
-                margin-bottom: 8px;
+                margin: 0 4px 8px 0px;
                 padding: 2px 8px 2px 6px;
                 border-radius: 0.5*@border_radius_code_block;
                 border-left: 0.5*@border_radius_code_block solid @theme_bg_quote;
                 a{
+                    color: fade(@theme_text_main, 70%);
                     .enable-trans();
                     &:hover {
                         color: @theme_text_highlight;
@@ -272,8 +275,9 @@
                     }
                 }
                 .categories {
-                    font-weight: bold;
-                    color: @theme_text_link;
+                    // font-weight: bold;
+                    color: fade(@theme_text_main, 50%);
+                    // color: @theme_text_link;
                 }
                 .tag{
                     color: fade(@theme_text_main, 70%);