update css

layout/_partial/article.ejs

@@ -1,22 +1,25 @@
 <article id="<%= post.layout %>-<%= post.slug %>" class="post white-box article-type-<%= post.layout %>" itemscope itemprop="blogPost">
     <section class='meta'>
-        <h2 class="title">
-            <a href="<%- url_for(post.path) %>">
-                <% if(post.title){ %>
-                    <%= post.title %>
-                <% } else if (post.date) { %>
-                    <%= date(post.date, 'YYYY-MM-DD dddd') %>
-                <% } %>
-            </a>
-        </h2>
+        <h1 class="title">
+            <% if(post.title){ %>
+                <%= post.title %>
+            <% } else if (post.date) { %>
+                <%= date(post.date, 'YYYY-MM-DD dddd') %>
+            <% } %>
+        </h1>
         <time>
             <%= date(post.date, 'YYYY-MM-DD dddd') %>&nbsp;&nbsp;
             <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;<span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
         </time>
         <%- partial('categories',{post:post}) %>
     </section>
-    <% if(post.toc!==false){ %>
-        <section class="toc-wrapper"><%- toc(post.content, {list_number: false}) %></section>
+    <% if(post.toc!==false && toc(post.content).length > 0){ %>
+        <section class="toc-wrapper">
+            <div class="header"><i class="fa fa-list" aria-hidden="true"></i>&nbsp;&nbsp;目录</div>
+            <div class='content'>
+                <%- toc(post.content, {list_number: true}) %>
+            </div>
+        </section>
     <% } %>
 
     <section class="article typo">

source/less/_archive.less

@@ -14,7 +14,7 @@
                 margin-top: 1em;
             }
             a {
-                color: @text-color;
+                color: @theme-text-main;
                 text-decoration: none;
             }
         }
@@ -28,7 +28,7 @@
                 text-decoration: none;
             }
             time {
-                color: @text-color;
+                color: @theme-text-main;
                 flex: none;
                 font-size: @small-font-size;
                 padding: .5em .5em .5em 3em;
@@ -40,7 +40,7 @@
                 flex: auto;
                 padding: .5em;
                 font-size: @small-font-size;
-                color: fade(@text-color,80%);
+                color: fade(@theme-text-main,80%);
             }
         }
     }

source/less/_article.less

@@ -1,5 +1,5 @@
 .article {
-    color: @text-color;
+    color: fade(@theme-text-main,75%);
     font-size: @base-font-size;
     line-height: @base-line-height;
     word-break: break-all;
@@ -41,12 +41,11 @@
     }
     p {
         // margin: 20px 0px;
-        color: fade(@text-color,75%);
         margin-top: .5em;
         margin-bottom: 1em;
         text-align: justify;
         strong{
-          color: @text-color;
+          color: @theme-text-main;
           padding-left: 2px;
           padding-right: 2px;
         }
@@ -120,7 +119,7 @@
     }
     h3 {
       font-size: @font-size-h3;
-      color: @text-color-darken;
+      color: darken(@theme-text-main, 20%);
     }
     h4 {
       font-weight: bold;
@@ -128,14 +127,14 @@
     }
     h5 {
       font-weight: bold;
-      color: @text-color;
-      // color: fade(@text-color, 60%);
+      color: @theme-text-main;
+      // color: fade(@theme-text-main, 60%);
       font-size: @font-size-h5;
 
     }
     h6 {
 
-      color: fade(@text-color, 75%);
+      color: fade(@theme-text-main, 75%);
       font-size: @font-size-h6;
     }
 
