From 5f0e8d62b8a52f8174c58e670dd3524941ddf990 Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Wed, 19 Dec 2018 00:56:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/_partial/article.ejs | 20 ++++++----------
 layout/_partial/post.ejs    |  2 +-
 source/less/_article.less   | 15 +++++++-----
 source/less/_base.less      | 10 ++++----
 source/less/_color.less     | 15 +++++++-----
 source/less/_footer.less    |  4 ++--
 source/less/_header.less    |  6 ++---
 source/less/_main.less      | 47 ++++++++++++++++++++++++++++---------
 source/less/_normalize.less |  2 +-
 source/less/_toc.less       |  8 +++----
 source/less/_widget.less    | 10 ++++----
 11 files changed, 82 insertions(+), 57 deletions(-)

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index 8469a83..dceb364 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -42,20 +42,16 @@
 
         <section class='meta' id="footer-meta">
             <time class="time" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>">
-                <i class="fas fa-pen fa-fw" aria-hidden="true"></i>
-                本文最后更新于：<%- date(post.updated, config.date_format) %>
+                <i class="fas fa-pen fa-fw" aria-hidden="true"></i>&nbsp;本文最后更新于：<%- date(post.updated, config.date_format) %>
             </time>
             <% if (post.tags && post.tags.length && post.tags.each) { %>
                 <%
                 var items = [];
                 post.tags.each(function(item){
-                    items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
+                    items.push('<div class="tags"><a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>&nbsp;' + item.name + '</a></div>');
                 });
                 %>
-                <div class="tags">
-                    <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
-                    <%- items.join(', ') %>
-                </div>
+                <%- items.join(' ') %>
             <% } %>
         </section>
 
@@ -78,12 +74,11 @@
                                 <%
                                 var items = [];
                                 post.prev.tags.each(function(item){
-                                    items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
+                                    items.push('<a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>' + item.name + '</a>');
                                 });
                                 %>
                                 <h6 class="tags">
-                                    <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
-                                    <%- items.join(', ') %>
+                                    <%- items.join(' ') %>
                                 </h6>
                             <% } %>
                         </span>
@@ -106,12 +101,11 @@
                                 <%
                                 var items = [];
                                 post.next.tags.each(function(item){
-                                    items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
+                                    items.push('<a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>' + item.name + '</a>');
                                 });
                                 %>
                                 <h6 class="tags">
-                                    <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
-                                    <%- items.join(', ') %>
+                                    <%- items.join(' ') %>
                                 </h6>
                             <% } %>
                         </span>
diff --git a/layout/_partial/post.ejs b/layout/_partial/post.ejs
index 2a133f1..95f36f0 100755
--- a/layout/_partial/post.ejs
+++ b/layout/_partial/post.ejs
@@ -37,7 +37,7 @@
         <% if (post.tags && post.tags.length) { %>
             <div class="full-width auto-padding tags">
                 <% post.tags.each(function(item){ %>
-                    <a href="<%- url_for(item.path) %>"><i class="fas fa-tag fa-fw"></i>&nbsp;<%=item.name %></a>
+                    <a href="<%- url_for(item.path) %>"><i class="fas fa-hashtag fa-fw"></i><%=item.name %></a>
                 <%})%>
             </div>
         <% } %>
diff --git a/source/less/_article.less b/source/less/_article.less
index 9642738..f0392f0 100755
--- a/source/less/_article.less
+++ b/source/less/_article.less
@@ -207,16 +207,16 @@
             vertical-align: middle;
             line-height: 2rem;
             font-weight: bold;
-            background-color: @color_bg_quote;
+            background-color: @theme_main;
             padding: .2em 2.4em;
             color: white;
             border-radius: @border_radius/2;
             .enable-trans();
             &:hover {
-              background: darken(@color_bg_quote, 10%);
+              background: darken(@theme_main, 10%);
             }
             &:active {
-              // background: darken(@color_bg_quote, 20%);
+              // background: darken(@theme_main, 20%);
             }
         }
 
@@ -233,9 +233,9 @@
             // padding-top: 2*@gap;
             // background: transparent;
         }
