From a741e802545dd3f640785fb5c62ffa1fde121b5e Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Fri, 18 Jan 2019 10:19:29 +0800
Subject: [PATCH] update

---
 source/less/_archive.less   |  86 ++--
 source/less/_article.less   | 646 +++++++++++++-------------
 source/less/_base.less      | 378 ++++++++--------
 source/less/_footer.less    |  84 ++--
 source/less/_header.less    | 592 ++++++++++++------------
 source/less/_main.less      | 874 ++++++++++++++++++------------------
 source/less/_normalize.less |  10 +-
 source/less/_side.less      |  24 +-
 source/less/_toc.less       | 196 ++++----
 source/less/_widget.less    |  50 +--
 10 files changed, 1470 insertions(+), 1470 deletions(-)

diff --git a/source/less/_archive.less b/source/less/_archive.less
index 89c5870..8e4efda 100755
--- a/source/less/_archive.less
+++ b/source/less/_archive.less
@@ -1,47 +1,47 @@
 #archive-page {
-    margin-bottom: @gap * 2;
-    .archive {
-        position: relative;
-        .archive-year {
-            font-size: @fontsize_base;
-            margin-top: 4em;
-            margin-bottom: 1em;
-            &:first-child{
-                margin-top: 0em;
-                padding-top: 0;
-            }
-            h2 {
-                margin-top: 1em;
-            }
-            a {
-                color: @color_text_main;
-                text-decoration: none;
-            }
-        }
-        .archive-post {
-            a {
-                width: 100%;
-                display: inline-flex;
-                flex-flow: row nowrap;
-                justify-content: flex-start;
-                align-items: flex-start;
-                text-decoration: none;
-            }
-            time {
-                color: @color_text_main;
-                flex: none;
-                font-size: @fontsize_small;
-                padding: .5em .5em .5em 3em;
-                @media (max-width: @on_phone) {
-                  padding: .5em .5em .5em 0;
-                }
-            }
-            .title {
-                flex: auto;
-                padding: .5em;
-                font-size: @fontsize_small;
-                color: fade(@color_text_main,80%);
-            }
+  margin-bottom: @gap * 2;
+  .archive {
+    position: relative;
+    .archive-year {
+      font-size: @fontsize_base;
+      margin-top: 4em;
+      margin-bottom: 1em;
+      &:first-child{
+        margin-top: 0em;
+        padding-top: 0;
+      }
+      h2 {
+        margin-top: 1em;
+      }
+      a {
+        color: @color_text_main;
+        text-decoration: none;
+      }
+    }
+    .archive-post {
+      a {
+        width: 100%;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        text-decoration: none;
+      }
+      time {
+        color: @color_text_main;
+        flex: none;
+        font-size: @fontsize_small;
+        padding: .5em .5em .5em 3em;
+        @media (max-width: @on_phone) {
+          padding: .5em .5em .5em 0;
         }
+      }
+      .title {
+        flex: auto;
+        padding: .5em;
+        font-size: @fontsize_small;
+        color: fade(@color_text_main,80%);
+      }
     }
+  }
 }
diff --git a/source/less/_article.less b/source/less/_article.less
index 95378e7..af94c06 100755
--- a/source/less/_article.less
+++ b/source/less/_article.less
@@ -1,358 +1,358 @@
 .article {
-    color: @color_text_main;
-    font-size: @fontsize_base;
-    line-height: @lineheight_base;
-    word-break: break-all;
-    word-wrap: break-word;
+  color: @color_text_main;
+  font-size: @fontsize_base;
+  line-height: @lineheight_base;
+  word-break: break-all;
+  word-wrap: break-word;
+  img {
+    position: relative;
+    margin: 0 auto;
+    background: white;
+    .enable-trans();
+    @media (max-width: @on_phone) {
+      box-shadow: none;
+    }
+  }
+  span{
     img {
-        position: relative;
-        margin: 0 auto;
-        background: white;
-        .enable-trans();
-        @media (max-width: @on_phone) {
-            box-shadow: none;
-        }
+      display: inline;
+      margin: auto;
     }
-    span{
-        img {
-            display: inline;
-            margin: auto;
-        }
+  }
+  hr {
+    border: 0;
+    border-radius: 1px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+  }
+  p.small-img,
+  div.small-img {
+    img {
+      width: auto;
+      max-width: 100%;
+      margin: 0;
+      box-shadow: none;
+    }
+  }
+  p {
+    // margin: 20px 0px;
+    margin-top: .5em;
+    margin-bottom: 1em;
+    text-align: justify;
+    strong{
+      color: @color_text_main;
+      padding-left: 2px;
+      padding-right: 2px;
     }
-    hr {
-        border: 0;
-        border-radius: 1px;
-        border-bottom: 1px solid rgba(0,0,0,0.1);
-    }
-    p.small-img,
-    div.small-img {
-        img {
-            width: auto;
-            max-width: 100%;
-            margin: 0;
-            box-shadow: none;
-        }
+    max-width: 100%;
+    overflow: auto;
+    .mjx-math{
+      font-family: @fontfamily_code;
+      background: fade(@theme_background, 50%);
+      padding: @gap/2;
+      border-radius: @border_radius_code_block;
     }
-    p {
-        // margin: 20px 0px;
-        margin-top: .5em;
-        margin-bottom: 1em;
-        text-align: justify;
-        strong{
-          color: @color_text_main;
-          padding-left: 2px;
-          padding-right: 2px;
-        }
-        max-width: 100%;
-        overflow: auto;
-        .mjx-math{
-          font-family: @fontfamily_code;
-          background: fade(@theme_background, 50%);
-          padding: @gap/2;
-          border-radius: @border_radius_code_block;
-        }
+  }
+  ul,
+  ol {
+    font-size: @fontsize_base * .95;
+    list-style: initial;
+    padding-left: 10px;
+    margin-left: 10px;
+    margin-bottom: 1em;
+  }
+  ul {
+    & > li{
+      list-style: initial;
     }
-    ul,
-    ol {
-        font-size: @fontsize_base * .95;
-        list-style: initial;
-        padding-left: 10px;
-        margin-left: 10px;
-        margin-bottom: 1em;
-    }
-    ul {
-      & > li{
-        list-style: initial;
-      }
+  }
+  ol {
+    & > li{
+      margin-left: 10px;
+      list-style: decimal;
     }
-    ol {
-      & > li{
-        margin-left: 10px;
-        list-style: decimal;
+  }
+  a {
+    &:before{
+      display: none;
+    }
+    color: @color_text_link;
+    .enable-trans();
+    &:hover {
+      color: @color_text_highlight;
+      text-decoration: underline;
+    }
+    &:active {
+      color: darken(@color_text_highlight, 25%);
+    }
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    font-family: @fontfamily_base;
+    font-weight: normal;
+    margin-top: 1.5em;
+    margin-bottom: 1em;
+    &.title {
+      left: 0;
+      &:before {
+        content: none;
       }
     }
-    a {
-        &:before{
-            display: none;
-        }
-        color: @color_text_link;
-        .enable-trans();
-        &:hover {
-            color: @color_text_highlight;
-            text-decoration: underline;
-        }
-        &:active {
-            color: darken(@color_text_highlight, 25%);
-        }
+  }
+  h1, h2 {
+    color: @color_text_header;
+    margin-top: 2em;
+  }
+  h3, h4, h5, h6 {
+    &:first-child{
+      margin-top: 0;
+      padding-top: 0;
     }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
+  }
+  h1 {
+    font-size: @fontsize_h1;
+  }
+  h2 {
+    font-size: @fontsize_h2;
+  }
+  h3 {
+    font-size: @fontsize_h3;
+    color: darken(@color_text_main, 20%);
+  }
+  h4 {
+    font-weight: bold;
+    font-size: @fontsize_h4;
+  }
+  h5 {
+    font-weight: bold;
+    color: @color_text_main;
+    font-size: @fontsize_h5;
+
+  }
+  h6 {
+    color: fade(@color_text_main, 75%);
+    font-size: @fontsize_h6;
+  }
+  .subtitle{
     h6 {
-        position: relative;
-        font-family: @fontfamily_base;
-        font-weight: normal;
-        margin-top: 1.5em;
-        margin-bottom: 1em;
-        &.title {
-            left: 0;
-            &:before {
-                content: none;
-            }
-        }
-    }
-    h1, h2 {
-      color: @color_text_header;
-      margin-top: 2em;
+      color: fade(@color_text_main, 90%);
     }
-    h3, h4, h5, h6 {
-        &:first-child{
-            margin-top: 0;
-            padding-top: 0;
-        }
+  }
+  figure {
+    figcaption {
+      span {
+        display: inline-block;
+        margin-right: 5px;
+      }
     }
-    h1 {
-      font-size: @fontsize_h1;
+  }
+  blockquote {
+    p{
+      text-align: left;
+      word-wrap: normal;
+      margin: 0;
+      font-size: @fontsize_small;
+      line-height: @fontsize_small * 1.5;
     }
-    h2 {
-      font-size: @fontsize_h2;
+    position: relative;
+    width: 100%;
+    font-size: @fontsize_small;
+    background: fade(@color_bg_quote, 10%);
+    margin: 1em 0;
+    padding: @gap;
+    border-left: @border_radius_code_block solid @color_bg_quote;
+    border-radius: @border_radius_code_block;
+    .enable-trans();
+    footer {
+      strong {
+        margin-right: 7px;
+      }
     }
-    h3 {
-      font-size: @fontsize_h3;
-      color: darken(@color_text_main, 20%);
+    &.pullquote{
+      &.right{
+        border-left: none;
+        border-right: @border_radius_code_block solid @color_bg_quote;
+        p{
+          text-align: right;
+        }
+      }
     }
-    h4 {
+  }
+
+  pre {
+    display: block;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    font-family: @fontfamily_code;
+    color: @color_text_main;
+  }
+  code {
+    font-family: @fontfamily_code;
+    padding: 3px 3px 0px 3px;
+    margin: 0px 2px;
+    vertical-align: center;
+    border-radius: 2px;
+    border: 1px solid fade(@color_bg_code, 50%);
+    font-size: @fontsize_base * .8;
+    background: @color_bg_code;
+    @media(max-width: @on_phone){
+      font-size: @fontsize_base * .8 * .95;
+    }
+  }
+  .readmore {
+    // display: none; // howtodesign?
+    font-family: @fontfamily_base;
+    font-size: .8em;
+    letter-spacing: .1em;
+    margin-top: @gap;
+    a {
+      text-decoration: none;
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 2rem;
       font-weight: bold;
-      font-size: @fontsize_h4;
+      background-color: @theme_main;
+      padding: .2em 2.4em;
+      color: white;
+      border-radius: @border_radius/2;
+      .enable-trans();
+      &:hover {
+        background: darken(@theme_main, 10%);
+      }
+      &:active {
+        // background: darken(@theme_main, 20%);
+      }
     }
-    h5 {
-      font-weight: bold;
-      color: @color_text_main;
-      font-size: @fontsize_h5;
 
+  }
+  .tags {
+    position: relative;
+    padding-top: @gap/2;
+    padding-bottom: @gap/2;
+    font-size: @fontsize_small;
+    line-height: @lineheight_base;
+    margin-top: @gap;
+    background: darken(fade(@theme_background, 50%), 5%);
+    &.article-tags {
+      // padding-top: 2*@gap;
+      // background: transparent;
     }
-    h6 {
-      color: fade(@color_text_main, 75%);
-      font-size: @fontsize_h6;
-    }
-    .subtitle{
-      h6 {
-        color: fade(@color_text_main, 90%);
+    word-spacing: @gap/2;
+    a {
+      color: @color_text_main;
+      position: relative;
+      display: inline-block;
+      word-spacing: 0;
+      // letter-spacing: .1em;
+      // &+a{
+      //   margin-left: @gap/2;
+      // }
+      .enable-trans();
+      &:hover {
+        color: @color_text_highlight;
+        background: transparent;
+        text-decoration: none;
+      }
+      &::before {
+          // content: "#";
       }
     }
-    figure {
-        figcaption {
-            span {
-                display: inline-block;
-                margin-right: 5px;
-            }
-        }
+  }
+
+  table:not('.highlight table') {
+    width: 100%;
+
+    td,
+    th {
+      padding: 12px 24px;
     }
-    blockquote {
-        p{
-            text-align: left;
-            word-wrap: normal;
-            margin: 0;
-            font-size: @fontsize_small;
-            line-height: @fontsize_small * 1.5;
-        }
-        position: relative;
-        width: 100%;
-        font-size: @fontsize_small;
-        background: fade(@color_bg_quote, 10%);
-        margin: 1em 0;
-        padding: @gap;
-        border-left: @border_radius_code_block solid @color_bg_quote;
-        border-radius: @border_radius_code_block;
-        .enable-trans();
-        footer {
-            strong {
-                margin-right: 7px;
-            }
-        }
-        &.pullquote{
-          &.right{
-            border-left: none;
-            border-right: @border_radius_code_block solid @color_bg_quote;
-            p{
-              text-align: right;
-            }
-          }
-        }
+    tr {
+      // border-bottom: 1px solid #ddd;
     }
-
-    pre {
-        display: block;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        font-family: @fontfamily_code;
-        color: @color_text_main;
-    }
-    code {
-        font-family: @fontfamily_code;
-        padding: 3px 3px 0px 3px;
-        margin: 0px 2px;
-        vertical-align: center;
-        border-radius: 2px;
-        border: 1px solid fade(@color_bg_code, 50%);
-        font-size: @fontsize_base * .8;
-        background: @color_bg_code;
-        @media(max-width: @on_phone){
-          font-size: @fontsize_base * .8 * .95;
-        }
+    &>thead>th {
+      // border-bottom-width: 2px;
     }
-    .readmore {
-        // display: none; // howtodesign?
-        font-family: @fontfamily_base;
-        font-size: .8em;
-        letter-spacing: .1em;
-        margin-top: @gap;
-        a {
-            text-decoration: none;
-            display: inline-block;
-            vertical-align: middle;
-            line-height: 2rem;
-            font-weight: bold;
-            background-color: @theme_main;
-            padding: .2em 2.4em;
-            color: white;
-            border-radius: @border_radius/2;
-            .enable-trans();
-            &:hover {
-              background: darken(@theme_main, 10%);
-            }
-            &:active {
-              // background: darken(@theme_main, 20%);
-            }
-        }
-
+  }
+  @media (max-width: @on_phone) {
+    ul,
+    ol {
+      font-size: @fontsize_base * .95;
     }
-    .tags {
-        position: relative;
-        padding-top: @gap/2;
-        padding-bottom: @gap/2;
-        font-size: @fontsize_small;
+    figure {
+      font-size: 13px;
+      line-height: 1.6em;
+    }
+  }
+  .prev-next{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-content: flex-start;
+    section{
+      width: 100%;
+      padding: @gap/2;
+      color: fade(@color_text_main, 70%);
+      background-color: fade(@theme_background, 50%);
+      border-radius: @border_radius;
+      p{
+        font-size: @fontsize_base;
         line-height: @lineheight_base;
-        margin-top: @gap;
-        background: darken(fade(@theme_background, 50%), 5%);
-        &.article-tags {
-            // padding-top: 2*@gap;
-            // background: transparent;
-        }
-        word-spacing: @gap/2;
-        a {
-            color: @color_text_main;
-            position: relative;
-            display: inline-block;
-            word-spacing: 0;
-            // letter-spacing: .1em;
-            // &+a{
-            //   margin-left: @gap/2;
-            // }
-            .enable-trans();
-            &:hover {
-                color: @color_text_highlight;
-                background: transparent;
-                text-decoration: none;
-            }
-            &::before {
-                // content: "#";
-            }
+        margin: 0;
+      }
+      h4{
+        margin-top: @gap/2;
+        margin-bottom: @gap/2;
+        position: relative;
+        font-family: @fontfamily_base;
+        font-weight: bold;
+        font-size: @fontsize_h5;
+        @media(max-width:@on_phone) {
+          letter-spacing: -1px;
         }
-    }
 
-    table:not('.highlight table') {
-        width: 100%;
-
-        td,
-        th {
-            padding: 12px 24px;
-        }
-        tr {
-            // border-bottom: 1px solid #ddd;
-        }
-        &>thead>th {
-            // border-bottom-width: 2px;
-        }
+      }
+      h6{
+        margin: 0;
+        word-spacing: normal;
+      }
+      .enable-trans();
+      // border: 1px solid transparent;
+      // &:hover{
+      //     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;
+        margin-right: 0;
+      }
     }
-    @media (max-width: @on_phone) {
-        ul,
-        ol {
-            font-size: @fontsize_base * .95;
-        }
-        figure {
-            font-size: 13px;
-            line-height: 1.6em;
-        }
+    .prev{
+      text-align: left;
+      margin-left: 0;
+      margin-right: @gap/2;
+      border-top-right-radius: @border_radius;
+      border-bottom-right-radius: @border_radius;
     }
-    .prev-next{
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-content: flex-start;
-        section{
-            width: 100%;
-            padding: @gap/2;
-            color: fade(@color_text_main, 70%);
-            background-color: fade(@theme_background, 50%);
-            border-radius: @border_radius;
-            p{
-                font-size: @fontsize_base;
-                line-height: @lineheight_base;
-                margin: 0;
-            }
-            h4{
-                margin-top: @gap/2;
-                margin-bottom: @gap/2;
-                position: relative;
-                font-family: @fontfamily_base;
-                font-weight: bold;
-                font-size: @fontsize_h5;
-                @media(max-width:@on_phone) {
-                    letter-spacing: -1px;
-                }
-
-            }
-            h6{
-                margin: 0;
-                word-spacing: normal;
-            }
-            .enable-trans();
-            // border: 1px solid transparent;
-            // &:hover{
-            //     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;
-                margin-right: 0;
-            }
-        }
-        .prev{
-            text-align: left;
-            margin-left: 0;
-            margin-right: @gap/2;
-            border-top-right-radius: @border_radius;
-            border-bottom-right-radius: @border_radius;
-        }
-        .next{
-            text-align: right;
-            margin-left: @gap/2;
-            margin-right: 0;
-            border-top-left-radius: @border_radius;
-            border-bottom-left-radius: @border_radius;
-        }
-
+    .next{
+      text-align: right;
+      margin-left: @gap/2;
+      margin-right: 0;
+      border-top-left-radius: @border_radius;
+      border-bottom-left-radius: @border_radius;
     }
+
+  }
 }
 
 
diff --git a/source/less/_base.less b/source/less/_base.less
index de56061..f838d35 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -1,111 +1,111 @@
 /* Basic Settings */
 
 * {
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  padding: 0;
 }
 
 
 /* My Base */
 
 html {
-    color: @color_text_main;
-    width: 100%;
-    height: 100%;
-    padding-top: @height_navbar;
-    font-family: @fontfamily_base;
-    font-size: @fontsize_base;
-    line-height: 1.5rem;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-    text-rendering: optimizelegibility;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  color: @color_text_main;
+  width: 100%;
+  height: 100%;
+  padding-top: @height_navbar;
+  font-family: @fontfamily_base;
+  font-size: @fontsize_base;
+  line-height: 1.5rem;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-rendering: optimizelegibility;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 body {
-    background-color: @theme_background;
-    &.modal-active {
-        overflow: hidden;
-        @media (max-width: @on_modal_threshold) {
-            position: fixed;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-        }
+  background-color: @theme_background;
+  &.modal-active {
+    overflow: hidden;
+    @media (max-width: @on_modal_threshold) {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
     }
-    &.z_menu-open {
-        .menu-phone {
-            transform: translate3d(-@gap, 0, 0);
-        }
+  }
+  &.z_menu-open {
+    .menu-phone {
+      transform: translate3d(-@gap, 0, 0);
     }
+  }
 }
 
 
 .z-depth-nav {
-    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
 }
 .z-depth-nav-raised {
-    box-shadow: @boxshadow_card_raised;
+  box-shadow: @boxshadow_card_raised;
 }
 
 .z-depth-main {
-    box-shadow: @boxshadow_card_normal;
+  box-shadow: @boxshadow_card_normal;
 }
 
 .z-depth-main-raised {
-    box-shadow: @boxshadow_card_raised;
+  box-shadow: @boxshadow_card_raised;
 }
 
 .z-depth-0 {
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
 }
 
 .z-depth-1 {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
 }
 
 .z-depth-1-half {
-    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2);
 }
 
 .z-depth-2 {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .z-depth-3 {
-    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1);
 }
 
 .z-depth-4 {
-    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11);
+  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11);
 }
 
 .z-depth-5 {
-    box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11);
+  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11);
 }
 .z-depth-0 {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 .hoverable {
-    .enable-trans();
-    box-shadow: 0;
+  .enable-trans();
+  box-shadow: 0;
 }
 
 .hoverable:hover {
-    .enable-trans();
-    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  .enable-trans();
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 ::-moz-selection {
-    background: @color_bg_selection;
+  background: @color_bg_selection;
 }
 
 ::selection {
-    background: @color_bg_selection;
+  background: @color_bg_selection;
 }
 // transition
 .enable-trans(@time: 0.25s){
@@ -129,159 +129,159 @@ h3,
 h4,
 h5,
 h6 {
-    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    text-rendering: geometricPrecision;
-    margin: 0 0 0.4em 0;
+  -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
+  -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
+  -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
+  text-rendering: geometricPrecision;
+  margin: 0 0 0.4em 0;
 }
 
 h1 {
-    font-size: @fontsize_h1;
+  font-size: @fontsize_h1;
 }
 
 h2 {
-    font-size: @fontsize_h2;
+  font-size: @fontsize_h2;
 }
 
 h3 {
-    font-size: @fontsize_h3;
+  font-size: @fontsize_h3;
 }
 
 h4 {
-    font-size: @fontsize_h4;
+  font-size: @fontsize_h4;
 }
 
 h5 {
-    font-size: @fontsize_h5;
+  font-size: @fontsize_h5;
 }
 
 h6 {
-    font-size: @fontsize_h6;
+  font-size: @fontsize_h6;
 }
 
 a {
-    color: @black;
-    cursor: pointer;
+  color: @black;
+  cursor: pointer;
+  text-decoration: none;
+  .enable-trans();
+  &:hover {
     text-decoration: none;
-    .enable-trans();
-    &:hover {
-        text-decoration: none;
-    }
+  }
 }
 
 pre {
-    tab-size: 4;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    -webkit-tab-size: 4;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  -webkit-tab-size: 4;
 }
 
 img {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 
 /**
- *  Util
- */
+*  Util
+*/
 
 .clearfix {
-    zoom: 1;
-    &:before,
-    &:after {
-        content: " "; // 1
-        display: table; // 2
-    }
-    &:after {
-        clear: both;
-    }
+  zoom: 1;
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
 }
 .container.clearfix{
-    display: flex;
-    @media(max-width: @on_pad) {
-        display: inherit;
-    }
+  display: flex;
+  @media(max-width: @on_pad) {
+    display: inherit;
+  }
 }
 .hidden {
-    text-indent: -9999px;
-    visibility: hidden;
-    display: none;
+  text-indent: -9999px;
+  visibility: hidden;
+  display: none;
 }
 
 .inner {
-    position: relative;
-    width: 80%;
-    max-width: 710px;
-    margin: 0 auto;
+  position: relative;
+  width: 80%;
+  max-width: 710px;
+  margin: 0 auto;
 }
 
 .vertical {
-    display: table-cell;
-    vertical-align: middle;
+  display: table-cell;
+  vertical-align: middle;
 }
 
 .right {
-    float: right;
+  float: right;
 }
 
 .left {
-    float: left;
+  float: left;
 }
 
 .disable-trans {
-    -moz-transition: none !important;
-    -webkit-transition: none !important;
-    transition: none !important;
+  -moz-transition: none !important;
+  -webkit-transition: none !important;
+  transition: none !important;
 }
 
 .txt-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 ul,
 ol {
-    padding-left: 0;
+  padding-left: 0;
 }
 
 li {
-    list-style: none;
+  list-style: none;
 }
 
 .mark {
-    position: relative;
-    a {
-        color: @black;
-        background: transparent;
-        display: inline-block;
-        padding: 0 8px;
-        border-left: @border_radius_line solid transparent;
-        background: transparent;
-        border-radius: @border_radius_code_block;
-        .enable-trans();
-        &:hover {
-            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 @theme_main;
-        }
-
+  position: relative;
+  a {
+    color: @black;
+    background: transparent;
+    display: inline-block;
+    padding: 0 8px;
+    border-left: @border_radius_line solid transparent;
+    background: transparent;
+    border-radius: @border_radius_code_block;
+    .enable-trans();
+    &:hover {
+      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 @theme_main;
+    }
+
+  }
 }
 
 ul.h-list {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  &>li {
+    // flex: none;
     height: 100%;
-    &>li {
-        // flex: none;
-        height: 100%;
-        justify-content: center;
-    }
+    justify-content: center;
+  }
 }
 
 
@@ -290,87 +290,87 @@ ul.h-list {
  */
 
 #loading-bar-wrapper {
-    position: fixed;
-    top: @height_navbar - @loading_height;
-    // top: 0;
-    left: 0;
-    width: 100%;
-    // overflow: scroll;
-    z-index: 99999;
+  position: fixed;
+  top: @height_navbar - @loading_height;
+  // top: 0;
+  left: 0;
+  width: 100%;
+  // overflow: scroll;
+  z-index: 99999;
 }
 
 #loading-bar {
-    position: fixed;
-    width: 0;
-    height: @loading_height;
-    // height: @height_navbar;
-    .enable-trans();
-    background-color: fade(white, 50%);
-    &.pure{
-      background-color: fade(@theme_main, 50%);
-    }
+  position: fixed;
+  width: 0;
+  height: @loading_height;
+  // height: @height_navbar;
+  .enable-trans();
+  background-color: fade(white, 50%);
+  &.pure{
+    background-color: fade(@theme_main, 50%);
+  }
 }
 
 .container {
-    position: relative;
-    width: 100%;
-    max-width: @width_container;
-    margin: 0 auto;
+  position: relative;
+  width: 100%;
+  max-width: @width_container;
+  margin: 0 auto;
 }
 
 .container--flex {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .l_body {
-    position: relative;
-    padding: 2*@gap @gap @gap;
-    @media(max-width: @on_phone) {
-        padding: @gap 0 @gap;
-        border-radius: 0;
+  position: relative;
+  padding: 2*@gap @gap @gap;
+  @media(max-width: @on_phone) {
+    padding: @gap 0 @gap;
+    border-radius: 0;
+  }
+  .s-top{
+    .enable-trans(0.6s);
+    z-index: 9;
+    position: fixed;
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    border-radius: 100%;
+    bottom: @gap*2;
+    right: @gap*2;
+    transform: translateY(100px) scale(0);
+    transform-origin: bottom;
+    color: @color_text_main;
+    @media(max-width: @on_pad) {
+      right: @gap;
     }
-    .s-top{
-      .enable-trans(0.6s);
-      z-index: 9;
-      position: fixed;
-      width: 48px;
-      height: 48px;
-      line-height: 48px;
-      border-radius: 100%;
-      bottom: @gap*2;
-      right: @gap*2;
-      transform: translateY(100px) scale(0);
-      transform-origin: bottom;
-      color: @color_text_main;
-      @media(max-width: @on_pad) {
-          right: @gap;
+    &.show{
+      transform: translateY(0) scale(1);
+      &.hl{
+        background: @theme_main;
+        color: white;
+        box-shadow: @boxshadow_card_normal;
       }
-      &.show{
-        transform: translateY(0) scale(1);
+    }
+    @media(min-width: @on_pad) {
+      &:hover{
+        transform: scale(1.2);
+        border-radius: 25%;
+        background: @theme_main;
+        color: white;
+        box-shadow: @boxshadow_card_raised;
         &.hl{
-          background: @theme_main;
-          color: white;
-          box-shadow: @boxshadow_card_normal;
-        }
-      }
-      @media(min-width: @on_pad) {
-        &:hover{
-          transform: scale(1.2);
-          border-radius: 25%;
-          background: @theme_main;
-          color: white;
           box-shadow: @boxshadow_card_raised;
-          &.hl{
-            box-shadow: @boxshadow_card_raised;
-          }
         }
       }
     }
+  }
 }
 
 .reveal {
-    // visibility: hidden;
+  // visibility: hidden;
 }
diff --git a/source/less/_footer.less b/source/less/_footer.less
index f06508c..a5691d7 100755
--- a/source/less/_footer.less
+++ b/source/less/_footer.less
@@ -1,47 +1,47 @@
 #footer {
-    position: relative;
-    padding: 40px 10px 120px 10px;
-    width: 100%;
+  position: relative;
+  padding: 40px 10px 120px 10px;
+  width: 100%;
+  color: fade(@color_text_main, 50%);
+  margin: 0px auto;
+  font-size: @fontsize_small;
+  overflow: hidden;
+  text-align: center;
+  font-family: @fontfamily_base;
+  .licenses {
     color: fade(@color_text_main, 50%);
-    margin: 0px auto;
-    font-size: @fontsize_small;
-    overflow: hidden;
-    text-align: center;
-    font-family: @fontfamily_base;
-    .licenses {
-        color: fade(@color_text_main, 50%);
-        text-decoration: underline;
+    text-decoration: underline;
+  }
+  .codename {
+    // color: @color_vue;
+    text-decoration: underline;
+  }
+  .social-wrapper {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  a {
+    color: fade(@color_text_main, 70%);
+    .enable-trans();
+    &:hover {
+      color: @color_text_highlight;
     }
-    .codename {
-        // color: @color_vue;
-        text-decoration: underline;
-    }
-    .social-wrapper {
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-    a {
-        color: fade(@color_text_main, 70%);
-        .enable-trans();
-        &:hover {
-            color: @color_text_highlight;
-        }
-        &.social {
-            position: relative;
-            display: inline-block;
-            text-align: center;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 32px;
-            height: 32px;
-            margin: 4px;
-            border-radius: 100px;
-            &:hover {
-                background: fade(@theme_main, 10%);
-                color: @theme_main;
-            }
-        }
+    &.social {
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 32px;
+      height: 32px;
+      margin: 4px;
+      border-radius: 100px;
+      &:hover {
+        background: fade(@theme_main, 10%);
+        color: @theme_main;
+      }
     }
+  }
 }
diff --git a/source/less/_header.less b/source/less/_header.less
index 848158d..25fdeb7 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -1,336 +1,336 @@
 .l_header {
-    position:fixed;
-    z-index: 9999;
-    top:0;
-    left:0;
-    width:100%;
-    font-size: @fontsize_base;
-    line-height: @height_navbar;
+  position:fixed;
+  z-index: 9999;
+  top:0;
+  left:0;
+  width:100%;
+  font-size: @fontsize_base;
+  line-height: @height_navbar;
+  height: @height_navbar;
+  overflow: hidden;
+  font-family: @fontfamily_base;
+  font-weight: bold;
+  padding: 0 @gap;
+  .wrapper{
+    padding: auto @gap;
+    .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;
+      }
+    }
+  }
+  .nav--main,.nav-sub{
     height: @height_navbar;
-    overflow: hidden;
-    font-family: @fontfamily_base;
-    font-weight: bold;
+  }
+  background: @color_bg_navbar;
+
+  &, a{
+    .txt-ellipsis;
+    height: @height_navbar;
+    line-height: @height_navbar;
+    color: @color_text_in_header;
+  }
+  &:extend(.z-depth-nav); // 适合深色导航栏背景
+
+  .enable-trans();
+  &:hover {
+    // &:extend(.z-depth-nav-raised);
+  }
+  &:active {
+
+  }
+  .logo {
     padding: 0 @gap;
-    .wrapper{
-        padding: auto @gap;
-        .enable-trans();
+    line-height: @height_navbar;
+    font-size: @fontsize_logo;
+    font-family: @fontfamily_logo;
+    @media(max-width: @on_phone){
+      flex: auto;
     }
-    .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;
-            }
-        }
+    &.img{
+      padding: 0 @gap 0 0;
     }
-    .nav--main,.nav-sub{
-        height: @height_navbar;
+    img{
+      padding: 0;
+      height: 100%;
     }
-    background: @color_bg_navbar;
+    letter-spacing: 0;
+  }
 
-    &, a{
-        .txt-ellipsis;
-        height: @height_navbar;
-        line-height: @height_navbar;
-        color: @color_text_in_header;
-    }
-    &:extend(.z-depth-nav); // 适合深色导航栏背景
+  .nav-sub{
+    .logo {
+      font-size: @fontsize_base;
+      font-family: @fontfamily_base;
+      @media(max-width: @on_phone){
+        letter-spacing: -0.5px;
+        padding-top: 1px;
+      }
 
+    }
+  }
+  .menu{
+    position:relative;
+    flex: 1 0 auto;
+    height: @height_navbar;
     .enable-trans();
-    &:hover {
-        // &:extend(.z-depth-nav-raised);
+    margin:0 @gap;
+    ul > li > a{
+      .enable-trans();
+      display: block;
+      font-size: @fontsize_base;
+      color: fade(@color_text_in_header, 70%);
+      padding: 0 8px;
+      &:hover{
+        color: @color_text_in_header;
+        border-bottom: @loading_height solid @theme_cardbg;
+        background: fade(@theme_cardbg, 10%);
+      }
+      &:active,&.active{
+        color: @color_text_in_header;
+        border-bottom: @loading_height solid @theme_cardbg;
+      }
     }
-    &:active {
-
+    @media(max-width: @on_phone){
+      display:none;
     }
-    .logo {
-        padding: 0 @gap;
-        line-height: @height_navbar;
-        font-size: @fontsize_logo;
-        font-family: @fontfamily_logo;
-        @media(max-width: @on_phone){
-            flex: auto;
-        }
-        &.img{
-          padding: 0 @gap 0 0;
+  }
+  .switcher{
+    display: none;
+    font-size: @fontsize_base;
+    line-height: @height_navbar;
+
+    & > li{
+      height: @height_navbar - @gap;
+      .enable-trans();
+      margin: 2px;
+      @height: @height_navbar - @gap;
+      @media(max-width: @on_phone){
+        width: @height;
+        height: @height;
+      }
+      a{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: @height;
+        height: @height;
+        border-radius: 100px;
+        .enable-trans();
+        &:hover {
+          background: fade(@theme_cardbg, 30%);
         }
-        img{
-          padding: 0;
-          height: 100%;
+        @media(max-width: @on_phone){
+          width: @height;
+          height: @height;
         }
-        letter-spacing: 0;
+      }
     }
-
-    .nav-sub{
-        .logo {
-            font-size: @fontsize_base;
-            font-family: @fontfamily_base;
-            @media(max-width: @on_phone){
-                letter-spacing: -0.5px;
-                padding-top: 1px;
-            }
-
+    @media(max-width: @on_phone){
+      display: flex;
+      padding-left: @gap/2;
+      padding-right: @gap - 6px;
+    }
+  }
+  .nav-sub .switcher{
+    display: flex;
+  }
+  .m_search {
+    position: relative;
+    height: @height_navbar - @gap;
+    width: @width_sidebar;
+    @media(max-width: @on_laptop){
+      width: @width_sidebar_m;
+    }
+    line-height: @height_navbar - @gap;
+    margin-top: @gap/2;
+    margin-bottom: @gap/2;
+    vertical-align: middle;
+    .form {
+      position: relative;
+      display: block;
+      width: 100%;
+    }
+    .icon,.input{
+      .enable-trans(.1s);
+    }
+    .icon {
+      position: absolute;
+      display:block;
+      height: @height_navbar - @gap;
+      width: @height_navbar - @gap;
+      line-height: @height_navbar - @gap;
+      top: 0;
+      left: @gap/2;
+      font-size: @fontsize_small;
+    }
+    .input {
+      display:block;
+      font-size: @fontsize_small;
+      line-height: @height_navbar - @gap;
+      margin: 0;
+      width: 100%;
+      color: fade(@color_text_in_header, 60%);
+      padding-left: @fontsize_base + @gap - 2px;
+      @media(max-width: @on_phone){
+        padding-left: @fontsize_base + @gap - 2px;
+      }
+      height: @height_navbar - @gap;
+      line-height: @height_navbar - @gap;
+      font-family: @fontfamily_base;
+      border: none;
+      border-radius: @border_radius_searchbar;
+      background: fade(@theme_cardbg, 15%);
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      box-shadow: none;
+      border: 1px dashed transparent;
+      .enable-trans();
+      ~ .icon{
+        color: fade(@color_text_in_header, 60%);
+      }
+      .set-placeholder({color: fade(@color_text_in_header, 60%)});
+      &:hover{
+        border: 1px dashed fade(@color_text_in_header, 60%);
+      }
+      &:focus {
+        ~ .icon{
+          color: @color_text_in_header;
         }
+        color: @color_text_in_header;
+        border: 1px solid fade(@color_text_in_header, 60%);
+        // .set-placeholder({color: @black});
+      }
     }
+  }
+  &.pure{
+    background: @theme_cardbg;
+    &, a{
+      color: @theme_main;
+    }
+    box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
     .menu{
-        position:relative;
-        flex: 1 0 auto;
-        height: @height_navbar;
+      ul > li > a{
         .enable-trans();
-        margin:0 @gap;
-        ul > li > a{
-            .enable-trans();
-            display: block;
-            font-size: @fontsize_base;
-            color: fade(@color_text_in_header, 70%);
-            padding: 0 8px;
-            &:hover{
-                color: @color_text_in_header;
-                border-bottom: @loading_height solid @theme_cardbg;
-                background: fade(@theme_cardbg, 10%);
-            }
-            &:active,&.active{
-                color: @color_text_in_header;
-                border-bottom: @loading_height solid @theme_cardbg;
-            }
+        color: fade(@theme_main, 70%);
+        &.current{
+          border-bottom: @loading_height solid fade(@theme_main, 80%);
         }
-        @media(max-width: @on_phone){
-            display:none;
+        &:hover{
+          color: @theme_main;
+          border-bottom: @loading_height solid @theme_main;
+          background: fade(@theme_main, 10%);
         }
+        &:active,&.active{
+          color: @theme_main;
+          border-bottom: @loading_height solid @theme_main;
+        }
+      }
     }
     .switcher{
-        display: none;
-        font-size: @fontsize_base;
-        line-height: @height_navbar;
-
-        & > li{
-            height: @height_navbar - @gap;
-            .enable-trans();
-            margin: 2px;
-            @height: @height_navbar - @gap;
-            @media(max-width: @on_phone){
-                width: @height;
-                height: @height;
-            }
-            a{
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                width: @height;
-                height: @height;
-                border-radius: 100px;
-                .enable-trans();
-                &:hover {
-                    background: fade(@theme_cardbg, 30%);
-                }
-                @media(max-width: @on_phone){
-                    width: @height;
-                    height: @height;
-                }
-            }
-        }
-        @media(max-width: @on_phone){
-            display: flex;
-            padding-left: @gap/2;
-            padding-right: @gap - 6px;
+      & > li{
+        a{
+          &:hover {
+            background: fade(@theme_main, 15%);
+          }
         }
-    }
-    .nav-sub .switcher{
-        display: flex;
+      }
     }
     .m_search {
-        position: relative;
-        height: @height_navbar - @gap;
-        width: @width_sidebar;
-        @media(max-width: @on_laptop){
-            width: @width_sidebar_m;
-        }
-        line-height: @height_navbar - @gap;
-        margin-top: @gap/2;
-        margin-bottom: @gap/2;
-        vertical-align: middle;
-        .form {
-            position: relative;
-            display: block;
-            width: 100%;
+      .input {
+        color: fade(@theme_main, 60%);
+        background: @theme_background;
+        ~ .icon{
+          color: fade(@theme_main, 60%);
         }
-        .icon,.input{
-            .enable-trans(.1s);
+        .set-placeholder({color: fade(@theme_main, 60%)});
+        &:hover{
+          border: 1px dashed fade(@theme_main, 60%);
         }
-        .icon {
-            position: absolute;
-            display:block;
-            height: @height_navbar - @gap;
-            width: @height_navbar - @gap;
-            line-height: @height_navbar - @gap;
-            top: 0;
-            left: @gap/2;
-            font-size: @fontsize_small;
-        }
-        .input {
-            display:block;
-            font-size: @fontsize_small;
-            line-height: @height_navbar - @gap;
-            margin: 0;
-            width: 100%;
-            color: fade(@color_text_in_header, 60%);
-            padding-left: @fontsize_base + @gap - 2px;
-            @media(max-width: @on_phone){
-                padding-left: @fontsize_base + @gap - 2px;
-            }
-            height: @height_navbar - @gap;
-            line-height: @height_navbar - @gap;
-            font-family: @fontfamily_base;
-            border: none;
-            border-radius: @border_radius_searchbar;
-            background: fade(@theme_cardbg, 15%);
-            box-sizing: border-box;
-            -webkit-appearance: none;
-            box-shadow: none;
-            border: 1px dashed transparent;
-            .enable-trans();
-            ~ .icon{
-                color: fade(@color_text_in_header, 60%);
-            }
-            .set-placeholder({color: fade(@color_text_in_header, 60%)});
-            &:hover{
-                border: 1px dashed fade(@color_text_in_header, 60%);
-            }
-            &:focus {
-              ~ .icon{
-                  color: @color_text_in_header;
-              }
-              color: @color_text_in_header;
-              border: 1px solid fade(@color_text_in_header, 60%);
-                // .set-placeholder({color: @black});
-            }
-        }
-    }
-    &.pure{
-      background: @theme_cardbg;
-      &, a{
-        color: @theme_main;
-      }
-      box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
-      .menu{
-          ul > li > a{
-              .enable-trans();
-              color: fade(@theme_main, 70%);
-              &.current{
-                border-bottom: @loading_height solid fade(@theme_main, 80%);
-              }
-              &:hover{
-                  color: @theme_main;
-                  border-bottom: @loading_height solid @theme_main;
-                  background: fade(@theme_main, 10%);
-              }
-              &:active,&.active{
-                  color: @theme_main;
-                  border-bottom: @loading_height solid @theme_main;
-              }
-          }
-      }
-      .switcher{
-          & > li{
-              a{
-                  &:hover {
-                      background: fade(@theme_main, 15%);
-                  }
-              }
+        &:focus {
+          ~ .icon{
+            color: @theme_main;
           }
-      }
-      .m_search {
-        .input {
-            color: fade(@theme_main, 60%);
-            background: @theme_background;
-            ~ .icon{
-                color: fade(@theme_main, 60%);
-            }
-            .set-placeholder({color: fade(@theme_main, 60%)});
-            &:hover{
-                border: 1px dashed fade(@theme_main, 60%);
-            }
-            &:focus {
-              ~ .icon{
-                  color: @theme_main;
-              }
-              color: @theme_main;
-              background: fade(@theme_main, 15%);
-              border: 1px solid fade(@theme_main, 60%);
-            }
+          color: @theme_main;
+          background: fade(@theme_main, 15%);
+          border: 1px solid fade(@theme_main, 60%);
         }
       }
     }
-    @media (max-width: @on_phone)  {
-        padding: 0;
-        .m_search{
-            width:0;
-            overflow: hidden;
-            position: absolute;
-            .enable-trans();
-            margin: 0 @gap/2;
-        }
-        &.z_search-open{
-            .logo{
-                opacity:0;
-            }
-            .m_search{
-                width: 100% - 1.5*@gap;
-            }
-        }
+  }
+  @media (max-width: @on_phone)  {
+    padding: 0;
+    .m_search{
+      width:0;
+      overflow: hidden;
+      position: absolute;
+      .enable-trans();
+      margin: 0 @gap/2;
     }
+    &.z_search-open{
+      .logo{
+        opacity:0;
+      }
+      .m_search{
+        width: 100% - 1.5*@gap;
+      }
+    }
+  }
 }
 
 
 
 .menu-phone{
-    .header{
-        border-top-left-radius: @border_radius;
-        border-top-right-radius: @border_radius;
-        background-color: fade(@color_bg_navbar,90%);
-        color: @color_text_in_header;
-        font-size: @fontsize_base;
-        line-height: 1.8em;
-        padding: 8px @gap+6px;
-    }
-    position: fixed;
-    top: @height_navbar + @gap;
-    right: 0;
-    z-index:9999 + 1;
-    line-height: 2 * @gap;
-    background: white;
-    border-right: 0;
+  .header{
+    border-top-left-radius: @border_radius;
+    border-top-right-radius: @border_radius;
+    background-color: fade(@color_bg_navbar,90%);
+    color: @color_text_in_header;
+    font-size: @fontsize_base;
+    line-height: 1.8em;
+    padding: 8px @gap+6px;
+  }
+  position: fixed;
+  top: @height_navbar + @gap;
+  right: 0;
+  z-index:9999 + 1;
+  line-height: 2 * @gap;
+  background: white;
+  border-right: 0;
+  box-shadow: @boxshadow_card_raised;
+  border-radius: @border_radius;
+  transform: translate3d(-40px, -40px, 0) scale(0,0);
+  transform-origin: right top;
+  .enable-trans();
+  &:hover {
     box-shadow: @boxshadow_card_raised;
-    border-radius: @border_radius;
-    transform: translate3d(-40px, -40px, 0) scale(0,0);
-    transform-origin: right top;
-    .enable-trans();
-    &:hover {
-        box-shadow: @boxshadow_card_raised;
-    }
-    &:active {
-        box-shadow: @boxshadow_card_normal;
-    }
-    nav {
-        padding: @gap/2 0px;
-        .nav {
-            height: @height_cell;
-            line-height: @height_cell;
-            position: relative;
-            display: block;
-            color: @black;
-            padding: 2px 20px;
-            border-left: 4px solid transparent;
-            border-right: 4px solid transparent;
-            &:hover,&.active{
-                border-left: 4px solid @theme_main;
-                background: fade(@theme_main, 10%);
-            }
-        }
+  }
+  &:active {
+    box-shadow: @boxshadow_card_normal;
+  }
+  nav {
+    padding: @gap/2 0px;
+    .nav {
+      height: @height_cell;
+      line-height: @height_cell;
+      position: relative;
+      display: block;
+      color: @black;
+      padding: 2px 20px;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      &:hover,&.active{
+        border-left: 4px solid @theme_main;
+        background: fade(@theme_main, 10%);
+      }
     }
+  }
 }
diff --git a/source/less/_main.less b/source/less/_main.less
index 4b1ace1..e97aaf6 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -1,484 +1,484 @@
 .l_main {
-    width: ~"calc(100% - 1 * @{width_sidebar})";
-    @media(max-width: @on_laptop) {
-        width: ~"calc(100% - 1 * @{width_sidebar_m})";
+  width: ~"calc(100% - 1 * @{width_sidebar})";
+  @media(max-width: @on_laptop) {
+    width: ~"calc(100% - 1 * @{width_sidebar_m})";
+  }
+  @media(max-width: @on_pad) {
+    width: 100%;
+  }
+  padding-right: @gap;
+  float: left;
+  .post-list {
+    position: relative;
+    margin: 0px auto;
+    // columns: 400px;
+    column-gap: 0;
+    margin: -@gap /2;
+    @media(max-width: @on_phone) {
+      margin: 0;
     }
-    @media(max-width: @on_pad) {
-        width: 100%;
+  }
+  #comments {
+    position: relative;
+    // padding-top: 1.5*@gap;
+    @media(max-width: @on_phone) {
+      // padding-top: @gap;
     }
-    padding-right: @gap;
-    float: left;
-    .post-list {
-        position: relative;
-        margin: 0px auto;
-        // columns: 400px;
-        column-gap: 0;
-        margin: -@gap /2;
-        @media(max-width: @on_phone) {
-            margin: 0;
+    #valine_container{
+        p{
+          line-height: @lineheight_base;
         }
-    }
-    #comments {
-        position: relative;
-        // padding-top: 1.5*@gap;
-        @media(max-width: @on_phone) {
-            // padding-top: @gap;
+        .info{
+          display: none;
         }
-        #valine_container{
-            p{
-                line-height: @lineheight_base;
-            }
-            .info{
-                display: none;
-            }
-            .vwrap{
-                border-radius: @border_radius;
-                border-style: dashed;
-                border: 1px dashed fade(@color_text_main, 30%);
-                .enable-trans();
-                &:hover{
-                    border: 1px dashed fade(@theme_main, 100%);
-                }
-                .vheader{
-                  .vinput{
-                    border-radius: 0;
-                    border-bottom: 1px dashed fade(@color_text_main, 30%);
-                    &:hover{
-                      border-bottom: 1px dashed @theme_main;
-                    }
-                    &:focus{
-                      border-bottom: 1px solid @theme_main;
-                    }
-                  }
-                }
-
-                .vedit .vctrl span {
-                    color: @theme_main;
-                    padding: 0;
-                    margin: 10px;
-                }
-
-            }
-            button{
-                border: none;
-                padding-left: 2.4em;
-                padding-right: 2.4em;
-                font-weight: bold;
-                background-color: @theme_main;
-                color: white;
-                border-radius: @border_radius/2;
-                .enable-trans();
-                &:hover {
-                  background: darken(@theme_main, 10%);
-                }
-                &:active {
-                  // background: lighten(@theme_main, 20%);
-                }
-            }
-            blockquote{
-                padding: @gap;
-                border-left: @border_radius_line solid @color_bg_quote;
-                // border-radius: @border_radius_code_block;
-                .enable-trans();
-                p{
-                    text-align: left;
-                    word-wrap: normal;
-                    margin: 0;
-                    font-size: @fontsize_small;
-                    line-height: @fontsize_small * 1.5;
-                }
-            }
-            pre code{
-                border: none;
-            }
-            code{
-                font-family: @fontfamily_code;
-                font-size: @fontsize_base * .8;
-                color: fade(@color_text_main, 90%);
-            }
-            a, .vemoji-btn, .vpreview-btn{
-                color: @color_text_link;
-                .enable-trans();
-                &:hover {
-                    color: @color_text_highlight;
-                    text-decoration: underline;
-                }
-                &:active {
-                    color: darken(@color_text_highlight, 25%);
-                }
-            }
-            .vhead{
-                span{
-                    &.vnick{
-                        color: fade(@color_text_main, 90%);
-                    }
-                }
-                a{
-                    &.vnick{
-                        color: #ff9800;
-                        font-weight: bold;
-                        &:hover {
-                            color: @color_text_highlight;
-                            text-decoration: underline;
-                        }
-                    }
-                }
-                .vsys{
-                  margin: 2px;
-                  padding: 1px 8px;
-                  background-color: fade(@color_text_main, 10%);
-                }
-
-            }
-            .vcard{
-              .vquote{
-                border-left: none;
-              }
-              .vh {
-                  border-bottom: 1px dashed fade(@color_text_main, 10%);
-              }
-            }
-            .vmeta{
-                .vat{
-                  font-weight: bold;
-                    color: @theme_main;
-                    .enable-trans();
-                    &:hover {
-                        color: @color_text_highlight;
-                        text-decoration: underline;
-                    }
-                    &:active {
-                        color: darken(@color_text_highlight, 25%);
-                    }
-                }
-            }
-            .vinput{
-              color: @color_text_main;
-            }
-            p{
-              color: @color_text_main;
-            }
+      .vwrap{
+        border-radius: @border_radius;
+        border-style: dashed;
+        border: 1px dashed fade(@color_text_main, 30%);
+        .enable-trans();
+        &:hover{
+            border: 1px dashed fade(@theme_main, 100%);
         }
-        .vemojis{
-          justify-content: space-between;
-          i{
-            width: auto;
-            height: 36px;
-            padding: 0;
-            margin: 8px 8px 0 8px;
-            .emoji{
-              height: 24px;
-              margin-top: 6px;
-              background: transparent;
+        .vheader{
+          .vinput{
+            border-radius: 0;
+            border-bottom: 1px dashed fade(@color_text_main, 30%);
+            &:hover{
+              border-bottom: 1px dashed @theme_main;
+            }
+            &:focus{
+              border-bottom: 1px solid @theme_main;
             }
           }
         }
-        p{
-          .emoji{
-            display: inline;
-            height: 28px;
-            background: transparent;
-          }
-        }
-    }
-    .post-wrapper{
-        // for firefox
-        column-break-inside: avoid;
-        break-inside: avoid-column;
-    }
-    .mobile-post() {
-        .post {
-            padding: 1.5 * @gap @gap;
-            .meta {
-                margin-bottom: @gap;
-                .title {
-                    font-size: @fontsize_article_title_phone;
-                }
-            }
-            .full-width {
-                margin-left: -@gap;
-                margin-right: -@gap;
-                padding-left: @gap;
-                padding-right: @gap;
-                width:~"calc(100% + 2 * @{gap})"
-            }
-            .auto-padding {
-                padding-left: @gap;
-                padding-right: @gap;
-                border-bottom-left-radius: @border_radius;
-                border-bottom-right-radius: @border_radius;
-                overflow: auto;
-            }
-            img,
-            .highlight {
-                // width:~"calc(100% + 2 * @{gap})";
-                // display: block;
-            }
-            .highlight{
-              margin-left: 0*@gap;
-              margin-right: 0*@gap;
-              width:~"calc(100% - 0 * @{gap})";
-            }
-            @media(max-width:@on_phone) {
-              .highlight {
-                margin-left: 0*@gap;
-                margin-right: 0*@gap;
-                width:~"calc(100% - 0 * @{gap})";
-              }
-              .auto-padding {
-                  padding-left: @gap;
-                  padding-right: @gap;
-                  border-bottom-left-radius: 0;
-                  border-bottom-right-radius: 0;
-              }
-            }
 
+        .vedit .vctrl span {
+          color: @theme_main;
+          padding: 0;
+          margin: 10px;
         }
-    }
-    .post-wrapper {
-        padding: @gap / 2;
-        .mobile-post();
-        .tags {
-            margin-bottom: -1.5*@gap;
+
+      }
+      button{
+        border: none;
+        padding-left: 2.4em;
+        padding-right: 2.4em;
+        font-weight: bold;
+        background-color: @theme_main;
+        color: white;
+        border-radius: @border_radius/2;
+        .enable-trans();
+        &:hover {
+          background: darken(@theme_main, 10%);
         }
-        @media(max-width:@on_phone) {
-            padding: 0 0 @gap 0;
+        &:active {
+          // background: lighten(@theme_main, 20%);
         }
-    }
-    .post {
-        position: relative;
-        margin: 0 auto;
-        padding: 2 * @gap 1.5*@gap;
-        //max-width: 768px;
-        background: @theme_cardbg;
-        border-radius: @border_radius;
-        h1{
-            font-weight: normal;
-            font-size: @fontsize_article_title;
-            line-height: @lineheight_base;
-            color: @color_text_main;
+      }
+      blockquote{
+        padding: @gap;
+        border-left: @border_radius_line solid @color_bg_quote;
+        // border-radius: @border_radius_code_block;
+        .enable-trans();
+        p{
+          text-align: left;
+          word-wrap: normal;
+          margin: 0;
+          font-size: @fontsize_small;
+          line-height: @fontsize_small * 1.5;
         }
-        &:extend(.z-depth-main);
+      }
+      pre code{
+        border: none;
+      }
+      code{
+        font-family: @fontfamily_code;
+        font-size: @fontsize_base * .8;
+        color: fade(@color_text_main, 90%);
+      }
+      a, .vemoji-btn, .vpreview-btn{
+        color: @color_text_link;
         .enable-trans();
         &:hover {
-          box-shadow: @boxshadow_card_raised;
+          color: @color_text_highlight;
+          text-decoration: underline;
         }
         &:active {
-          box-shadow: @boxshadow_card_normal;
+          color: darken(@color_text_highlight, 25%);
         }
-        @media(max-width: @on_phone) {
-            border-radius: 0;
+      }
+      .vhead{
+        span{
+          &.vnick{
+            color: fade(@color_text_main, 90%);
+          }
+        }
+        a{
+          &.vnick{
+            color: #ff9800;
+            font-weight: bold;
             &:hover {
-              box-shadow: @boxshadow_card_normal;
+              color: @color_text_highlight;
+              text-decoration: underline;
             }
+          }
         }
-        .tags a{
-          color: fade(@color_text_main, 70%);
+        .vsys{
+          margin: 2px;
+          padding: 1px 8px;
+          background-color: fade(@color_text_main, 10%);
         }
-        .meta {
-            color: fade(@color_text_main, 70%);
-            &#header-meta{
-              margin-top: 0;
-              margin-bottom: 1*@gap;
+
+      }
+      .vcard{
+        .vquote{
+          border-left: none;
+        }
+        .vh {
+            border-bottom: 1px dashed fade(@color_text_main, 10%);
+        }
+      }
+      .vmeta{
+        .vat{
+          font-weight: bold;
+            color: @theme_main;
+            .enable-trans();
+            &:hover {
+              color: @color_text_highlight;
+              text-decoration: underline;
             }
-            &#footer-meta{
-              margin-top: 2*@gap;
-              margin-bottom: 0.5*@gap;
+            &:active {
+              color: darken(@color_text_highlight, 25%);
             }
-            font-size: @fontsize_small * .95;
-            .aplayer{
-              .enable-trans();
-              width: 65px;
-              height: 65px;
-              border-radius: 100%;
-              float: right;
-              margin: 4px;
-              box-shadow: @boxshadow_card_normal;
-              &:hover {
-                border-radius: 25%;
-                transform: scale(1.1);
-                box-shadow: @boxshadow_card_raised;
-              }
-              @media(max-width: @on_phone) {
-                &:hover {
-                  border-radius: 100%;
-                  transform: scale(1);
-                  box-shadow: @boxshadow_card_normal;
-                }
+        }
+      }
+      .vinput{
+        color: @color_text_main;
+      }
+      p{
+        color: @color_text_main;
+      }
+    }
+    .vemojis{
+      justify-content: space-between;
+      i{
+        width: auto;
+        height: 36px;
+        padding: 0;
+        margin: 8px 8px 0 8px;
+        .emoji{
+          height: 24px;
+          margin-top: 6px;
+          background: transparent;
+        }
+      }
+    }
+    p{
+      .emoji{
+        display: inline;
+        height: 28px;
+        background: transparent;
+      }
+    }
+  }
+  .post-wrapper{
+      // for firefox
+      column-break-inside: avoid;
+      break-inside: avoid-column;
+  }
+  .mobile-post() {
+      .post {
+          padding: 1.5 * @gap @gap;
+          .meta {
+              margin-bottom: @gap;
+              .title {
+                  font-size: @fontsize_article_title_phone;
               }
+          }
+          .full-width {
+              margin-left: -@gap;
+              margin-right: -@gap;
+              padding-left: @gap;
+              padding-right: @gap;
+              width:~"calc(100% + 2 * @{gap})"
+          }
+          .auto-padding {
+              padding-left: @gap;
+              padding-right: @gap;
+              border-bottom-left-radius: @border_radius;
+              border-bottom-right-radius: @border_radius;
+              overflow: auto;
+          }
+          img,
+          .highlight {
+              // width:~"calc(100% + 2 * @{gap})";
+              // display: block;
+          }
+          .highlight{
+            margin-left: 0*@gap;
+            margin-right: 0*@gap;
+            width:~"calc(100% - 0 * @{gap})";
+          }
+          @media(max-width:@on_phone) {
+            .highlight {
+              margin-left: 0*@gap;
+              margin-right: 0*@gap;
+              width:~"calc(100% - 0 * @{gap})";
+            }
+            .auto-padding {
+                padding-left: @gap;
+                padding-right: @gap;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
             }
+          }
 
-            .title {
-                left: 0;
-                font-size: @fontsize_article_title;
-                @media(max-width: @on_phone) {
-                    font-size: @fontsize_article_title_phone;
-                }
-                &:before {
-                    // content: "#";
-                }
-                a {
-                    display: inline;
-                    line-height: @lineheight_base;
-                    font-weight: normal;
-                    color: @color_text_main;
-                    text-decoration: none;
-                    font-size: @fontsize_article_title;
-                    @media(max-width: @on_phone) {
-                        font-size: @fontsize_article_title_phone;
-                    }
-                    &:hover {
-                        color: @color_text_highlight;
-                    }
-                }
+      }
+  }
+  .post-wrapper {
+      padding: @gap / 2;
+      .mobile-post();
+      .tags {
+          margin-bottom: -1.5*@gap;
+      }
+      @media(max-width:@on_phone) {
+          padding: 0 0 @gap 0;
+      }
+  }
+  .post {
+      position: relative;
+      margin: 0 auto;
+      padding: 2 * @gap 1.5*@gap;
+      //max-width: 768px;
+      background: @theme_cardbg;
+      border-radius: @border_radius;
+      h1{
+          font-weight: normal;
+          font-size: @fontsize_article_title;
+          line-height: @lineheight_base;
+          color: @color_text_main;
+      }
+      &:extend(.z-depth-main);
+      .enable-trans();
+      &:hover {
+        box-shadow: @boxshadow_card_raised;
+      }
+      &:active {
+        box-shadow: @boxshadow_card_normal;
+      }
+      @media(max-width: @on_phone) {
+          border-radius: 0;
+          &:hover {
+            box-shadow: @boxshadow_card_normal;
+          }
+      }
+      .tags a{
+        color: fade(@color_text_main, 70%);
+      }
+      .meta {
+          color: fade(@color_text_main, 70%);
+          &#header-meta{
+            margin-top: 0;
+            margin-bottom: 1*@gap;
+          }
+          &#footer-meta{
+            margin-top: 2*@gap;
+            margin-bottom: 0.5*@gap;
+          }
+          font-size: @fontsize_small * .95;
+          .aplayer{
+            .enable-trans();
+            width: 65px;
+            height: 65px;
+            border-radius: 100%;
+            float: right;
+            margin: 4px;
+            box-shadow: @boxshadow_card_normal;
+            &:hover {
+              border-radius: 25%;
+              transform: scale(1.1);
+              box-shadow: @boxshadow_card_raised;
             }
-            .tags{
-                display: inline-flex;
-                background: transparent;
-                word-spacing: normal;
+            @media(max-width: @on_phone) {
+              &:hover {
+                border-radius: 100%;
+                transform: scale(1);
+                box-shadow: @boxshadow_card_normal;
+              }
             }
-            @cellH: 28px;
-            .metatag {
-                .enable-trans();
-                font-size: @fontsize_small * .95;
-                line-height: @cellH + 1px;
-                height: @cellH;
-                color: fade(@color_text_main, 70%);
-                display: inline-flex;
-                background: @theme_background;
-                margin: 4px 4px 4px 0px;
-                padding: 0px 8px 0px 2px;
-                border-radius: 0.5*@border_radius_code_block;
-                border-left: 25px solid lighten(@theme_main, 10%);
-                &:hover {
-                  background: lighten(@theme_main, 10%);
-                  color: @color_text_in_header;
-                  a{
-                    color: @color_text_in_header;
+          }
+
+          .title {
+              left: 0;
+              font-size: @fontsize_article_title;
+              @media(max-width: @on_phone) {
+                  font-size: @fontsize_article_title_phone;
+              }
+              &:before {
+                  // content: "#";
+              }
+              a {
+                  display: inline;
+                  line-height: @lineheight_base;
+                  font-weight: normal;
+                  color: @color_text_main;
+                  text-decoration: none;
+                  font-size: @fontsize_article_title;
+                  @media(max-width: @on_phone) {
+                      font-size: @fontsize_article_title_phone;
                   }
-                  .fas, .fab{
-                    color: @color_text_in_header;
+                  &:hover {
+                      color: @color_text_highlight;
                   }
-                  border-left-width: 30px;
-                  padding-right: 10px;
-                }
-                i{
-                  width: 28px;
-                  line-height: @cellH;
-                  color: @color_text_in_header;
-                  margin-left: -28px;
-                }
+              }
+          }
+          .tags{
+              display: inline-flex;
+              background: transparent;
+              word-spacing: normal;
+          }
+          @cellH: 28px;
+          .metatag {
+              .enable-trans();
+              font-size: @fontsize_small * .95;
+              line-height: @cellH + 1px;
+              height: @cellH;
+              color: fade(@color_text_main, 70%);
+              display: inline-flex;
+              background: @theme_background;
+              margin: 4px 4px 4px 0px;
+              padding: 0px 8px 0px 2px;
+              border-radius: 0.5*@border_radius_code_block;
+              border-left: 25px solid lighten(@theme_main, 10%);
+              &:hover {
+                background: lighten(@theme_main, 10%);
+                color: @color_text_in_header;
                 a{
-                    color: fade(@color_text_main, 70%);
-                    .enable-trans();
-                    &:hover {
-                        color: @color_text_highlight;
-                        color: @color_text_in_header;
-                    }
-                }
-                .categories {
-                    font-weight: normal;
-                    color: fade(@color_text_main, 70%);
+                  color: @color_text_in_header;
                 }
-                .tag,{
-                    color: fade(@color_text_main, 70%);
+                .fas, .fab{
+                  color: @color_text_in_header;
                 }
-                .fa-spinner{
+                border-left-width: 30px;
+                padding-right: 10px;
+              }
+              i{
+                width: 28px;
+                line-height: @cellH;
+                color: @color_text_in_header;
+                margin-left: -28px;
+              }
+              a{
                   color: fade(@color_text_main, 70%);
-                  margin-left: 2px;
-                }
+                  .enable-trans();
+                  &:hover {
+                      color: @color_text_highlight;
+                      color: @color_text_in_header;
+                  }
+              }
+              .categories {
+                  font-weight: normal;
+                  color: fade(@color_text_main, 70%);
+              }
+              .tag,{
+                  color: fade(@color_text_main, 70%);
+              }
+              .fa-spinner{
+                color: fade(@color_text_main, 70%);
+                margin-left: 2px;
+              }
 
+          }
+          .share{
+            &:hover {
+              background: @theme_background;
             }
-            .share{
-              &:hover {
-                background: @theme_background;
-              }
-              .share-body{
-                display: flex;
-                a{
-                  margin-left: 4px;
-                  img{
-                    margin: 2px 0;
-                    height: @cellH - 4px;
-                    width: auto;
-                    background: transparent;
-                  }
-                  i{
-                    display: inline-block;
-                    margin: 0;
-                    padding: 0;
-                    color: fade(@color_text_main, 70%);
-                  }
-                  padding-bottom: 0;
-                  margin-bottom: 0;
-                  &:hover{
-                    // background: darken(@color_md_orange, 10%);
-                    text-decoration: none;
-                  }
+            .share-body{
+              display: flex;
+              a{
+                margin-left: 4px;
+                img{
+                  margin: 2px 0;
+                  height: @cellH - 4px;
+                  width: auto;
+                  background: transparent;
+                }
+                i{
+                  display: inline-block;
+                  margin: 0;
+                  padding: 0;
+                  color: fade(@color_text_main, 70%);
+                }
+                padding-bottom: 0;
+                margin-bottom: 0;
+                &:hover{
+                  // background: darken(@color_md_orange, 10%);
+                  text-decoration: none;
                 }
-
               }
+
             }
+          }
 
-        }
-        .full-width,.highlight{
-            margin-left: 0*@gap;
-            margin-right: 0*@gap;
-            width:~"calc(100% - 0 * @{gap})";
-        }
+      }
+      .full-width,.highlight{
+          margin-left: 0*@gap;
+          margin-right: 0*@gap;
+          width:~"calc(100% - 0 * @{gap})";
+      }
 
-        img {
-            display: block;
-            max-width: 100%;
-            border-radius: 4px;
-            background: none;
-        }
-    }
-    @media(max-width:@on_pad) {
-        padding-right: 0;
-        @media(max-width: @on_phone) {
-            width: 100%;
-        }
-        .mobile-post();
-    }
+      img {
+          display: block;
+          max-width: 100%;
+          border-radius: 4px;
+          background: none;
+      }
+  }
+  @media(max-width:@on_pad) {
+      padding-right: 0;
+      @media(max-width: @on_phone) {
+          width: 100%;
+      }
+      .mobile-post();
+  }
 
-    .prev-next{
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-        color: fade(@color_text_main, 50%);
-        margin: 0;
-        .prev{
-            text-align: left;
-            border-top-right-radius: 32px;
-            border-bottom-right-radius: 32px;
-        }
-        .next{
-            text-align: right;
-            border-top-left-radius: 32px;
-            border-bottom-left-radius: 32px;
-        }
-        p{
-            margin: @gap;
-        }
-        a{
-            color: fade(@color_text_link, 90%);
-        }
-        section{
-            color: fade(@color_text_main, 80%);
-            padding: @gap;
-            border-radius: @border_radius;
-            &:hover {
-                color: @color_text_highlight;
-            }
-        }
-        @media(max-width:@on_phone) {
-            section{
-                border-radius: 0;
-            }
-        }
+  .prev-next{
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      color: fade(@color_text_main, 50%);
+      margin: 0;
+      .prev{
+          text-align: left;
+          border-top-right-radius: 32px;
+          border-bottom-right-radius: 32px;
+      }
+      .next{
+          text-align: right;
+          border-top-left-radius: 32px;
+          border-bottom-left-radius: 32px;
+      }
+      p{
+          margin: @gap;
+      }
+      a{
+          color: fade(@color_text_link, 90%);
+      }
+      section{
+          color: fade(@color_text_main, 80%);
+          padding: @gap;
+          border-radius: @border_radius;
+          &:hover {
+              color: @color_text_highlight;
+          }
+      }
+      @media(max-width:@on_phone) {
+          section{
+              border-radius: 0;
+          }
+      }
 
-    }
+  }
 
 }
diff --git a/source/less/_normalize.less b/source/less/_normalize.less
index 06d723d..d7932b9 100755
--- a/source/less/_normalize.less
+++ b/source/less/_normalize.less
@@ -424,15 +424,15 @@ table {
   }
   td,
   th {
-      padding: 4px 8px;
-      border: 1px solid @theme_background;
+    padding: 4px 8px;
+    border: 1px solid @theme_background;
   }
   tr {
-      // border-bottom: 2px solid #eee;
-      // background-color: @theme_main;
+    // border-bottom: 2px solid #eee;
+    // background-color: @theme_main;
   }
   &>thead>th {
-      // border-bottom-width: 2px;
+    // border-bottom-width: 2px;
   }
 }
 
diff --git a/source/less/_side.less b/source/less/_side.less
index ca2c293..646fee8 100755
--- a/source/less/_side.less
+++ b/source/less/_side.less
@@ -1,15 +1,15 @@
 .l_side {
-    width: @width_sidebar;
-    float: right;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    @media(max-width: @on_laptop) {
-        width: @width_sidebar_m;
-    }
-    @media(max-width: @on_pad) {
-        margin: @gap 0 0;
-        width: 100%;
-    }
+  width: @width_sidebar;
+  float: right;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  @media(max-width: @on_laptop) {
+    width: @width_sidebar_m;
+  }
+  @media(max-width: @on_pad) {
+    margin: @gap 0 0;
+    width: 100%;
+  }
 
 }
diff --git a/source/less/_toc.less b/source/less/_toc.less
index f20dddb..0bf49ae 100755
--- a/source/less/_toc.less
+++ b/source/less/_toc.less
@@ -1,110 +1,110 @@
 .l_side .toc-wrapper{
-    z-index: 1;
-    overflow: hidden;
-    border-radius: @border_radius;
+  z-index: 1;
+  overflow: hidden;
+  border-radius: @border_radius;
+  position: sticky;
+  top: @height_navbar + 1*@gap;
+  .enable-trans();
+  header{
     position: sticky;
-    top: @height_navbar + 1*@gap;
-    .enable-trans();
+    width: 100%;
+    top: 0;
+  }
+  .content{
+    padding: @gap/2 0;
+    max-height: 500px;
+    overflow: auto;
+    &.pure{
+      padding-top: 0; // 适合白色导航栏背景
+    }
+    a {
+      border-left: 4px solid transparent;
+      &:hover{
+        color: fade(@color_text_main, 100%);
+        border-left: 4px solid @theme_main;
+      }
+      &:active{
+        border-left: 8px solid @theme_main;
+      }
+      &.active{
+        color: fade(@color_text_main, 100%);
+        border-left: 4px solid @theme_main;
+        background: fade(@theme_main, 10%);
+      }
+    }
+  }
+  &.active{
+    position: fixed;
+    box-shadow: @boxshadow_card_raised;
     header{
-        position: sticky;
-        width: 100%;
-        top: 0;
+      .s-toc{
+        transform: rotate(30deg);
+      }
     }
-    .content{
-        padding: @gap/2 0;
-        max-height: 500px;
-        overflow: auto;
-        &.pure{
-          padding-top: 0; // 适合白色导航栏背景
-        }
-        a {
-            border-left: 4px solid transparent;
-            &:hover{
-                color: fade(@color_text_main, 100%);
-                border-left: 4px solid @theme_main;
-            }
-            &:active{
-                border-left: 8px solid @theme_main;
-            }
-            &.active{
-                color: fade(@color_text_main, 100%);
-                border-left: 4px solid @theme_main;
-                background: fade(@theme_main, 10%);
-            }
-        }
+  }
+  .enable-trans();
+  @media(max-width: @on_phone){
+    position: fixed;
+    max-height: 1000px;
+    // width: ~"calc(100% - 2 * @{gap})";
+    top: @height_navbar;
+    box-shadow: @boxshadow_card_raised;
+    visibility: hidden;
+    .rightBtn{
+      display: none;
     }
+    transform: scale(0,0);
+    transform-origin: right top;
     &.active{
-        position: fixed;
-        box-shadow: @boxshadow_card_raised;
-        header{
-            .s-toc{
-              transform: rotate(30deg);
-            }
-        }
-    }
-    .enable-trans();
-    @media(max-width: @on_phone){
-        position: fixed;
-        max-height: 1000px;
-        // width: ~"calc(100% - 2 * @{gap})";
-        top: @height_navbar;
-        box-shadow: @boxshadow_card_raised;
-        visibility: hidden;
-        .rightBtn{
-          display: none;
-        }
-        transform: scale(0,0);
-        transform-origin: right top;
-        &.active{
-            visibility: visible;
-            transform: scale(1,1);
-        }
+      visibility: visible;
+      transform: scale(1,1);
     }
+  }
 
-    a {
-        padding-left: 8px;
-        color: fade(@color_text_main, 60%);
-        font-size: @fontsize_small;
-        display: inline-block;
+  a {
+    padding-left: 8px;
+    color: fade(@color_text_main, 60%);
+    font-size: @fontsize_small;
+    display: inline-block;
+  }
+  ol{
+    .toc-item.toc-level-1 {
+      .toc-child a{
+        padding-left: 0.8*@gap;
+        font-weight: normal;
+      }
     }
-    ol{
-        .toc-item.toc-level-1 {
-            .toc-child a{
-                padding-left: 0.8*@gap;
-                font-weight: normal;
-            }
-        }
-        .toc-item.toc-level-2 {
-            .toc-child a{
-                padding-left: 1.6*@gap;
-                font-weight: normal;
-            }
-        }
-        .toc-item.toc-level-3 {
-            .toc-child a{
-                padding-left: 2.4*@gap;
-                font-weight: normal;
-            }
-        }
-        .toc-item.toc-level-4 {
-            .toc-child a{
-                padding-left: 3.2*@gap;
-                font-weight: normal;
-            }
-        }
-        li{
-            a{
-                padding: 0 @gap/2 0 (@gap - 5px);
-                font-weight: bold;
-                width: 100%;
-
-            }
-            width: auto;
-            text-align: left;
-            // &:extend(.txt-ellipsis);
-        }
+    .toc-item.toc-level-2 {
+      .toc-child a{
+        padding-left: 1.6*@gap;
+        font-weight: normal;
+      }
+    }
+    .toc-item.toc-level-3 {
+      .toc-child a{
+        padding-left: 2.4*@gap;
+        font-weight: normal;
+      }
+    }
+    .toc-item.toc-level-4 {
+      .toc-child a{
+        padding-left: 3.2*@gap;
+        font-weight: normal;
+      }
     }
-    &:empty{
-        display:none;
+    li{
+      a{
+        padding: 0 @gap/2 0 (@gap - 5px);
+        font-weight: bold;
+        width: 100%;
+
+      }
+      width: auto;
+      text-align: left;
+      // &:extend(.txt-ellipsis);
     }
+  }
+  &:empty{
+    display:none;
+  }
 }
diff --git a/source/less/_widget.less b/source/less/_widget.less
index 9290b56..aa2425b 100755
--- a/source/less/_widget.less
+++ b/source/less/_widget.less
@@ -245,22 +245,22 @@
   }
 
   &.tagcloud{
-      .content{
-          text-align: justify;
-          padding: @gap/2 @gap;
-          &.pure{
-            padding: 0 @gap @gap @gap; // 适合白色导航栏背景
-          }
-          a{
-            display:inline-block;
-            .enable-trans(.1s);
-            line-height: 1.6em;
-            &:hover{
-              color: @color_text_highlight !important; //to cover inline style.
-              text-decoration: underline
-            }
-          }
+    .content{
+      text-align: justify;
+      padding: @gap/2 @gap;
+      &.pure{
+        padding: 0 @gap @gap @gap; // 适合白色导航栏背景
       }
+      a{
+        display:inline-block;
+        .enable-trans(.1s);
+        line-height: 1.6em;
+        &:hover{
+          color: @color_text_highlight !important; //to cover inline style.
+          text-decoration: underline
+        }
+      }
+    }
   }
 
   &.music{
@@ -270,16 +270,16 @@
       }
     }
     .content{
-        padding: @gap/2+4px;
-        padding-top: @gap/2;
-        &.pure{
-          padding-top: @gap/4; // 适合白色导航栏背景
-        }
-        .aplayer{
-          border-radius: 4px;
-          color: #666;
-          font-family: @fontfamily_base;
-        }
+      padding: @gap/2+4px;
+      padding-top: @gap/2;
+      &.pure{
+        padding-top: @gap/4; // 适合白色导航栏背景
+      }
+      .aplayer{
+        border-radius: 4px;
+        color: #666;
+        font-family: @fontfamily_base;
+      }
     }
   }
 }