@@ -170,7 +169,7 @@
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         font-family: @code-font-family;
-        color: fade(@text-color, 75%);
+        color: fade(@theme-text-main, 75%);
     }
     code {
         font-family: @code-font-family;

source/less/_base.less

@@ -17,7 +17,7 @@ html {
     font-family: @base-font-family;
     font-size: @base-font-size;
     line-height: 1.5rem;
-    color: @text-color;
+    color: @theme-text-main;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;

source/less/_defines.less

@@ -57,16 +57,18 @@
 @white: #ffffff;
 @dark:  #555555;
 @text-color:       fade(@black, 85%);
-@text-color-darken:       darken(@text-color, 20%);
+
 
 
 // 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 // 网页背景
 @theme-bg-main: #EFEFEF;
-// 导航栏背景
+// @theme-bg-main: #444;
+// 导航栏背景（主题色）
 @theme-bg-header: @xiaowenwen-green;
 // 卡片背景
 @theme-bg-card: #FFF;
+// @theme-bg-card: lighten(@theme-bg-main, 10%);
 // 代码块的背景色
 @theme-bg-code: #EFEFEF;
 // 引用的颜色 和 分类、归档的 hover 时颜色
@@ -79,6 +81,8 @@
 @theme-text-highlight: @material-orange;
 // 在主题色中显示的文本（白或深灰）
 @theme-text-in-header: white;
+@theme-text-main: @text-color;
+// @theme-text-main: white;
 // 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
 

source/less/_footer.less

@@ -2,14 +2,14 @@
     position: relative;
     padding: 40px 10px;
     width: 100%;
-    color: fade(@text-color, 50%);
+    color: fade(@theme-text-main, 50%);
     margin: 0px auto;
     font-size: @small-font-size;
     overflow: hidden;
     text-align: center;
     font-family: @title-font-family;
     .licenses {
-        color: fade(@text-color, 50%);
+        color: fade(@theme-text-main, 50%);
         text-decoration: underline;
     }
     .codename {
@@ -20,7 +20,7 @@
         padding-top: 20px;
     }
     a {
-        color: fade(@text-color, 70%);
+        color: fade(@theme-text-main, 70%);
         .enable-trans();
         &:hover {
             color: @theme-text-highlight;

source/less/_main.less

@@ -98,13 +98,18 @@
         @media(max-width: @on-phone) {
             border-radius: 0;
         }
+        h1{
+            font-weight: normal;
+            font-size: @article-title-size;
+            line-height: @base-line-height;
+            color: @theme-text-main;
+        }
         &:extend(.z-depth-main);
         .enable-trans();
         &:hover {
           &:extend(.z-depth-main-raised);
         }
         &:active {
-          // box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
           box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
         }
         .meta {
@@ -122,7 +127,7 @@
                     display: inline;
                     line-height: @base-line-height;
                     font-weight: normal;
-                    color: @text-color;
+                    color: @theme-text-main;
                     text-decoration: none;
                     font-size: @article-title-size;
                     @media(max-width: @on-phone) {

source/less/_search.less

@@ -261,7 +261,7 @@
           .title {
             display: inline-block;
             max-width: 100%;
-            color: lighten(@text-color, 10%);
+            color: lighten(@theme-text-main, 10%);
             font-size: @base-font-size;
             font-weight: bold;
             padding: 1px;
@@ -278,7 +278,7 @@
             text-overflow: ellipsis;
             font-size: @small-font-size;
             line-height: @base-line-height;
-            color: lighten(@text-color, 30%);
+            color: lighten(@theme-text-main, 30%);
             .enable-trans();
             em {
               // font-weight: bold;

source/less/_toc.less

@@ -13,8 +13,7 @@
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     }
 
-    overflow: auto;
-    max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";
+    max-height: ~"calc(100% - @{header-height} - 4 * @{gap})";
     @media(max-width: @container-width){
         right: 0;
         margin-right:0;
@@ -29,15 +28,32 @@
             transform: translateX(-@side-width - 10px);
         }
     }
+    .header{
+        border-top-left-radius: @border-radius-width;
+        border-top-right-radius: @border-radius-width;
+        @media(max-width: @on-phone) {
+            border-radius: 0;
+        }
+        background-color: fade(@theme-bg-header,90%);
+        color: @theme-text-in-header;
+        font-size: @base-font-size;
+        line-height: 1.8em;
+        padding: 8px @gap;
 
+    }
+    overflow: auto;
+    .content{
+        overflow: auto;
+        padding: @gap/2 0;
+        max-height: ~"calc(100% - @{header-height} + 0.5 * @{gap})";
+    }
     width: @side-width;
     z-index:3;
     &:extend(.z-depth-2);
-    padding: @gap 0;
-    background: white;
+    background: @theme-bg-card;
     a {
         padding-left: 8px;
-        color: fade(@text-color, 60%);
+        color: @theme-text-main;
         font-size: @small-font-size;
         display: inline-block;
         border-left: 2px solid transparent;
@@ -51,18 +67,39 @@
         }
     }
     ol{
+        .toc-item.toc-level-1 {
+            .toc-child a{
+                padding-left: 1*@gap;
+                font-weight: normal;
+            }
+        }
+        .toc-item.toc-level-2 {
+            .toc-child a{
+                padding-left: 2*@gap;
+                font-weight: normal;
+            }
+        }
+        .toc-item.toc-level-3 {
+            .toc-child a{
+                padding-left: 3*@gap;
+                font-weight: normal;
+            }
+        }
+        .toc-item.toc-level-4 {
+            .toc-child a{
+                padding-left: 4*@gap;
+                font-weight: normal;
+            }
+        }
         li{
             a{
-                padding-left: @gap;
+                padding-left: 1*@gap;
+                font-weight: bold;
                 width: 100%;
             }
             list-style: none;
             width: auto;
-            &:extend(.txt-ellipsis);
-        }
-        &.toc-child a{
-            padding-left: 2*@gap;
-            width: 100%;
+            // &:extend(.txt-ellipsis);
         }
     }
     &:empty{

source/less/_widget.less

@@ -43,12 +43,12 @@
         .name{
             flex:auto;
             &:extend(.txt-ellipsis);
-            color: fade(@text-color,70%);
+            color: fade(@theme-text-main,70%);
         }
         .badge{
             flex:none;
             font-size: @small-font-size;
-            color: fade(@text-color, 50%);
+            color: fade(@theme-text-main, 50%);
         }
         &:hover{
             border-left: 4px solid @theme-bg-quote;