-        word-spacing: @gap;
+        word-spacing: @gap/2;
         a {
-          color: @color_text_main;
+            color: @color_text_main;
             position: relative;
             display: inline-block;
             word-spacing: 0;
@@ -247,6 +247,7 @@
             &:hover {
                 color: @color_text_highlight;
                 background: transparent;
+                text-decoration: none;
             }
             &::before {
                 // content: "#";
@@ -309,13 +310,15 @@
             .enable-trans();
             // border: 1px solid transparent;
             // &:hover{
-            //     border: 1px solid fade(@color_bg_quote, 30%);
+            //     border: 1px solid fade(@theme_main, 30%);
             // }
             .tags{
                 background: transparent;
                 padding: 0;
                 margin-top: @gap/2;
                 margin-bottom: 0;
+                font-size: @fontsize_small * 0.9;
+                word-spacing: 4px;
             }
             &:first-child{
                 margin-left: 0;
diff --git a/source/less/_base.less b/source/less/_base.less
index 1d5cbe0..1a4415b 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -101,11 +101,11 @@ body {
 }
 
 ::-moz-selection {
-    background: fade(lighten(@color_text_link, 5%), 25%);
+    background: @color_bg_selection;
 }
 
 ::selection {
-    background: fade(lighten(@color_text_link, 5%), 25%);
+    background: @color_bg_selection;
 }
 // transition
 .enable-trans(@time: 0.25s){
@@ -262,12 +262,12 @@ li {
         border-radius: @border_radius_code_block;
         .enable-trans();
         &:hover {
-            background: fade(@color_bg_quote, 10%);
-            border-left: @border_radius_line solid @color_bg_quote;
+            background: fade(@theme_main, 10%);
+            border-left: @border_radius_line solid @theme_main;
             padding: 8px;
         }
         &:active {
-            border-left: max(@border_radius, @border_radius_line) solid @color_bg_quote;
+            border-left: max(@border_radius, @border_radius_line) solid @theme_main;
         }
 
     }
diff --git a/source/less/_color.less b/source/less/_color.less
index 14b5bbc..4739f13 100755
--- a/source/less/_color.less
+++ b/source/less/_color.less
@@ -6,8 +6,7 @@
 // 卡片背景颜色
 @theme_cardbg: white;         // 暗色主题示例：#555;
 
-// 正文文字颜色
-@color_text_main: @dark;     // 暗色主题示例：white;
+
 
 
 
@@ -17,11 +16,13 @@
 // 导航栏背景，默认和主题色保持一致
 @color_bg_navbar: @theme_main;
 // 代码的背景色
-@color_bg_code: fade(@color_ax_blue, 10%);
+@color_bg_code: fade(@color_md_blue, 10%);
 // 代码块的背景色
-@color_bg_code_block: fade(@color_ax_blue, 10%);
-// 引用的颜色以及分类、归档的 hover 时颜色
-@color_bg_quote: @theme_main;
+@color_bg_code_block: fade(@color_md_blue, 10%);
+// 引用的颜色
+@color_bg_quote: @color_mac_maximize;
+// 选中部分文字的背景颜色
+@color_bg_selection: fade(@color_md_blue, 20%);
 
 // 文字颜色 ----------------
 // 标题文字颜色（h1/h2）
@@ -32,3 +33,5 @@
 @color_text_highlight: @theme_main;
 // 在主题色中显示的文本（一般为白或深灰）
 @color_text_in_header: white;
+// 正文文字颜色
+@color_text_main: @dark;     // 暗色主题示例：white;
diff --git a/source/less/_footer.less b/source/less/_footer.less
index 561c862..f06508c 100755
--- a/source/less/_footer.less
+++ b/source/less/_footer.less
@@ -39,8 +39,8 @@
             margin: 4px;
             border-radius: 100px;
             &:hover {
-                background: fade(@color_bg_quote, 10%);
-                color: @color_bg_quote;
+                background: fade(@theme_main, 10%);
+                color: @theme_main;
             }
         }
     }
diff --git a/source/less/_header.less b/source/less/_header.less
index 7d3adae..e5d6bb7 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -309,11 +309,11 @@
             padding: 2px 20px;
             border-left: 2px solid transparent;
             &:hover{
-                border-left: 4px solid @color_bg_quote;
-                background: fade(@color_bg_quote, 10%);
+                border-left: 4px solid @theme_main;
+                background: fade(@theme_main, 10%);
             }
             &.active{
-              border-left: 4px solid @color_bg_quote;
+              border-left: 4px solid @theme_main;
             }
         }
     }
diff --git a/source/less/_main.less b/source/less/_main.less
index 494e5a6..8bc5d8f 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -28,11 +28,24 @@
             .vwrap{
                 border-radius: @border_radius;
                 border-style: dashed;
+
                 .enable-trans();
                 &:hover{
-                    border: 1px dashed fade(@color_bg_quote, 100%);
+                    border: 1px dashed fade(@theme_main, 100%);
+                }
+                .vheader{
+                  .vinput{
+                    &:hover{
+                      border-bottom: 1px dashed @theme_main;
+                    }
+                    &:focus{
+                      border-bottom: 1px solid @theme_main;
+                    }
+                  }
                 }
+
                 .vedit .vctrl span {
+                    color: @theme_main;
                     padding: 0;
                     margin: 10px;
                 }
@@ -42,15 +55,15 @@
                 padding-left: 2.4em;
                 padding-right: 2.4em;
                 font-weight: bold;
-                background-color: @color_bg_quote;
+                background-color: @theme_main;
                 color: white;
                 border-radius: @border_radius/2;
                 .enable-trans();
                 &:hover {
-                  background: darken(@color_bg_quote, 10%);
+                  background: darken(@theme_main, 10%);
                 }
                 &:active {
-                  // background: lighten(@color_bg_quote, 20%);
+                  // background: lighten(@theme_main, 20%);
                 }
             }
             blockquote{
@@ -105,7 +118,8 @@
             }
             .vmeta{
                 .vat{
-                    color: @color_text_link;
+                  font-weight: bold;
+                    color: @theme_main;
                     .enable-trans();
                     &:hover {
                         color: @color_text_highlight;
@@ -266,21 +280,30 @@
             .cats,
             .browse,
             .tags {
+                .enable-trans();
                 font-size: @fontsize_small * .95;
                 line-height: 24px;
                 color: fade(@color_text_main, 70%);
                 display: inline-block;
-                background: fade(@color_bg_quote, 10%);
-                margin: 0 4px 8px 0px;
-                padding: 2px 8px 2px 6px;
+                background: @theme_background;
+                margin: 4px 4px 4px 0px;
+                padding: 4px 8px 2px 6px;
                 border-radius: 0.5*@border_radius_code_block;
-                border-left: 0.5*@border_radius_code_block solid @color_bg_quote;
+                border-left: 30px solid @theme_main;
+                padding-left: 2px;
+                &:hover {
+                  background: fade(@theme_main, 20%);
+                }
+                i{
+                  width: 30px;
+                  color: @color_text_in_header;
+                  margin-left: -30px;
+                }
                 a{
                     color: fade(@color_text_main, 70%);
                     .enable-trans();
                     &:hover {
                         color: @color_text_highlight;
-                        text-decoration: underline;
                     }
                     &:active {
                         color: darken(@color_text_highlight, 25%);
@@ -303,7 +326,6 @@
                     .enable-trans();
                     &:hover {
                         color: @color_text_highlight;
-                        text-decoration: underline;
                     }
                     &:active {
                         color: darken(@color_text_highlight, 25%);
@@ -352,6 +374,9 @@
         p{
             margin: @gap;
         }
+        a{
+            color: fade(@color_text_link, 90%);
+        }
         section{
             color: fade(@color_text_main, 80%);
             padding: @gap;
diff --git a/source/less/_normalize.less b/source/less/_normalize.less
index bb9f6be..06d723d 100755
--- a/source/less/_normalize.less
+++ b/source/less/_normalize.less
@@ -429,7 +429,7 @@ table {
   }
   tr {
       // border-bottom: 2px solid #eee;
-      // background-color: @color_bg_quote;
+      // background-color: @theme_main;
   }
   &>thead>th {
       // border-bottom-width: 2px;
diff --git a/source/less/_toc.less b/source/less/_toc.less
index 8643840..8849c2b 100755
--- a/source/less/_toc.less
+++ b/source/less/_toc.less
@@ -22,15 +22,15 @@
             border-left: 4px solid transparent;
             &:hover{
                 color: fade(@color_text_main, 100%);
-                border-left: 4px solid @color_bg_quote;
+                border-left: 4px solid @theme_main;
             }
             &:active{
-                border-left: 8px solid @color_bg_quote;
+                border-left: 8px solid @theme_main;
             }
             &.active{
                 color: fade(@color_text_main, 100%);
-                border-left: 4px solid @color_bg_quote;
-                background: fade(@color_bg_quote, 10%);
+                border-left: 4px solid @theme_main;
+                background: fade(@theme_main, 10%);
             }
         }
     }
diff --git a/source/less/_widget.less b/source/less/_widget.less
index aa671e0..6ece276 100755
--- a/source/less/_widget.less
+++ b/source/less/_widget.less
@@ -83,11 +83,11 @@
                color: fade(@color_text_main, 50%);
            }
            &:hover{
-               border-left: 4px solid @color_bg_quote;
-               background: fade(@color_bg_quote, 10%);
+               border-left: 4px solid @theme_main;
+               background: fade(@theme_main, 10%);
            }
            &:active{
-               border-left: 8px solid @color_bg_quote;
+               border-left: 8px solid @theme_main;
            }
        }
     }
@@ -155,8 +155,8 @@
                 margin: 4px;
                 border-radius: 100px;
                 &:hover {
-                    background: fade(@color_bg_quote, 10%);
-                    color: @color_bg_quote;
+                    background: fade(@theme_main, 10%);
+                    color: @theme_main;
                 }
             }
         }