diff --git a/.stylintrc b/.stylintrc
index 38e6ac14e2..724a26c60e 100644
--- a/.stylintrc
+++ b/.stylintrc
@@ -35,7 +35,7 @@
     "truncate": true
   },
   "semicolons": "always",
-  "sortOrder": "grouped",
+  "sortOrder": "alphabetical",
   "stackedProperties": false,
   "trailingWhitespace": "never",
   "universal": false,
diff --git a/source/css/_common/components/back-to-top-sidebar.styl b/source/css/_common/components/back-to-top-sidebar.styl
index b80bb6fd4e..be589ce27e 100644
--- a/source/css/_common/components/back-to-top-sidebar.styl
+++ b/source/css/_common/components/back-to-top-sidebar.styl
@@ -1,15 +1,20 @@
 .back-to-top {
-  visibility: hidden;
-  margin: (20px - $sidebar-offset) -10px -20px;
   background: $b2t-sidebar-bg-color;
+  cursor: pointer;
   font-size: $b2t-font-size;
+  margin: 20px - $sidebar-offset -10px -20px;
   opacity: $b2t-opacity;
-  cursor: pointer;
   text-align: center;
-  &:hover { opacity: $b2t-opacity-hover; }
+  visibility: hidden;
+
+  &:hover {
+    opacity: $b2t-opacity-hover;
+  }
 
   +tablet-mobile() {
-    display: none if not hexo-config('sidebar.onmobile');
+    if (!hexo-config('sidebar.onmobile')) {
+      display: none;
+    }
   }
 
   &.back-to-top-on {
diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl
index 6b8bacf4f8..e99f28c0cd 100644
--- a/source/css/_common/components/back-to-top.styl
+++ b/source/css/_common/components/back-to-top.styl
@@ -1,26 +1,28 @@
 .back-to-top {
-  box-sizing: border-box;
-  position: fixed;
-  bottom: $b2t-position-bottom;
-  right: $b2t-position-right;
-  z-index: $zindex-5;
-  padding: 0 6px;
-  width: hexo-config('back2top.scrollpercent') ? initial : 24px;
   background: $b2t-bg-color;
-  font-size: $b2t-font-size;
-  opacity: $b2t-opacity;
+  bottom: $b2t-position-bottom;
+  box-sizing: border-box;
   color: $b2t-color;
   cursor: pointer;
+  font-size: $b2t-font-size;
+  opacity: $b2t-opacity;
+  padding: 0 6px;
+  position: fixed;
+  right: $b2t-position-right;
   text-align: center;
   transition-property: bottom;
+  width: hexo-config('back2top.scrollpercent') ? initial : 24px;
+  z-index: $zindex-5;
   the-transition();
 
   &:hover {
     color: $sidebar-highlight;
   }
+
   &.back-to-top-on {
     bottom: $b2t-position-bottom-on;
   }
+
   +tablet-mobile() {
     opacity: $b2t-opacity-hover;
     right: $b2t-position-right-mobile;
diff --git a/source/css/_common/components/buttons.styl b/source/css/_common/components/buttons.styl
index 771264651f..3033c1c246 100644
--- a/source/css/_common/components/buttons.styl
+++ b/source/css/_common/components/buttons.styl
@@ -1,20 +1,20 @@
 .btn {
-  display: inline-block;
-  padding: 0 20px;
-  font-size: $btn-default-font-size;
-  color: $btn-default-color;
   background: $btn-default-bg;
   border: $btn-default-border-width solid $btn-default-border-color;
-  text-decoration: none;
   border-radius: $btn-default-radius;
+  color: $btn-default-color;
+  display: inline-block;
+  font-size: $btn-default-font-size;
+  padding: 0 20px;
+  text-decoration: none;
   transition-property: background-color;
   the-transition();
   line-height: 2;
 
   &:hover {
+    background: $btn-default-hover-bg;
     border-color: $btn-default-hover-border-color;
     color: $btn-default-hover-color;
-    background: $btn-default-hover-bg;
   }
 
   +.btn {
@@ -22,17 +22,19 @@
   }
 
   .fa-fw {
-    width: (18em / 14);
     text-align: left;
+    width: (18em / 14);
   }
 }
 
 .btn-bar {
-  display: block;
-  width: 22px;
-  height: 2px;
   background: $text-color;
   border-radius: 1px;
+  display: block;
+  height: 2px;
+  width: 22px;
 
-  &+.btn-bar { margin-top: 4px; }
+  &+.btn-bar {
+    margin-top: 4px;
+  }
 }
diff --git a/source/css/_common/components/comments.styl b/source/css/_common/components/comments.styl
index d45838de6c..9c8a2a0a54 100644
--- a/source/css/_common/components/comments.styl
+++ b/source/css/_common/components/comments.styl
@@ -1,4 +1,4 @@
-.comments { 
+.comments {
   margin: 60px 20px 0;
   overflow: hidden;
 }
diff --git a/source/css/_common/components/components.styl b/source/css/_common/components/components.styl
index 1a399abfb2..922de4d236 100644
--- a/source/css/_common/components/components.styl
+++ b/source/css/_common/components/components.styl
@@ -1,18 +1,18 @@
-@import "highlight";
-@import "tags";
+@import 'highlight';
+@import 'tags';
+@import 'buttons';
+@import 'pagination';
+@import 'comments';
 
-@import "buttons";
-@import "pagination";
-@import "comments";
-@import (hexo-config('back2top.sidebar') ? "back-to-top-sidebar" : "back-to-top") if (hexo-config('back2top.enable'));
+@import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top') if (hexo-config('back2top.enable'));
 
-@import "header";
-@import "post";
-@import "sidebar";
-@import "footer";
-@import "third-party";
+@import 'header';
+@import 'post';
+@import 'sidebar';
+@import 'footer';
+@import 'third-party';
+@import 'pages';
 
-@import "pages";
+@import 'rainbow' if (hexo-config('safari_rainbow'));
 
-@import "rainbow" if hexo-config('safari_rainbow');
-@import "scrollbar" if hexo-config('custom_scrollbar');
+@import 'scrollbar' if (hexo-config('custom_scrollbar'));
diff --git a/source/css/_common/components/footer/footer.styl b/source/css/_common/components/footer/footer.styl
index c62ed26bc8..8f37bfd4bc 100644
--- a/source/css/_common/components/footer/footer.styl
+++ b/source/css/_common/components/footer/footer.styl
@@ -1,30 +1,46 @@
 .footer {
-  font-size: $font-size-small;
   color: $grey-dark;
+  font-size: $font-size-small;
 
-  img { border: none; }
+  img {
+    border: none;
+  }
 }
 
-.footer-inner { text-align: center; }
+.footer-inner {
+  text-align: center;
+}
 
 @keyframes iconAnimate {
-  0%, 100% { transform: scale(1); }
-  10%, 30% { transform: scale(0.9); }
-  20%, 40%, 60%, 80% { transform: scale(1.1); }
-  50%, 70% { transform: scale(1.1); }
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  10%, 30% {
+    transform: scale(.9);
+  }
+
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+
+  50%, 70% {
+    transform: scale(1.1);
+  }
 }
 
-if hexo-config('footer.icon.animated') {
+if (hexo-config('footer.icon.animated')) {
   #animate {
     animation: iconAnimate 1.33s ease-in-out infinite;
   }
 }
 
 .with-love {
+  color: unquote(hexo-config('footer.icon.color'));
   display: inline-block;
   margin: 0 5px;
-  color: unquote(hexo-config('footer.icon.color'));
 }
 
-.powered-by,
-.theme-info { display: inline-block; }
+.powered-by, .theme-info {
+  display: inline-block;
+}
diff --git a/source/css/_common/components/header/github-banner.styl b/source/css/_common/components/header/github-banner.styl
index 8219c17ea1..038d84863e 100644
--- a/source/css/_common/components/header/github-banner.styl
+++ b/source/css/_common/components/header/github-banner.styl
@@ -2,49 +2,57 @@
   0%, 100% {
     transform: rotate(0);
   }
+
   20%, 60% {
     transform: rotate(-25deg);
   }
+
   40%, 80% {
     transform: rotate(10deg);
   }
 }
 
 .github-corner {
-  scheme = hexo-config('scheme');
-  bg_color = unquote(hexo-config('android_chrome_color'));
-  mobile_layout_economy = hexo-config('mobile_layout_economy');
+  $scheme = hexo-config('scheme');
+  $bg-color = unquote(hexo-config('android_chrome_color'));
+  $mobile-layout-economy = hexo-config('mobile_layout_economy');
 
   :hover .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
   }
+
   > svg {
-    fill: bg_color;
+    border: 0;
     color: #fff;
+    fill: $bg-color;
     position: absolute;
-    top: 0;
-    border: 0;
     right: 0;
+    top: 0;
   }
+
   +tablet-mobile() {
     > svg {
-      if (scheme == 'Pisces') || (scheme == 'Gemini') {
+      if (($scheme == 'Pisces') || ($scheme == 'Gemini')) {
+        color: $bg-color;
         fill: #fff;
-        color: bg_color;
       }
     }
+
     .github-corner:hover .octo-arm {
       animation: none;
     }
+
     .github-corner .octo-arm {
       animation: octocat-wave 560ms ease-in-out;
     }
   }
+
   +mobile() {
     > svg {
-      if (scheme == 'Mist') {
+      if ($scheme == 'Mist') {
         top: inherit;
-        if mobile_layout_economy {
+
+        if ($mobile-layout-economy) {
           +mobile-small() {
             margin-top: initial;
           }
diff --git a/source/css/_common/components/header/header.styl b/source/css/_common/components/header/header.styl
index 997933b907..b330188dfb 100644
--- a/source/css/_common/components/header/header.styl
+++ b/source/css/_common/components/header/header.styl
@@ -1,9 +1,14 @@
-.header { background: $head-bg; }
+.header {
+  background: $head-bg;
+}
 
-.header-inner { position: relative; }
+.header-inner {
+  position: relative;
+}
 
-@import "headerband";
-@import "site-meta";
-@import "site-nav";
-@import "menu";
-@import "github-banner" if hexo-config('github_banner.enable');
+@import 'headerband';
+@import 'site-meta';
+@import 'site-nav';
+@import 'menu';
+
+@import 'github-banner' if (hexo-config('github_banner.enable'));
diff --git a/source/css/_common/components/header/headerband.styl b/source/css/_common/components/header/headerband.styl
index 382dbd9cdd..4f1263a284 100644
--- a/source/css/_common/components/header/headerband.styl
+++ b/source/css/_common/components/header/headerband.styl
@@ -1,4 +1,4 @@
 .headband {
-  height: $headband-height;
   background: $headband-bg;
+  height: $headband-height;
 }
diff --git a/source/css/_common/components/header/menu.styl b/source/css/_common/components/header/menu.styl
index 81f8810746..27fe2fa1c9 100644
--- a/source/css/_common/components/header/menu.styl
+++ b/source/css/_common/components/header/menu.styl
@@ -8,25 +8,31 @@
 
 .menu .menu-item {
   display: inline-block;
-  margin: 0 10px;
   list-style: none;
+  margin: 0 10px;
 
   +mobile() {
     margin-top: 10px;
   }
 
   a, span.exturl {
+    border-bottom: 1px solid $menu-link-border;
     display: block;
     font-size: $font-size-smaller;
     line-height: inherit;
-    border-bottom: 1px solid $menu-link-border;
     transition-property: border-color;
     the-transition();
 
-    &:hover { border-bottom-color: $menu-link-hover-border; }
+    &:hover {
+      border-bottom-color: $menu-link-hover-border;
+    }
   }
 
-  .fa { margin-right: 5px; }
+  .fa {
+    margin-right: 5px;
+  }
 }
 
-.use-motion .menu-item { opacity: 0; }
+.use-motion .menu-item {
+  opacity: 0;
+}
diff --git a/source/css/_common/components/header/site-meta.styl b/source/css/_common/components/header/site-meta.styl
index 8fd64d0993..b4eb4c35eb 100644
--- a/source/css/_common/components/header/site-meta.styl
+++ b/source/css/_common/components/header/site-meta.styl
@@ -2,44 +2,51 @@
   margin: 0;
   text-align: $site-meta-text-align;
 
-  +mobile() { text-align: center; }
+  +mobile() {
+    text-align: center;
+  }
 }
 
 .brand {
-  position: relative;
-  display: inline-block;
-  padding: 0 40px;
-  color: $brand-color;
   background: $brand-bg;
   border-bottom: none;
+  color: $brand-color;
+  display: inline-block;
   line-height: $title-font-size;
-  &:hover { color: $brand-hover-color; }
+  padding: 0 40px;
+  position: relative;
+
+  &:hover {
+    color: $brand-hover-color;
+  }
 }
 
 .logo {
   display: inline-block;
-  margin-right: 5px;
   line-height: 36px;
+  margin-right: 5px;
   vertical-align: top;
 }
 
 .site-title {
   display: inline-block;
-  vertical-align: top;
-  line-height: 1.5;
+  font-family: $font-family-logo;
   font-size: $title-font-size;
   font-weight: normal;
-  font-family: $font-family-logo;
+  line-height: 1.5;
+  vertical-align: top;
 }
 
 .site-subtitle {
-  margin-top: 10px;
-  font-size: $subtitle-font-size;
   color: $subtitle-color;
+  font-size: $subtitle-font-size;
+  margin-top: 10px;
 }
 
 .use-motion {
-  .brand { opacity: 0; }
+  .brand {
+    opacity: 0;
+  }
 
   .logo, .site-title, .site-subtitle, .custom-logo-image {
     opacity: 0;
diff --git a/source/css/_common/components/header/site-nav.styl b/source/css/_common/components/header/site-nav.styl
index 2dd40e80e2..31deda5844 100644
--- a/source/css/_common/components/header/site-nav.styl
+++ b/source/css/_common/components/header/site-nav.styl
@@ -1,27 +1,34 @@
 .site-nav-toggle {
   display: none;
-  position: absolute;
   left: 10px;
+  position: absolute;
+
   +mobile() {
     display: block;
   }
 
   button {
-    margin-top: 2px;
-    padding: 9px 10px;
     background: transparent;
     border: none;
+    margin-top: 2px;
+    padding: 9px 10px;
   }
 }
 
 .site-nav {
   +mobile() {
+    border-top: 1px solid $gray-lighter;
+    clear: both;
     display: none;
     margin: 0 -10px;
     padding: 0 10px;
-    clear: both;
-    border-top: 1px solid $gray-lighter;
   }
-  +tablet() { display: block !important; }
-  +desktop() { display: block !important; }
+
+  +tablet() {
+    display: block !important;
+  }
+
+  +desktop() {
+    display: block !important;
+  }
 }
diff --git a/source/css/_common/components/highlight/copy-code.styl b/source/css/_common/components/highlight/copy-code.styl
index 2de6247ffe..888224cf10 100644
--- a/source/css/_common/components/highlight/copy-code.styl
+++ b/source/css/_common/components/highlight/copy-code.styl
@@ -2,71 +2,70 @@
   position: relative;
 }
 
-.highlight-wrap:hover .copy-btn,
-.highlight-wrap .copy-btn:focus {
+.highlight-wrap:hover .copy-btn, .highlight-wrap .copy-btn:focus {
   opacity: 1;
 }
 
 .copy-btn {
+  color: #333;
+  cursor: pointer;
   display: inline-block;
-  position: absolute;
-  padding: 2px 6px;
   font-weight: $font-weight-bolder;
   line-height: 1.6;
-  color: #333;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
+  opacity: 0;
   outline: 0;
+  padding: 2px 6px;
+  position: absolute;
   transition: opacity .3s ease-in-out;
-  opacity: 0;
+  vertical-align: middle;
+  white-space: nowrap;
   disable-user-select();
 
-  if hexo-config('codeblock.copy_button.style') == 'flat' {
-    font-size: $font-size-smaller;
+  if (hexo-config('codeblock.copy_button.style') == 'flat') {
     background-color: #fff;
     border: none;
-    right: 0px;
-    top: 0px;
-  }
-  else if hexo-config('codeblock.copy_button.style') == 'mac' {
-    font-size: 14px;
+    font-size: $font-size-smaller;
+    right: 0;
+    top: 0;
+  } else if (hexo-config('codeblock.copy_button.style') == 'mac') {
     color: #fff;
-    right: 0px;
+    font-size: 14px;
+    right: 0;
     top: 2px;
-  }
-  else {
-    font-size: $font-size-smaller;
+  } else {
     background-color: #eee;
     background-image: linear-gradient(#fcfcfc, #eee);
     border: 1px solid #d5d5d5;
     border-radius: 3px;
+    font-size: $font-size-smaller;
     right: 4px;
     top: 8px;
   }
 }
 
-if hexo-config('codeblock.copy_button.style') == 'mac' {
+if (hexo-config('codeblock.copy_button.style') == 'mac') {
   .highlight-wrap {
     background: #21252b;
     border-radius: 5px;
+    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
     margin-bottom: 1.6em;
     padding-top: 30px;
-    box-shadow: 0 10px 30px 0px rgba(0,0,0,.4);
   }
+
   .highlight {
-    margin: 0px !important;
-    border-radius: 0 0 5px 5px;
+    // border-radius: 0 0 5px 5px;
+    margin: 0 !important;
+
     &::before {
-      content: " ";
-      position: absolute;
-      border-radius: 50%;
       background: #fc625d;
-      width: 12px;
+      border-radius: 50%;
+      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+      content: ' ';
       height: 12px;
       left: 12px;
       margin-top: -20px;
-      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+      position: absolute;
+      width: 12px;
     }
   }
 }
diff --git a/source/css/_common/components/highlight/diff.styl b/source/css/_common/components/highlight/diff.styl
index dcc7a51861..1d3917344f 100644
--- a/source/css/_common/components/highlight/diff.styl
+++ b/source/css/_common/components/highlight/diff.styl
@@ -1,8 +1,7 @@
-if $highlight_theme == "normal" {
-  $highlight-deletion     = #fdd
-  $highlight-addition     = #dfd
-}
-else {
-  $highlight-deletion     = #800000
-  $highlight-addition     = #008000
+if ($highlight_theme == 'normal') {
+  $highlight-deletion = #fdd;
+  $highlight-addition = #dfd;
+} else {
+  $highlight-deletion = #800000;
+  $highlight-addition = #008000;
 }
diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl
index 28611c102b..925e621ecf 100644
--- a/source/css/_common/components/highlight/highlight.styl
+++ b/source/css/_common/components/highlight/highlight.styl
@@ -1,37 +1,40 @@
 // https://github.com/chriskempson/tomorrow-theme
+$highlight-theme = hexo-config('codeblock.highlight_theme');
 
-$highlight_theme = hexo-config("codeblock.highlight_theme");
+@import 'theme';
+@import 'diff';
 
-@import "theme";
-@import "diff";
-@import "copy-code" if hexo-config("codeblock.copy_button.enable");
+@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
 
 // Placeholder: $code-block
 $code-block {
-  margin: 20px 0;
-  color: $highlight-foreground;
   background: $highlight-background;
+  color: $highlight-foreground;
   line-height: $line-height-code-block;
+  margin: 20px 0;
 }
 
-pre, code { font-family: $code-font-family; }
+pre, code {
+  font-family: $code-font-family;
+}
 
 code {
   word-wrap();
-  padding: 2px 4px;
-  color: $code-foreground;
   background: $code-background;
   border-radius: $code-border-radius;
+  color: $code-foreground;
+  padding: 2px 4px;
 }
 
 pre {
   @extend $code-block;
   overflow: auto;
   padding: 10px;
+
   code {
-    padding: 0;
-    color: $highlight-foreground;
     background: none;
+    color: $highlight-foreground;
+    padding: 0;
     text-shadow: none;
   }
 }
@@ -50,9 +53,9 @@ pre {
   }
 
   table {
+    border: none;
     margin: 0;
     width: auto;
-    border: none;
   }
 
   td {
@@ -62,33 +65,35 @@ pre {
 
   figcaption {
     clearfix();
-    color: $highlight-foreground;
-    line-height: 1em;
-    margin: 0em;
-    padding: 0.5em;
     background: $code-background;
     border-bottom: 1px solid #e9e9e9;
+    color: $highlight-foreground;
+    line-height: 1em;
+    margin: 0;
+    padding: .5em;
 
     a {
-      float: right;
       color: $highlight-foreground;
+      float: right;
 
-      &:hover { border-bottom-color: $highlight-foreground; }
+      &:hover {
+        border-bottom-color: $highlight-foreground;
+      }
     }
   }
 
   .gutter pre {
-    padding-left: 10px
-    padding-right: 10px
-    color: $highlight-gutter.color
-    text-align: right
-    background-color: $highlight-gutter.bg-color
+    background-color: $highlight-gutter.bg-color;
+    color: $highlight-gutter.color;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-align: right;
   }
 
   .code pre {
-    width: 100%
-    padding-left: 10px
-    background-color: $highlight-background
+    background-color: $highlight-background;
+    padding-left: 10px;
+    width: 100%;
   }
 }
 
@@ -99,7 +104,9 @@ pre {
 .gist table {
   width: auto;
 
-  td { border: none; }
+  td {
+    border: none;
+  }
 }
 
 pre {
@@ -121,65 +128,27 @@ pre {
     color: $highlight-comment;
   }
 
-  .variable
-  .attribute
-  .tag
-  .name
-  .regexp
-  .ruby .constant
-  .xml .tag .title
-  .xml .pi
-  .xml .doctype
-  .html .doctype
-  .css .id
-  .css .class
-  .css .pseudo {
+  .variable, .attribute, .tag, .name, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
     color: $highlight-red;
   }
 
-  .number
-  .preprocessor
-  .built_in
-  .builtin-name
-  .literal
-  .params
-  .constant
-  .command {
+  .number, .preprocessor, .built_in, .builtin-name, .literal, .params, .constant, .command {
     color: $highlight-orange;
   }
 
-  .ruby .class .title
-  .css .rules .attribute
-  .string
-  .symbol
-  .value
-  .inheritance
-  .header
-  .ruby .symbol
-  .xml .cdata
-  .special
-  .formula {
+  .ruby .class .title, .css .rules .attribute, .string, .symbol, .value, .inheritance, .header, .ruby .symbol, .xml .cdata, .special, .formula {
     color: $highlight-green;
   }
 
-  .title
-  .css .hexcolor {
+  .title, .css .hexcolor {
     color: $highlight-aqua;
   }
 
-  .function
-  .python .decorator
-  .python .title
-  .ruby .function .title
-  .ruby .title .keyword
-  .perl .sub
-  .javascript .title
-  .coffeescript .title {
+  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
     color: $highlight-blue;
   }
 
-  .keyword
-  .javascript .function {
+  .keyword, .javascript .function {
     color: $highlight-purple;
   }
 }
diff --git a/source/css/_common/components/highlight/theme.styl b/source/css/_common/components/highlight/theme.styl
index 5c074a594a..7ede727f13 100644
--- a/source/css/_common/components/highlight/theme.styl
+++ b/source/css/_common/components/highlight/theme.styl
@@ -1,90 +1,86 @@
-if $highlight_theme == "night" {
-  $highlight-background   = #1d1f21
-  $highlight-current-line = #282a2e
-  $highlight-selection    = #373b41
-  $highlight-foreground   = #c5c8c6
-  $highlight-comment      = #969896
-  $highlight-red          = #cc6666
-  $highlight-orange       = #de935f
-  $highlight-yellow       = #f0c674
-  $highlight-green        = #b5bd68
-  $highlight-aqua         = #8abeb7
-  $highlight-blue         = #81a2be
-  $highlight-purple       = #b294bb
+if ($highlight-theme == 'night') {
+  $highlight-background   = #1d1f21;
+  $highlight-current-line = #282a2e;
+  $highlight-selection    = #373b41;
+  $highlight-foreground   = #c5c8c6;
+  $highlight-comment      = #969896;
+  $highlight-red          = #cc6666;
+  $highlight-orange       = #de935f;
+  $highlight-yellow       = #f0c674;
+  $highlight-green        = #b5bd68;
+  $highlight-aqua         = #8abeb7;
+  $highlight-blue         = #81a2be;
+  $highlight-purple       = #b294bb;
   $highlight-gutter       = {
     color: lighten($highlight-background, 50%),
     bg-color: darken($highlight-background, 100%)
-  }
-}
-else if $highlight_theme == "night eighties" {
-  $highlight-background   = #2d2d2d
-  $highlight-current-line = #393939
-  $highlight-selection    = #515151
-  $highlight-foreground   = #cccccc
-  $highlight-comment      = #999999
-  $highlight-red          = #f2777a
-  $highlight-orange       = #f99157
-  $highlight-yellow       = #ffcc66
-  $highlight-green        = #99cc99
-  $highlight-aqua         = #66cccc
-  $highlight-blue         = #6699cc
-  $highlight-purple       = #cc99cc
+  };
+} else if ($highlight-theme == 'night eighties') {
+  $highlight-background   = #2d2d2d;
+  $highlight-current-line = #393939;
+  $highlight-selection    = #515151;
+  $highlight-foreground   = #cccccc;
+  $highlight-comment      = #999999;
+  $highlight-red          = #f2777a;
+  $highlight-orange       = #f99157;
+  $highlight-yellow       = #ffcc66;
+  $highlight-green        = #99cc99;
+  $highlight-aqua         = #66cccc;
+  $highlight-blue         = #6699cc;
+  $highlight-purple       = #cc99cc;
   $highlight-gutter       = {
     color: $highlight-comment,
     bg-color: darken($highlight-background, 40%)
-  }
-}
-else if $highlight_theme == "night blue" {
-  $highlight-background   = #002451
-  $highlight-current-line = #00346e
-  $highlight-selection    = #003f8e
-  $highlight-foreground   = #ffffff
-  $highlight-comment      = #7285b7
-  $highlight-red          = #ff9da4
-  $highlight-orange       = #ffc58f
-  $highlight-yellow       = #ffeead
-  $highlight-green        = #d1f1a9
-  $highlight-aqua         = #99ffff
-  $highlight-blue         = #bbdaff
-  $highlight-purple       = #ebbbff
+  };
+} else if ($highlight-theme == 'night blue') {
+  $highlight-background   = #002451;
+  $highlight-current-line = #00346e;
+  $highlight-selection    = #003f8e;
+  $highlight-foreground   = #ffffff;
+  $highlight-comment      = #7285b7;
+  $highlight-red          = #ff9da4;
+  $highlight-orange       = #ffc58f;
+  $highlight-yellow       = #ffeead;
+  $highlight-green        = #d1f1a9;
+  $highlight-aqua         = #99ffff;
+  $highlight-blue         = #bbdaff;
+  $highlight-purple       = #ebbbff;
   $highlight-gutter       = {
     color: $highlight-comment,
     bg-color: darken($highlight-background, 60%)
-  }
-}
-else if $highlight_theme == "night bright" {
-  $highlight-background   = #000000
-  $highlight-current-line = #2a2a2a
-  $highlight-selection    = #424242
-  $highlight-foreground   = #eaeaea
-  $highlight-comment      = #969896
-  $highlight-red          = #d54e53
-  $highlight-orange       = #e78c45
-  $highlight-yellow       = #e7c547
-  $highlight-green        = #b9ca4a
-  $highlight-aqua         = #70c0b1
-  $highlight-blue         = #7aa6da
-  $highlight-purple       = #c397d8
+  };
+} else if ($highlight-theme == 'night bright') {
+  $highlight-background   = #000000;
+  $highlight-current-line = #2a2a2a;
+  $highlight-selection    = #424242;
+  $highlight-foreground   = #eaeaea;
+  $highlight-comment      = #969896;
+  $highlight-red          = #d54e53;
+  $highlight-orange       = #e78c45;
+  $highlight-yellow       = #e7c547;
+  $highlight-green        = #b9ca4a;
+  $highlight-aqua         = #70c0b1;
+  $highlight-blue         = #7aa6da;
+  $highlight-purple       = #c397d8;
   $highlight-gutter       = {
     color: lighten($highlight-background, 40%),
     bg-color: lighten($highlight-background, 16%)
-  }
-}
-else {
-  $highlight-background   = #f7f7f7
-  $highlight-current-line = #efefef
-  $highlight-selection    = #d6d6d6
-  $highlight-foreground   = #4d4d4c
-  $highlight-comment      = #8e908c
-  $highlight-red          = #c82829
-  $highlight-orange       = #f5871f
-  $highlight-yellow       = #eab700
-  $highlight-green        = #718c00
-  $highlight-aqua         = #3e999f
-  $highlight-blue         = #4271ae
-  $highlight-purple       = #8959a8
+  };
+} else {
+  $highlight-background   = #f7f7f7;
+  $highlight-current-line = #efefef;
+  $highlight-selection    = #d6d6d6;
+  $highlight-foreground   = #4d4d4c;
+  $highlight-comment      = #8e908c;
+  $highlight-red          = #c82829;
+  $highlight-orange       = #f5871f;
+  $highlight-yellow       = #eab700;
+  $highlight-green        = #718c00;
+  $highlight-aqua         = #3e999f;
+  $highlight-blue         = #4271ae;
+  $highlight-purple       = #8959a8;
   $highlight-gutter       = {
     color: #869194,
     bg-color: #eff2f3
-  }
+  };
 }
diff --git a/source/css/_common/components/pages/archive.styl b/source/css/_common/components/pages/archive.styl
index 6360863123..471e648871 100644
--- a/source/css/_common/components/pages/archive.styl
+++ b/source/css/_common/components/pages/archive.styl
@@ -1,8 +1,7 @@
 .page-archive .posts-collapse {
-
+  margin-left: $posts-collapse-left;
   position: relative;
   z-index: $zindex-1;
-  margin-left: $posts-collapse-left;
 
   +mobile() {
     margin-left: 20px;
@@ -10,28 +9,28 @@
 
     .post-title, .post-meta {
       display: block;
-      width: auto;
       text-align: left;
+      width: auto;
     }
   }
 
   .archive-move-on {
-    position: absolute;
-    top: 1em;
-    left: 0;
-    margin-left: -6px;
-    width: 10px;
-    height: 10px;
     background: $grey-dark;
     border: 1px solid white;
     border-radius: 50%;
+    height: 10px;
+    left: 0;
+    margin-left: -6px;
+    position: absolute;
+    top: 1em;
+    width: 10px;
   }
 
   .archive-page-counter {
+    font-size: $font-size-large;
+    left: 20px;
     position: relative;
     top: 3px;
-    left: 20px;
-    font-size: $font-size-large;
 
     +mobile() {
       top: 5px;
@@ -39,8 +38,8 @@
   }
 
   .collection-title {
-    position: relative;
     margin: 60px 0;
+    position: relative;
 
     h1, h2 {
       margin-left: 20px;
@@ -52,16 +51,16 @@
     }
 
     &::before {
-      content: " ";
-      position: absolute;
+      background: $grey;
+      border-radius: 50%;
+      content: ' ';
+      height: 8px;
       left: 0;
-      top: 50%;
       margin-left: -4px;
       margin-top: -4px;
+      position: absolute;
+      top: 50%;
       width: 8px;
-      height: 8px;
-      background: $grey;
-      border-radius: 50%;
     }
   }
 
@@ -72,20 +71,20 @@
   .post-header {
     position: relative;
     the-transition();
-    transition-property: border;
     border-bottom: 1px dashed $grey-light;
+    transition-property: border;
 
     &::before {
-      content: " ";
-      position: absolute;
+      background: $grey;
+      border: 1px solid white;
+      border-radius: 50%;
+      content: ' ';
+      height: 6px;
       left: 0;
+      margin-left: -4px;
+      position: absolute;
       top: $font-size-smallest;
       width: 6px;
-      height: 6px;
-      margin-left: -4px;
-      background: $grey;
-      border-radius: 50%;
-      border: 1px solid white;
       the-transition();
       transition-property: background;
     }
@@ -100,39 +99,39 @@
   }
 
   .post-title {
-    margin-left: $font-size-smallest * 5;
     font-size: $font-size-medium;
     font-weight: normal;
     line-height: inherit;
-    margin-bottom: 0px;
+    margin-bottom: 0;
+    margin-left: $font-size-smallest * 5;
 
     &::after {
       margin-left: 3px;
-      opacity: 0.6;
+      opacity: .6;
     }
 
     a, span.exturl {
-      color: $grey-dim;
       border-bottom: none;
+      color: $grey-dim;
     }
   }
 
   .post-meta {
-    position: absolute;
     font-size: $font-size-smallest;
     left: 20px;
+    position: absolute;
     top: 5px;
   }
 
   &::after {
-    content: " ";
-    position: absolute;
-    top: 1.25em;
+    background: $whitesmoke;
+    content: ' ';
+    height: 100%;
     left: 0;
     margin-left: -2px;
+    position: absolute;
+    top: 1.25em;
     width: 4px;
-    height: 100%;
-    background: $whitesmoke;
     z-index: $zindex-bottom;
   }
 
diff --git a/source/css/_common/components/pages/breadcrumb.styl b/source/css/_common/components/pages/breadcrumb.styl
index 92470e6768..de166b6d47 100644
--- a/source/css/_common/components/pages/breadcrumb.styl
+++ b/source/css/_common/components/pages/breadcrumb.styl
@@ -1,18 +1,18 @@
 ul.breadcrumb {
+  font-size: $font-size-smallest;
   list-style: none;
   margin: 1em 0;
   padding: 0 2em;
   text-align: center;
-  font-size: $font-size-smallest;
 
   & li {
     display: inline;
   }
 
   & li+li::before {
-    padding: 0.5em;
+    content: '/\00a0';
     font-weight: normal;
-    content: "/\00a0";
+    padding: .5em;
   }
 
   & li+li:last-child {
diff --git a/source/css/_common/components/pages/categories.styl b/source/css/_common/components/pages/categories.styl
index 624ddc3ca9..504f41f37b 100644
--- a/source/css/_common/components/pages/categories.styl
+++ b/source/css/_common/components/pages/categories.styl
@@ -1,27 +1,37 @@
 .category-all-page {
-  .category-all-title { text-align: center; }
+  .category-all-title {
+    text-align: center;
+  }
 
-  .category-all { margin-top: 20px; }
+  .category-all {
+    margin-top: 20px;
+  }
 
   .category-list {
+    list-style: none;
     margin: 0;
     padding: 0;
-    list-style: none;
   }
 
-  .category-list-item { margin: 5px 10px; }
+  .category-list-item {
+    margin: 5px 10px;
+  }
 
   .category-list-count {
     color: $grey;
+
     &::before {
+      content: ' (';
       display: inline;
-      content: " ("
     }
+
     &::after {
+      content: ') ';
       display: inline;
-      content: ") "
     }
   }
 
-  .category-list-child { padding-left: 10px; }
+  .category-list-child {
+    padding-left: 10px;
+  }
 }
diff --git a/source/css/_common/components/pages/pages.styl b/source/css/_common/components/pages/pages.styl
index a755bbedf5..c9c399dc72 100644
--- a/source/css/_common/components/pages/pages.styl
+++ b/source/css/_common/components/pages/pages.styl
@@ -1,7 +1,6 @@
 // Page specific styles
-
-@import "archive";
-@import "categories";
-@import "schedule";
-@import "breadcrumb";
-@import "tag-cloud";
+@import 'archive';
+@import 'categories';
+@import 'schedule';
+@import 'breadcrumb';
+@import 'tag-cloud';
diff --git a/source/css/_common/components/pages/schedule.styl b/source/css/_common/components/pages/schedule.styl
index 1bc4020206..0f45ace021 100644
--- a/source/css/_common/components/pages/schedule.styl
+++ b/source/css/_common/components/pages/schedule.styl
@@ -1,112 +1,139 @@
 @keyframes dot-flash {
-  from { opacity: 1; transform: scale(1.1); }
-  to { opacity: 0; transform: scale(1); }
+  from {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
 }
 
 #event-list {
   padding-left: 30px;
+
   hr {
-    margin: 20px 0 45px 0 !important;
     background: #222;
+    margin: 20px 0 45px 0 !important;
+
     &::after {
-      display: inline-block;
-      content: 'NOW';
       background: #222;
       color: #FFF;
+      content: 'NOW';
+      display: inline-block;
       font-weight: bold;
-      text-align: right;
       padding: 0 5px;
+      text-align: right;
     }
   }
+
   li.event {
-    margin: 20px 0px;
     background: #F9F9F9;
-    padding-left: 10px;
+    margin: 20px 0;
     min-height: 40px;
+    padding-left: 10px;
+
     h2.event-summary {
       margin: 0;
       padding-bottom: 3px;
+
       &::before {
+        color: #bbb;
+        content: '\f111';
         display: inline-block;
         font-family: FontAwesome;
         font-size: 8px;
-        content: '\f111';
-        vertical-align: middle;
         margin-right: 25px;
-        color: #bbb;
+        vertical-align: middle;
       }
     }
+
     span.event-relative-time {
+      color: #bbb;
       display: inline-block;
       font-size: 12px;
       font-weight: $font-weight-normal;
       padding-left: 12px;
-      color: #bbb;
     }
+
     span.event-details {
-      display: block;
       color: #bbb;
+      display: block;
+      line-height: 18px;
       margin-left: 56px;
-      padding-top: 3px;
       padding-bottom: 6px;
+      padding-top: 3px;
       text-indent: -24px;
-      line-height: 18px;
+
       &::before {
-        text-indent: 0;
+        color: #bbb;
         display: inline-block;
-        width: 14px;
         font-family: FontAwesome;
-        text-align: center;
         margin-right: 9px;
-        color: #bbb;
+        text-align: center;
+        text-indent: 0;
+        width: 14px;
       }
+
       &.event-location::before {
         content: '\f041';
       }
+
       &.event-duration::before {
         content: '\f017';
       }
     }
   }
+
   li.event-past {
     background: #FCFCFC;
     padding: 15px 0 15px 10px;
+
     & > * {
       opacity: .9;
     }
+
     h2.event-summary {
       color: #bbb;
+
       &::before {
         color: #DFDFDF;
       }
     }
   }
+
   li.event-now {
     background: #222;
     color: #FFF;
     padding: 15px 0 15px 10px;
+
     h2.event-summary {
       &::before {
-        transform: scale(1.2);
-        color: #FFF;
         animation: dot-flash 1s alternate infinite ease-in-out;
+        color: #FFF;
+        transform: scale(1.2);
       }
     }
+
     * {
       color: #FFF !important;
     }
   }
+
   li.event-future {
     background: #222;
     color: #FFF;
     padding: 15px 0 15px 10px;
+
     h2.event-summary {
       &::before {
-        transform: scale(1.2);
-        color: #FFF;
         animation: dot-flash 1s alternate infinite ease-in-out;
+        color: #FFF;
+        transform: scale(1.2);
       }
     }
+
     * {
       color: #FFF !important;
     }
diff --git a/source/css/_common/components/pagination.styl b/source/css/_common/components/pagination.styl
index 22972b3c05..26c61e0d0b 100644
--- a/source/css/_common/components/pagination.styl
+++ b/source/css/_common/components/pagination.styl
@@ -1,20 +1,19 @@
-.pagination {
-  margin: 120px 0 40px;
-  text-align: center;
-  border-top: 1px solid $pagination-border;
-}
-
 .page-number-basic {
   display: inline-block;
-  position: relative;
-  top: -1px;
   margin: 0 10px;
   padding: 0 11px;
+  position: relative;
+  top: -1px;
 
-  +mobile() { margin: 0 5px; }
+  +mobile() {
+    margin: 0 5px;
+  }
 }
 
 .pagination {
+  border-top: 1px solid $pagination-border;
+  margin: 120px 0 40px;
+  text-align: center;
   .prev, .next, .page-number {
     @extend .page-number-basic;
     border-bottom: 0;
@@ -22,36 +21,47 @@
     transition-property: border-color;
     the-transition();
 
-    &:hover { border-top-color: $pagination-link-hover-border; }
+    &:hover {
+      border-top-color: $pagination-link-hover-border;
+    }
   }
 
   .space {
     @extend .page-number-basic;
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 
-  .prev { margin-left: 0; }
-  .next { margin-right: 0; }
+  .prev {
+    margin-left: 0;
+  }
+
+  .next {
+    margin-right: 0;
+  }
 
   .page-number.current {
-    color: $pagination-active-color;
     background: $pagination-active-bg;
     border-top-color: $pagination-active-border;
+    color: $pagination-active-color;
   }
 }
 
 +mobile() {
-  .pagination { border-top: none; }
+  .pagination {
+    border-top: none;
+  }
 
   .pagination {
     .prev, .next, .page-number {
-      margin-bottom: 10px;
-      border-top: 0;
       border-bottom: 1px solid $pagination-link-border;
+      border-top: 0;
+      margin-bottom: 10px;
       padding: 0 10px;
 
-      &:hover { border-bottom-color: $pagination-link-hover-border; }
+      &:hover {
+        border-bottom-color: $pagination-link-hover-border;
+      }
     }
   }
 }
diff --git a/source/css/_common/components/post/post-copyright.styl b/source/css/_common/components/post/post-copyright.styl
index f1cc7cbab7..66661763f7 100644
--- a/source/css/_common/components/post/post-copyright.styl
+++ b/source/css/_common/components/post/post-copyright.styl
@@ -1,7 +1,7 @@
 .post-copyright {
-  margin: $post-copyright.margin;
-  padding: $post-copyright.padding;
-  border-left: $post-copyright.border.width $post-copyright.border.style $post-copyright.border.color;
   background-color: $post-copyright.bg;
+  border-left: $post-copyright.border.width $post-copyright.border.style $post-copyright.border.color;
   list-style: none;
+  margin: $post-copyright.margin;
+  padding: $post-copyright.padding;
 }
diff --git a/source/css/_common/components/post/post-eof.styl b/source/css/_common/components/post/post-eof.styl
index 4fb0448860..0470ccdd81 100644
--- a/source/css/_common/components/post/post-eof.styl
+++ b/source/css/_common/components/post/post-eof.styl
@@ -1,10 +1,10 @@
 .posts-expand {
   .post-eof {
-    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
-    width: 8%;
-    height: 1px;
     background: $grey-light;
+    height: 1px;
+    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
     text-align: center;
+    width: 8%;
   }
 }
 
diff --git a/source/css/_common/components/post/post-expand.styl b/source/css/_common/components/post/post-expand.styl
index 895557e9ee..7f8844fcb9 100644
--- a/source/css/_common/components/post/post-expand.styl
+++ b/source/css/_common/components/post/post-expand.styl
@@ -9,8 +9,8 @@
 
   .post-body {
     .highlight {
-      margin-left: 0px;
-      margin-right: 0px;
+      margin-left: 0;
+      margin-right: 0;
       padding: 0;
     }
   }
@@ -20,6 +20,7 @@
   +desktop() {
     text-align: unquote(hexo-config('text_align.desktop'));
   }
+
   +tablet-mobile() {
     text-align: unquote(hexo-config('text_align.mobile'));
   }
@@ -28,10 +29,10 @@
     padding-top: 10px;
 
     .header-anchor {
+      border-bottom-style: none;
+      color: $grey-light;
       float: right;
       margin-left: 10px;
-      color: $grey-light;
-      border-bottom-style: none;
       visibility: hidden;
 
       &:hover {
@@ -45,9 +46,9 @@
   }
 
   img {
+    border: 1px solid $gray-lighter;
     box-sizing: border-box;
     margin: 0 auto 20px;
     padding: 3px;
-    border: 1px solid $gray-lighter;
   }
 }
diff --git a/source/css/_common/components/post/post-gallery.styl b/source/css/_common/components/post/post-gallery.styl
index 9e4e8cc731..d5908f09ab 100644
--- a/source/css/_common/components/post/post-gallery.styl
+++ b/source/css/_common/components/post/post-gallery.styl
@@ -1,8 +1,8 @@
 .post-gallery {
+  border-collapse: separate;
   display: table;
   table-layout: fixed;
   width: 100%;
-  border-collapse: separate;
 }
 
 .post-gallery-row {
@@ -10,15 +10,15 @@
 }
 
 .post-gallery .post-gallery-img {
+  border: none;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
-  border: none;
 
   img {
-    max-width: 100%;
-    max-height: 100%;
     border: none;
+    max-height: 100%;
+    max-width: 100%;
   }
 }
 
diff --git a/source/css/_common/components/post/post-meta.styl b/source/css/_common/components/post/post-meta.styl
index 47988232b0..df0ed0b1d2 100644
--- a/source/css/_common/components/post/post-meta.styl
+++ b/source/css/_common/components/post/post-meta.styl
@@ -1,7 +1,7 @@
 .posts-expand .post-meta {
-  margin: 3px 0 60px 0;
   color: $grey-dark;
   font-family: $font-family-posts;
+  margin: 3px 0 60px 0;
   text-align: center;
 
   .post-description {
@@ -16,7 +16,7 @@
 }
 
 .post-meta .post-meta-item + .post-meta-item::before {
-  content: "|";
+  content: '|';
   margin: 0 .5em;
 }
 
@@ -30,6 +30,7 @@
 
 .post-meta-item-icon {
   margin-right: 3px;
+
   +tablet-mobile() {
     display: inline-block;
   }
diff --git a/source/css/_common/components/post/post-nav.styl b/source/css/_common/components/post/post-nav.styl
index af19cee3ca..7b862d3417 100644
--- a/source/css/_common/components/post/post-nav.styl
+++ b/source/css/_common/components/post/post-nav.styl
@@ -1,8 +1,8 @@
 .post-nav {
+  border-top: 1px solid $gainsboro;
   display: table;
   margin-top: 15px;
   width: 100%;
-  border-top: 1px solid $gainsboro;
 }
 
 .post-nav-divider {
@@ -13,23 +13,25 @@
 .post-nav-item {
   display: table-cell;
   padding: 10px 0 0 0;
-  width: 45%;
   vertical-align: top;
+  width: 45%;
 
   a {
-    position: relative;
+    border-bottom: none;
+    color: $link-color;
     display: block;
-    line-height: 1.6;
     font-size: $font-size-small;
-    color: $link-color;
-    border-bottom: none;
+    line-height: 1.6;
+    position: relative;
 
     &:hover {
-      color: $link-hover-color;
       border-bottom: none;
+      color: $link-hover-color;
     }
 
-    &:active { top: 2px; }
+    &:active {
+      top: 2px;
+    }
   }
 
   .fa {
@@ -39,13 +41,19 @@
 }
 
 .post-nav-next {
-  a { padding-left: 5px; }
+  a {
+    padding-left: 5px;
+  }
 }
 
 .post-nav-prev {
   text-align: right;
 
-  a { padding-right: 5px; }
+  a {
+    padding-right: 5px;
+  }
 
-  .fa { margin-left: 5px; }
+  .fa {
+    margin-left: 5px;
+  }
 }
diff --git a/source/css/_common/components/post/post-reading_progress.styl b/source/css/_common/components/post/post-reading_progress.styl
index 77e71bbf6e..6ad682a506 100644
--- a/source/css/_common/components/post/post-reading_progress.styl
+++ b/source/css/_common/components/post/post-reading_progress.styl
@@ -1,10 +1,10 @@
 .reading-progress-bar {
+  background: unquote(hexo-config('reading_progress.color'));
+  display: block;
+  height: unquote(hexo-config('reading_progress.height'));
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
-  z-index: 9999;
-  display: block;
   width: 0;
-  height: unquote(hexo-config('reading_progress.height'));
-  background: unquote(hexo-config('reading_progress.color'));
+  z-index: 9999;
 }
diff --git a/source/css/_common/components/post/post-reward.styl b/source/css/_common/components/post/post-reward.styl
index a83b403a65..f429b37cca 100644
--- a/source/css/_common/components/post/post-reward.styl
+++ b/source/css/_common/components/post/post-reward.styl
@@ -1,26 +1,26 @@
 #reward-container {
-  padding: 10px 0;
   margin: 20px auto;
-  width: 90%;
+  padding: 10px 0;
   text-align: center;
+  width: 90%;
 }
 
 #reward-button {
-  cursor: pointer;
+  background: #F44336;
   border: 0;
-  outline: 0;
-  display: inline-block;
-  vertical-align: text-top;
-  margin: 0;
-  padding: 0 15px;
   border-radius: 5px;
-  line-height: 2;
   color: #fff;
-  background: #F44336;
+  cursor: pointer;
+  display: inline-block;
   letter-spacing: normal;
-  text-transform: none;
-  text-indent: 0px;
+  line-height: 2;
+  margin: 0;
+  outline: 0;
+  padding: 0 15px;
+  text-indent: 0;
   text-shadow: none;
+  text-transform: none;
+  vertical-align: text-top;
 }
 
 #reward-button span:hover {
@@ -35,25 +35,26 @@
   }
 
   img {
-    width: 180px;
-    max-width: 100%;
     display: inline-block;
-    margin: 0.8em 2em 0 2em;
+    margin: .8em 2em 0 2em;
+    max-width: 100%;
+    width: 180px;
   }
 
   p {
     text-align: center;
   }
 
-  if hexo-config('reward_settings.animation') {
+  if (hexo-config('reward_settings.animation')) {
     & > div:hover p {
-      animation: roll 0.1s infinite linear;
+      animation: roll .1s infinite linear;
     }
 
     @keyframes roll {
       from {
         transform: rotateZ(30deg);
       }
+
       to {
         transform: rotateZ(-30deg);
       }
diff --git a/source/css/_common/components/post/post-rtl.styl b/source/css/_common/components/post/post-rtl.styl
index ea048b9f03..3293863936 100644
--- a/source/css/_common/components/post/post-rtl.styl
+++ b/source/css/_common/components/post/post-rtl.styl
@@ -5,6 +5,7 @@
       font-family: UKIJ Ekran;
     }
   }
+
   &.post-title {
     font-family: UKIJ Ekran;
   }
diff --git a/source/css/_common/components/post/post-tags.styl b/source/css/_common/components/post/post-tags.styl
index d2cbaadf32..4609f203b9 100644
--- a/source/css/_common/components/post/post-tags.styl
+++ b/source/css/_common/components/post/post-tags.styl
@@ -4,7 +4,7 @@
 
   a {
     display: inline-block;
-    margin-right: 10px;
     font-size: $font-size-smaller;
+    margin-right: 10px;
   }
 }
diff --git a/source/css/_common/components/post/post-title.styl b/source/css/_common/components/post/post-title.styl
index 3a37588eb6..8669a361bd 100644
--- a/source/css/_common/components/post/post-title.styl
+++ b/source/css/_common/components/post/post-title.styl
@@ -1,20 +1,22 @@
 .posts-expand .post-title {
   word-wrap();
+  font-weight: $posts-expand-title-font-weight;
   margin: initial;
   text-align: center;
-  font-weight: $posts-expand-title-font-weight;
 
-  if hexo-config('post_edit.enable') {
+  if (hexo-config('post_edit.enable')) {
     .post-edit-link {
+      border-bottom: none;
       color: #bbb;
       display: inline-block;
       float: right;
-      border-bottom: none;
       the-transition-ease-in();
       margin-left: -1.2em;
+
       +mobile-small() {
         margin-left: initial;
       }
+
       &:hover {
         color: black;
       }
@@ -23,29 +25,29 @@
 }
 
 .posts-expand .post-title-link {
-  display: inline-block;
-  position: relative;
-  color: $black-light;
   border-bottom: none;
+  color: $black-light;
+  display: inline-block;
   line-height: 1.2;
+  position: relative;
   vertical-align: top;
 
   &::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 2px;
+    background-color: #000;
     bottom: 0;
+    content: '';
+    height: 2px;
     left: 0;
-    background-color: #000;
-    visibility: hidden;
+    position: absolute;
     transform: scaleX(0);
+    visibility: hidden;
+    width: 100%;
     the-transition();
   }
 
   &:hover::before {
-    visibility: visible;
     transform: scaleX(1);
+    visibility: visible;
   }
 
   .fa {
diff --git a/source/css/_common/components/post/post-type.styl b/source/css/_common/components/post/post-type.styl
index c3d2510b90..4d4011682f 100644
--- a/source/css/_common/components/post/post-type.styl
+++ b/source/css/_common/components/post/post-type.styl
@@ -1,14 +1,12 @@
 // TODO: Refactor.
-
 .page-home, .page-post-detail {
   .post-type-quote {
-    .post-header,
-    .post-tags {
+    .post-header, .post-tags {
       display: none;
     }
 
     blockquote {
-      @extend .blockquote-center
+      @extend .blockquote-center;
     }
   }
 }
diff --git a/source/css/_common/components/post/post-widgets.styl b/source/css/_common/components/post/post-widgets.styl
index e9052b7025..ec89e18eb4 100644
--- a/source/css/_common/components/post/post-widgets.styl
+++ b/source/css/_common/components/post/post-widgets.styl
@@ -6,27 +6,27 @@
 
 .wp_rating {
   height: 20px;
-  margin-top: 10px;
-  text-align: center;
   line-height: 20px;
+  margin-top: 10px;
   padding-top: 6px;
+  text-align: center;
 }
 
 .social-like {
-  font-size: $font-size-small;
-  text-align: center;
   display: flex;
+  font-size: $font-size-small;
   justify-content: center;
+  text-align: center;
 }
 
 .vk_like {
-  width: 85px;
+  align-self: center;
   height: 21px;
   padding-top: 7px;
-  align-self: center;
+  width: 85px;
 }
 
 .fb_like {
-  height: 30px;
   align-self: center;
+  height: 30px;
 }
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index b781e5605b..c09025b757 100644
--- a/source/css/_common/components/post/post.styl
+++ b/source/css/_common/components/post/post.styl
@@ -1,23 +1,20 @@
 .post-body {
   word-wrap();
   font-family: $font-family-posts;
-}
 
-.post-body span.exturl {
-  .fa {
+  span.exturl .fa {
     font-size: $font-size-small;
     margin-left: 4px;
   }
-}
 
-.post-body .image-caption,
-.post-body .figure .caption {
-  margin: -20px auto 15px;
-  text-align: center;
-  font-size: $font-size-small;
-  color: $grey-dark;
-  font-weight: bold;
-  line-height: 1;
+  .image-caption, .figure .caption {
+    color: $grey-dark;
+    font-size: $font-size-small;
+    font-weight: bold;
+    line-height: 1;
+    margin: -20px auto 15px;
+    text-align: center;
+  }
 }
 
 .post-sticky-flag {
@@ -26,27 +23,46 @@
 }
 
 .use-motion {
-  if hexo-config('motion.transition.post_block') {
-    .post-block,
-    .pagination,
-    .comments { opacity: 0; }
+  if (hexo-config('motion.transition.post_block')) {
+    .post-block, .pagination, .comments {
+      opacity: 0;
+    }
+  }
+
+  if (hexo-config('motion.transition.post_header')) {
+    .post-header {
+      opacity: 0;
+    }
+  }
+
+  if (hexo-config('motion.transition.post_body')) {
+    .post-body {
+      opacity: 0;
+    }
+  }
+
+  if (hexo-config('motion.transition.coll_header')) {
+    .collection-title {
+      opacity: 0;
+    }
   }
-  if hexo-config('motion.transition.post_header') { .post-header { opacity: 0; } }
-  if hexo-config('motion.transition.post_body') { .post-body { opacity: 0; } }
-  if hexo-config('motion.transition.coll_header') { .collection-title { opacity: 0; } }
 }
 
-@import "post-expand";
-@import "post-type";
-@import "post-title";
-@import "post-meta";
-@import "post-button";
-@import "post-tags";
-@import "post-nav";
-@import "post-eof";
-@import "post-gallery";
-@import "post-reward" if hexo-config('reward_settings.enable');
-@import "post-copyright" if hexo-config('creative_commons.post');
-@import "post-widgets" if (hexo-config('facebook_sdk.enable') and hexo-config('facebook_sdk.like_button')) or (hexo-config('vkontakte_api.enable') and hexo-config('vkontakte_api.like')) or hexo-config('rating.enable') or hexo-config('likely.enable') or (hexo-config('needmoreshare2.enable') and hexo-config('needmoreshare2.postbottom.enable'));
-@import "post-rtl";
-@import "post-reading_progress" if hexo-config('reading_progress.enable');
+@import 'post-expand';
+@import 'post-type';
+@import 'post-title';
+@import 'post-meta';
+@import 'post-button';
+@import 'post-tags';
+@import 'post-nav';
+@import 'post-eof';
+@import 'post-gallery';
+@import 'post-rtl';
+
+@import 'post-reward' if (hexo-config('reward_settings.enable'));
+
+@import 'post-copyright' if (hexo-config('creative_commons.post'));
+
+@import 'post-widgets' if ((hexo-config('facebook_sdk.enable') && hexo-config('facebook_sdk.like_button')) || (hexo-config('vkontakte_api.enable') && hexo-config('vkontakte_api.like')) || hexo-config('rating.enable') || hexo-config('likely.enable') || (hexo-config('needmoreshare2.enable') && hexo-config('needmoreshare2.postbottom.enable')));
+
+@import 'post-reading_progress' if (hexo-config('reading_progress.enable'));
diff --git a/source/css/_common/components/rainbow.styl b/source/css/_common/components/rainbow.styl
index bebbbb295d..5a98094d1a 100644
--- a/source/css/_common/components/rainbow.styl
+++ b/source/css/_common/components/rainbow.styl
@@ -1,18 +1,12 @@
 body {
   overscroll-behavior: none;
 }
+
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   body::before {
-    right: 0;
-    top: 0;
-    left: 0;
-    height: 100px;
-    z-index: 2147483647;
-    position: fixed;
-    content: "";
-    display: block;
-    transform: translateY(-99.99px);
-    background: linear-gradient(124deg,
+    animation: rainbow 15s ease infinite;
+    background: linear-gradient(
+      124deg,
       #FF0000,
       #FF7F00,
       #FFFF00,
@@ -25,19 +19,31 @@ body {
       #7F00FF,
       #FF00FF,
       #FF007F,
-      #FF0000);
-    animation: rainbow 15s ease infinite;
+      #FF0000
+    );
     background-size: 1000% 1000%;
+    content: '';
+    display: block;
+    height: 100px;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform: translateY(-99.99px);
+    z-index: 2147483647;
   }
 }
+
 @keyframes rainbow {
   0% {
-    background-position: 0% 80%;
+    background-position: 0 80%;
   }
+
   50% {
     background-position: 100% 20%;
   }
+
   100% {
-    background-position: 0% 80%;
+    background-position: 0 80%;
   }
 }
diff --git a/source/css/_common/components/scrollbar.styl b/source/css/_common/components/scrollbar.styl
index f172d7b881..0ce15a1858 100644
--- a/source/css/_common/components/scrollbar.styl
+++ b/source/css/_common/components/scrollbar.styl
@@ -1,31 +1,30 @@
-// scrollbar
+// Scrollbar
 ::-webkit-scrollbar {
-  width: 8px;
   height: 8px;
+  width: 8px;
 }
 
-// track 
+// Track
 ::-webkit-scrollbar-track {
-  
 }
 
 // Handle style
 ::-webkit-scrollbar-thumb {
-  border-radius: 10px;  
-  background: rgba(0, 0, 0, 0.2);   
+  background: rgba(0, 0, 0, .2);
+  border-radius: 10px;
 }
 
-// inactive style
+// Inactive style
 ::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, .1);
 }
 
-// hover style
-::-webkit-scrollbar-thumb:hover{
-  background-color: rgba(0, 0, 0, 0.3);
+// Hover style
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, .3);
 }
 
-// active style
-::-webkit-scrollbar-thumb:active{
-  background-color: rgba(0, 0, 0, 0.4);
+// Active style
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, .4);
 }
diff --git a/source/css/_common/components/sidebar/sidebar-author-links.styl b/source/css/_common/components/sidebar/sidebar-author-links.styl
index 5295f0a61c..588482ac62 100644
--- a/source/css/_common/components/sidebar/sidebar-author-links.styl
+++ b/source/css/_common/components/sidebar/sidebar-author-links.styl
@@ -2,23 +2,26 @@
   margin-top: 20px;
 
   a, span.exturl {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 10px;
-    margin-bottom: 10px;
     border-bottom-color: $black-light;
+    display: inline-block;
     font-size: $font-size-smaller;
-    if hexo-config('social_icons.transition') { the-transition(); }
+    margin-bottom: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
+
+    if (hexo-config('social_icons.transition')) {
+      the-transition();
+    }
 
     &::before {
+      background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
+      border-radius: 50%;
+      content: ' ';
       display: inline-block;
-      vertical-align: middle;
+      height: 4px;
       margin-right: 3px;
-      content: " ";
+      vertical-align: middle;
       width: 4px;
-      height: 4px;
-      border-radius: 50%;
-      background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
     }
   }
 }
diff --git a/source/css/_common/components/sidebar/sidebar-author.styl b/source/css/_common/components/sidebar/sidebar-author.styl
index e6f3b655d0..d1eae73437 100644
--- a/source/css/_common/components/sidebar/sidebar-author.styl
+++ b/source/css/_common/components/sidebar/sidebar-author.styl
@@ -1,16 +1,19 @@
 .site-author-image {
+  border: $site-author-image-border-width solid $site-author-image-border-color;
   display: block;
+  height: $site-author-image-height;
   margin: 0 auto;
-  padding: $site-author-image-padding;
   max-width: $site-author-image-width;
-  height: $site-author-image-height;
-  border: $site-author-image-border-width solid $site-author-image-border-color;
-  border-radius: 50% if hexo-config('avatar.rounded');
+  padding: $site-author-image-padding;
+
+  if (hexo-config('avatar.rounded')) {
+    border-radius: 50%;
+  }
 }
 
-if hexo-config('avatar.rotated') {
+if (hexo-config('avatar.rotated')) {
   .site-author-image {
-    transition: transform 1.0s ease-out;
+    transition: transform 1s ease-out;
   }
 
   .site-author-image:hover {
@@ -19,15 +22,15 @@ if hexo-config('avatar.rotated') {
 }
 
 .site-author-name {
-  margin: $site-author-name-margin;
-  text-align: $site-author-name-align;
   color: $site-author-name-color;
   font-weight: $site-author-name-weight;
+  margin: $site-author-name-margin;
+  text-align: $site-author-name-align;
 }
 
 .site-description {
+  color: $site-description-color;
+  font-size: $site-description-font-size;
   margin-top: $site-description-margin-top;
   text-align: $site-description-align;
-  font-size: $site-description-font-size;
-  color: $site-description-color;
 }
diff --git a/source/css/_common/components/sidebar/sidebar-blogroll.styl b/source/css/_common/components/sidebar/sidebar-blogroll.styl
index 8c8faf8ac0..a8cd58707f 100644
--- a/source/css/_common/components/sidebar/sidebar-blogroll.styl
+++ b/source/css/_common/components/sidebar/sidebar-blogroll.styl
@@ -1,28 +1,29 @@
 .links-of-blogroll {
-  margin-top: 10px;
   font-size: $font-size-smaller;
+  margin-top: 10px;
 }
 
 .links-of-blogroll-title {
-  margin-top: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-bold;
+  margin-top: 0;
 }
+
 .links-of-blogroll-list {
+  list-style: none;
   margin: 0;
   padding: 0;
-  list-style: none;
 }
 
 .links-of-blogroll-item {
   padding: 2px 10px;
 
   a, span.exturl {
-    max-width: 280px;
     box-sizing: border-box;
     display: inline-block;
+    max-width: 280px;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
diff --git a/source/css/_common/components/sidebar/sidebar-button.styl b/source/css/_common/components/sidebar/sidebar-button.styl
index f417f7f7f6..5831ce5f35 100644
--- a/source/css/_common/components/sidebar/sidebar-button.styl
+++ b/source/css/_common/components/sidebar/sidebar-button.styl
@@ -2,21 +2,23 @@
   margin-top: 10px;
 
   a {
-    display: inline-block;
-    padding: 0 15px;
-    color: rgb(252, 100, 35);
     border: 1px solid rgb(252, 100, 35) !important;
     border-radius: 4px;
+    color: rgb(252, 100, 35);
+    display: inline-block;
+    padding: 0 15px;
 
     i {
       color: rgb(252, 100, 35);
     }
 
     &:hover {
-      color: white;
       background: rgb(252, 100, 35);
+      color: white;
 
-      i { color: white; }
+      i {
+        color: white;
+      }
     }
   }
 }
diff --git a/source/css/_common/components/sidebar/sidebar-dimmer.styl b/source/css/_common/components/sidebar/sidebar-dimmer.styl
index ecf0b10511..4fc679c293 100644
--- a/source/css/_common/components/sidebar/sidebar-dimmer.styl
+++ b/source/css/_common/components/sidebar/sidebar-dimmer.styl
@@ -1,22 +1,23 @@
 #sidebar-dimmer {
   display: none;
 }
+
 +mobile() {
   #sidebar-dimmer {
+    background: #000;
     display: block;
+    height: 100%;
+    left: 100%;
+    opacity: 0;
     position: fixed;
-    z-index: $zindex-2;
     top: 0;
-    left: 100%;
     width: 100%;
-    height: 100%;
-    background: #000;
-    opacity: 0;
+    z-index: $zindex-2;
   }
+
   .sidebar-active + #sidebar-dimmer {
     opacity: .7;
-    transition: opacity .5s;
     transform: translateX(-100%);
+    transition: opacity .5s;
   }
-
 }
diff --git a/source/css/_common/components/sidebar/sidebar-nav.styl b/source/css/_common/components/sidebar/sidebar-nav.styl
index 2bce39ead9..2fbe6aa233 100644
--- a/source/css/_common/components/sidebar/sidebar-nav.styl
+++ b/source/css/_common/components/sidebar/sidebar-nav.styl
@@ -1,30 +1,44 @@
 // Sidebar Navigation
-
 .sidebar-nav {
   margin: 0 0 20px;
   padding-left: 0;
-}
-
-.sidebar-nav li {
-  display: inline-block;
-  cursor: pointer;
-  border-bottom: 1px solid transparent;
-  font-size: $font-size-small;
-  color: $sidebar-nav-color;
 
-  &:hover { color: $sidebar-nav-hover-color; }
+  li {
+    border-bottom: 1px solid transparent;
+    color: $sidebar-nav-color;
+    cursor: pointer;
+    display: inline-block;
+    font-size: $font-size-small;
+
+    &:hover {
+      color: $sidebar-nav-hover-color;
+    }
+  }
+
+  .sidebar-nav-active {
+    border-bottom-color: $sidebar-highlight;
+    color: $sidebar-highlight;
+
+    &:hover {
+      color: $sidebar-highlight;
+    }
+  }
 }
 
-.page-post-detail .sidebar-nav-toc { padding: 0 5px; }
+.page-post-detail {
+  .sidebar-nav-toc {
+    padding: 0 5px;
+  }
 
-.page-post-detail .sidebar-nav-overview { margin-left: 10px; }
-
-.sidebar-nav .sidebar-nav-active {
-  color: $sidebar-highlight;
-  border-bottom-color: $sidebar-highlight;
+  .sidebar-nav-overview {
+    margin-left: 10px;
+  }
+}
 
-  &:hover { color: $sidebar-highlight; }
+.sidebar-panel {
+  display: none;
 }
 
-.sidebar-panel { display: none; }
-.sidebar-panel-active { display: block; }
+.sidebar-panel-active {
+  display: block;
+}
diff --git a/source/css/_common/components/sidebar/sidebar-toc.styl b/source/css/_common/components/sidebar/sidebar-toc.styl
index 56327eff37..b22619dae0 100644
--- a/source/css/_common/components/sidebar/sidebar-toc.styl
+++ b/source/css/_common/components/sidebar/sidebar-toc.styl
@@ -1,61 +1,79 @@
 .post-toc-empty {
-  font-size: $font-size-small;
   color: $grey-dim;
+  font-size: $font-size-small;
 }
 
-.post-toc-wrap { overflow: hidden; }
+.post-toc-wrap {
+  overflow: hidden;
+}
 
-.post-toc { overflow: auto; }
+.post-toc {
+  overflow: auto;
 
-.post-toc ol {
-  margin: 0;
-  padding: 0 2px 5px 10px;
-  text-align: left;
-  list-style: none;
-  font-size: $font-size-small;
+  ol {
+    font-size: $font-size-small;
+    list-style: none;
+    margin: 0;
+    padding: 0 2px 5px 10px;
+    text-align: left;
 
-  & > ol { padding-left: 0; }
+    & > ol {
+      padding-left: 0;
+    }
 
-  a {
-    the-transition();
-    transition-property: all;
-    color: $toc-link-color;
-    border-bottom-color: $toc-link-border-color;
+    a {
+      the-transition();
+      border-bottom-color: $toc-link-border-color;
+      color: $toc-link-color;
+      transition-property: all;
 
-    &:hover {
-      color: $toc-link-hover-color;
-      border-bottom-color: $toc-link-hover-border-color;
+      &:hover {
+        border-bottom-color: $toc-link-hover-border-color;
+        color: $toc-link-hover-color;
+      }
     }
   }
-}
 
-.post-toc .nav-item {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  //text-align: justify;
-  white-space: nowrap if !hexo-config('toc.wrap');
-  line-height: 1.8;
-}
+  .nav-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-.post-toc .nav .nav-child {
-  display: hexo-config('toc.expand_all') ? block : none;
-}
+    // text-align: justify;
+    if (!hexo-config('toc.wrap')) {
+      white-space: nowrap;
+    }
 
-.post-toc .nav .active > .nav-child { display: block; }
+    line-height: 1.8;
+  }
 
-.post-toc .nav .active-current > .nav-child {
-  display: block;
-  & > .nav-item { display: block; }
-}
+  .nav {
+    .nav-child {
+      display: hexo-config('toc.expand_all') ? block : none;
+    }
 
-.post-toc .nav .active > a {
-  color: $toc-link-active-color;
-  border-bottom-color: $toc-link-active-border-color;
-}
+    .active > .nav-child {
+      display: block;
+    }
+
+    .active-current > .nav-child {
+      display: block;
 
-.post-toc .nav .active-current > a {
-  color: $toc-link-active-current-color;
-  &:hover {
-    color: $toc-link-active-current-border-color;
+      & > .nav-item {
+        display: block;
+      }
+    }
+
+    .active > a {
+      border-bottom-color: $toc-link-active-border-color;
+      color: $toc-link-active-color;
+    }
+
+    .active-current > a {
+      color: $toc-link-active-current-color;
+
+      &:hover {
+        color: $toc-link-active-current-border-color;
+      }
+    }
   }
 }
diff --git a/source/css/_common/components/sidebar/sidebar-toggle.styl b/source/css/_common/components/sidebar/sidebar-toggle.styl
index c14e322d33..6323bfb2bb 100644
--- a/source/css/_common/components/sidebar/sidebar-toggle.styl
+++ b/source/css/_common/components/sidebar/sidebar-toggle.styl
@@ -1,31 +1,35 @@
 .sidebar-toggle {
-  position: fixed;
-  right: $b2t-position-right;
+  background: $black-deep;
   bottom: 45px;
-  width: 14px;
+  cursor: pointer;
   height: 14px;
-  padding: 5px;
-  background: $black-deep;
   line-height: 0;
+  padding: 5px;
+  position: fixed;
+  right: $b2t-position-right;
+  width: 14px;
   z-index: $zindex-5;
-  cursor: pointer;
 
   +tablet-mobile() {
     opacity: $b2t-opacity-hover;
     right: $b2t-position-right-mobile;
-    display: none if not hexo-config('sidebar.onmobile');
+
+    if (!hexo-config('sidebar.onmobile')) {
+      display: none;
+    }
   }
 }
 
 .sidebar-toggle-line {
-  position: relative;
+  background: white;
   display: inline-block;
-  vertical-align: top;
   height: 2px;
-  width: 100%;
-  background: white;
   margin-top: 3px;
-  transition: all 0.4s;
+  position: relative;
+  transition: all .4s;
+  vertical-align: top;
+  width: 100%;
+
   &:first-child {
     margin-top: 0;
   }
diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
index d8c15b22f6..b6120fbb9d 100644
--- a/source/css/_common/components/sidebar/sidebar.styl
+++ b/source/css/_common/components/sidebar/sidebar.styl
@@ -1,32 +1,34 @@
 .sidebar {
+  background: $black-deep;
+  bottom: 0;
+  box-shadow: inset 0 2px 6px black;
   position: fixed;
   right: 0;
   top: 0;
-  bottom: 0;
-
   width: 0;
   z-index: $zindex-4;
-  box-shadow: inset 0 2px 6px black;
-  background: $black-deep;
 
   a, span.exturl {
-    color: $grey-dark;
     border-bottom-color: $black-light;
+    color: $grey-dark;
+
     &:hover {
-      color: $gainsboro;
       border-bottom-color: $gainsboro;
+      color: $gainsboro;
     }
   }
 
   +tablet-mobile() {
-    display: none if not hexo-config('sidebar.onmobile');
+    if (!hexo-config('sidebar.onmobile')) {
+      display: none;
+    }
   }
 }
 
 .sidebar-inner {
-  position: relative;
-  padding: 20px 10px;
   color: $grey-dark;
+  padding: 20px 10px;
+  position: relative;
   text-align: center;
 }
 
@@ -35,8 +37,8 @@
 }
 
 .site-overview {
-  overflow-y: auto;
   overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .cc-license {
@@ -44,21 +46,27 @@
   text-align: center;
 
   .cc-opacity {
-    opacity: 0.7;
     border-bottom: none;
+    opacity: .7;
 
-    &:hover { opacity: 0.9; }
+    &:hover {
+      opacity: .9;
+    }
   }
 
-  img { display: inline-block; }
+  img {
+    display: inline-block;
+  }
 }
 
-@import "sidebar-author";
-@import "sidebar-author-links";
-@import "sidebar-button";
-@import "sidebar-blogroll";
-@import "sidebar-dimmer";
-@import "sidebar-nav";
-@import "sidebar-toggle";
-@import "sidebar-toc" if hexo-config('toc.enable');
-@import "site-state" if hexo-config('site_state');
+@import 'sidebar-author';
+@import 'sidebar-author-links';
+@import 'sidebar-button';
+@import 'sidebar-blogroll';
+@import 'sidebar-dimmer';
+@import 'sidebar-nav';
+@import 'sidebar-toggle';
+
+@import 'sidebar-toc' if (hexo-config('toc.enable'));
+
+@import 'site-state' if (hexo-config('site_state'));
diff --git a/source/css/_common/components/sidebar/site-state.styl b/source/css/_common/components/sidebar/site-state.styl
index 85b1658c81..cab8e72704 100644
--- a/source/css/_common/components/sidebar/site-state.styl
+++ b/source/css/_common/components/sidebar/site-state.styl
@@ -1,31 +1,35 @@
 .site-state {
   display: flex;
   justify-content: center;
-  overflow: hidden;
   line-height: 1.4;
-  white-space: nowrap;
-  text-align: $site-state-align;
   margin-top: 10px;
+  overflow: hidden;
+  text-align: $site-state-align;
+  white-space: nowrap;
 }
 
 .site-state-item {
-  padding: 0 15px;
   border-left: 1px solid $site-state-item-border-color;
+  padding: 0 15px;
 
-  &:first-child { border-left: none; }
+  &:first-child {
+    border-left: none;
+  }
 
-  a { border-bottom: none; }
+  a {
+    border-bottom: none;
+  }
 }
 
 .site-state-item-count {
-  display: block;
-  text-align: center;
   color: $site-state-item-count-color;
-  font-weight: $font-weight-bold;
+  display: block;
   font-size: $site-state-item-count-font-size;
+  font-weight: $font-weight-bold;
+  text-align: center;
 }
 
 .site-state-item-name {
-  font-size: $site-state-item-name-font-size;
   color: $site-state-item-name-color;
+  font-size: $site-state-item-name-font-size;
 }
diff --git a/source/css/_common/components/tags/blockquote-center.styl b/source/css/_common/components/tags/blockquote-center.styl
index b0f3bccaa0..19067034c6 100644
--- a/source/css/_common/components/tags/blockquote-center.styl
+++ b/source/css/_common/components/tags/blockquote-center.styl
@@ -1,33 +1,37 @@
 // Blockquote with all children centered.
 .blockquote-center {
-  position: relative;
+  border-left: none;
   margin: 40px 0;
   padding: 0;
-  border-left: none;
+  position: relative;
   text-align: center;
 
   &::before, &::after {
-    position: absolute;
+    background-position: 0 -6px;
+    background-repeat: no-repeat;
+    background-size: 22px 22px;
     content: ' ';
     display: block;
-    width: 100%;
     height: 24px;
-    opacity: 0.2;
-    background-repeat: no-repeat;
-    background-position: 0 -6px;
-    background-size: 22px 22px;
+    opacity: .2;
+    position: absolute;
+    width: 100%;
   }
+
   &::before {
-    top: -20px;
     background-image: url($center-quote-left);
     border-top: 1px solid $grey-light;
+    top: -20px;
   }
+
   &::after {
-    bottom: -20px;
     background-image: url($center-quote-right);
-    border-bottom: 1px solid $grey-light;
     background-position: 100% 8px;
+    border-bottom: 1px solid $grey-light;
+    bottom: -20px;
   }
 
-  p, div { text-align: center; }
+  p, div {
+    text-align: center;
+  }
 }
diff --git a/source/css/_common/components/tags/full-image.styl b/source/css/_common/components/tags/full-image.styl
index e0e72ffa67..dfa3974413 100644
--- a/source/css/_common/components/tags/full-image.styl
+++ b/source/css/_common/components/tags/full-image.styl
@@ -1,6 +1,6 @@
 .posts-expand .post-body img.full-image {
   border: none;
-  //max-width: 100%;
-  //width: auto;
-  //margin: 20px auto 25px;
+  // max-width: 100%;
+  // width: auto;
+  // margin: 20px auto 25px;
 }
diff --git a/source/css/_common/components/tags/group-pictures.styl b/source/css/_common/components/tags/group-pictures.styl
index b3b94fe4a4..fbc0d98633 100644
--- a/source/css/_common/components/tags/group-pictures.styl
+++ b/source/css/_common/components/tags/group-pictures.styl
@@ -1,15 +1,15 @@
 .post .post-body .group-picture {
   img {
-    box-sizing: border-box;
-    padding: 0 3px;
     border: none;
+    box-sizing: border-box;
     margin: 0 auto;
+    padding: 0 3px;
   }
 }
 
 .post-body .group-picture-row {
-  overflow: hidden;
   margin-bottom: 6px;
+  overflow: hidden;
 }
 
 .post-body .group-picture-column {
@@ -18,14 +18,20 @@
 }
 
 .page-archive {
-  .group-picture-container { overflow: hidden; }
+  .group-picture-container {
+    overflow: hidden;
+  }
+
   .group-picture-row {
     float: left;
-    &:first-child { margin-top: 6px; }
+
+    &:first-child {
+      margin-top: 6px;
+    }
   }
 
   .group-picture-column {
-    max-width: 150px;
     max-height: 150px;
+    max-width: 150px;
   }
 }
diff --git a/source/css/_common/components/tags/label.styl b/source/css/_common/components/tags/label.styl
index 4401dd3593..7045aec8c7 100644
--- a/source/css/_common/components/tags/label.styl
+++ b/source/css/_common/components/tags/label.styl
@@ -2,10 +2,27 @@
   display: inline;
   padding: 0 2px;
 
-  &.default { background-color: $label-default; }
-  &.primary { background-color: $label-primary; }
-  &.info    { background-color: $label-info; }
-  &.success { background-color: $label-success; }
-  &.warning { background-color: $label-warning; }
-  &.danger  { background-color: $label-danger; }
+  &.default {
+    background-color: $label-default;
+  }
+
+  &.primary {
+    background-color: $label-primary;
+  }
+
+  &.info {
+    background-color: $label-info;
+  }
+
+  &.success {
+    background-color: $label-success;
+  }
+
+  &.warning {
+    background-color: $label-warning;
+  }
+
+  &.danger {
+    background-color: $label-danger;
+  }
 }
diff --git a/source/css/_common/components/tags/note.styl b/source/css/_common/components/tags/note.styl
index e515109a0f..3550f0bcfd 100644
--- a/source/css/_common/components/tags/note.styl
+++ b/source/css/_common/components/tags/note.styl
@@ -1,90 +1,104 @@
 .post-body .note {
-  note_icons = hexo-config('note.icons');
-  note_style = hexo-config('note.style');
+  $note-icons = hexo-config('note.icons');
+  $note-style = hexo-config('note.style');
+  margin-bottom: 20px;
+  padding: 15px;
+  position: relative;
 
-  position:             relative;
-  padding:              15px;
-  margin-bottom:        20px;
+  if ($note-style == 'simple') {
+    border: 1px solid $gainsboro;
+    border-left-width: 5px;
+  }
 
-  if note_style == 'simple' {
-    border:             1px solid $gainsboro;
-    border-left-width:  5px;
+  if ($note-style == 'modern') {
+    background-color: $whitesmoke;
+    border: 1px solid transparent;
   }
-  if note_style == 'modern' {
-    border:             1px solid transparent;
-    background-color:   $whitesmoke;
+
+  if ($note-style == 'flat') {
+    background-color: lighten($gainsboro, 65%);
+    border: initial;
+    border-left: 3px solid $gainsboro;
   }
-  if note_style == 'flat' {
-    border:             initial;
-    border-left:        3px solid $gainsboro;
-    background-color:   lighten($gainsboro, 65%);
+
+  if (hexo-config('note.border_radius') is a 'unit') {
+    border-radius: unit(hexo-config('note.border_radius'), px);
   }
-  border-radius:        unit(hexo-config('note.border_radius'), px) if hexo-config('note.border_radius') is a 'unit';
 
   h2, h3, h4, h5, h6 {
-    if note_icons {
-      margin-top:       3px;
+    if ($note-icons) {
+      margin-top: 3px;
     } else {
-      margin-top:       0;
+      margin-top: 0;
     }
-    margin-bottom:      0;
-    border-bottom:      initial;
-    padding-top:        0 !important;
+
+    border-bottom: initial;
+    margin-bottom: 0;
+    padding-top: 0 !important;
   }
 
   p, ul, ol, table, pre, blockquote, img {
     &:first-child {
-      margin-top:       0;
+      margin-top: 0;
     }
+
     &:last-child {
-      margin-bottom:    0;
+      margin-bottom: 0;
     }
   }
 
-  if note_icons {
+  if ($note-icons) {
     &:not(.no-icon) {
-      padding-left:     45px;
+      padding-left: 45px;
+
       &::before {
-        position:       absolute;
-        font-family:    $font-family-icons;
-        font-size:      larger;
-        top:            13px;
-        left:           15px;
+        font-family: $font-family-icons;
+        font-size: larger;
+        left: 15px;
+        position: absolute;
+        top: 13px;
       }
     }
   }
 
   &.default {
-    if note_style == 'flat' {
+    if ($note-style == 'flat') {
       background-color: $note-default-bg;
     }
-    if note_style == 'modern' {
+
+    if ($note-style == 'modern') {
       background-color: $note-modern-default-bg;
-      border-color:     $note-modern-default-border;
-      color:            $note-modern-default-text;
+      border-color: $note-modern-default-border;
+      color: $note-modern-default-text;
+
       a, span.exturl {
         &:not(.btn) {
-          color:                     $note-modern-default-text;
-          border-bottom:   1px solid $note-modern-default-text;
+          border-bottom: 1px solid $note-modern-default-text;
+          color: $note-modern-default-text;
+
           &:hover {
-            color:                   $note-modern-default-hover;
             border-bottom: 1px solid $note-modern-default-hover;
+            color: $note-modern-default-hover;
           }
         }
       }
     }
-    if not note_style == 'modern' {
-      border-left-color:   $note-default-border;
+
+    if (!($note-style == 'modern')) {
+      border-left-color: $note-default-border;
+
       h2, h3, h4, h5, h6 {
-        color:             $note-default-text;
+        color: $note-default-text;
       }
     }
-    if note_icons {
+
+    if ($note-icons) {
       &:not(.no-icon) {
         &::before {
-          content:         $note-default-icon;
-          if not note_style == 'modern' {
-            color:         $note-default-text;
+          content: $note-default-icon;
+
+          if (!($note-style == 'modern')) {
+            color: $note-default-text;
           }
         }
       }
@@ -92,36 +106,43 @@
   }
 
   &.primary {
-    if note_style == 'flat' {
-      background-color:    $note-primary-bg;
+    if ($note-style == 'flat') {
+      background-color: $note-primary-bg;
     }
-    if note_style == 'modern' {
-      background-color:    $note-modern-primary-bg;
-      border-color:        $note-modern-primary-border;
-      color:               $note-modern-primary-text;
+
+    if ($note-style == 'modern') {
+      background-color: $note-modern-primary-bg;
+      border-color: $note-modern-primary-border;
+      color: $note-modern-primary-text;
+
       a, span.exturl {
         &:not(.btn) {
-          color:                     $note-modern-primary-text;
-          border-bottom:   1px solid $note-modern-primary-text;
+          border-bottom: 1px solid $note-modern-primary-text;
+          color: $note-modern-primary-text;
+
           &:hover {
-            color:                   $note-modern-primary-hover;
             border-bottom: 1px solid $note-modern-primary-hover;
+            color: $note-modern-primary-hover;
           }
         }
       }
     }
-    if not note_style == 'modern' {
-      border-left-color:   $note-primary-border;
+
+    if (!($note-style == 'modern')) {
+      border-left-color: $note-primary-border;
+
       h2, h3, h4, h5, h6 {
-        color:             $note-primary-text;
+        color: $note-primary-text;
       }
     }
-    if note_icons {
+
+    if ($note-icons) {
       &:not(.no-icon) {
         &::before {
-          content:         $note-primary-icon;
-          if not note_style == 'modern' {
-            color :        $note-primary-text;
+          content: $note-primary-icon;
+
+          if (!($note-style == 'modern')) {
+            color: $note-primary-text;
           }
         }
       }
@@ -129,36 +150,43 @@
   }
 
   &.info {
-    if note_style == 'flat' {
-      background-color:    $note-info-bg;
+    if ($note-style == 'flat') {
+      background-color: $note-info-bg;
     }
-    if note_style == 'modern' {
-      background-color:    $note-modern-info-bg;
-      border-color:        $note-modern-info-border;
-      color:               $note-modern-info-text;
+
+    if ($note-style == 'modern') {
+      background-color: $note-modern-info-bg;
+      border-color: $note-modern-info-border;
+      color: $note-modern-info-text;
+
       a, span.exturl {
         &:not(.btn) {
-          color:                     $note-modern-info-text;
-          border-bottom:   1px solid $note-modern-info-text;
+          border-bottom: 1px solid $note-modern-info-text;
+          color: $note-modern-info-text;
+
           &:hover {
-            color:                   $note-modern-info-hover;
             border-bottom: 1px solid $note-modern-info-hover;
+            color: $note-modern-info-hover;
           }
         }
       }
     }
-    if not note_style == 'modern' {
-      border-left-color:   $note-info-border;
+
+    if (!($note-style == 'modern')) {
+      border-left-color: $note-info-border;
+
       h2, h3, h4, h5, h6 {
-        color:             $note-info-text;
+        color: $note-info-text;
       }
     }
-    if note_icons {
+
+    if ($note-icons) {
       &:not(.no-icon) {
         &::before {
-          content:         $note-info-icon;
-          if not note_style == 'modern' {
-            color :        $note-info-text;
+          content: $note-info-icon;
+
+          if (!($note-style == 'modern')) {
+            color: $note-info-text;
           }
         }
       }
@@ -166,73 +194,87 @@
   }
 
   &.success {
-    if note_style == 'flat' {
-      background-color:    $note-success-bg;
+    if ($note-style == 'flat') {
+      background-color: $note-success-bg;
     }
-    if note_style == 'modern' {
-      background-color:    $note-modern-success-bg;
-      border-color:        $note-modern-success-border;
-      color:               $note-modern-success-text;
+
+    if ($note-style == 'modern') {
+      background-color: $note-modern-success-bg;
+      border-color: $note-modern-success-border;
+      color: $note-modern-success-text;
+
       a, span.exturl {
         &:not(.btn) {
-          color:                     $note-modern-success-text;
-          border-bottom:   1px solid $note-modern-success-text;
+          border-bottom: 1px solid $note-modern-success-text;
+          color: $note-modern-success-text;
+
           &:hover {
-            color:                   $note-modern-success-hover;
             border-bottom: 1px solid $note-modern-success-hover;
+            color: $note-modern-success-hover;
           }
         }
       }
     }
-    if not note_style == 'modern' {
-      border-left-color:   $note-success-border;
+
+    if (!($note-style == 'modern')) {
+      border-left-color: $note-success-border;
+
       h2, h3, h4, h5, h6 {
-        color:             $note-success-text;
+        color: $note-success-text;
       }
     }
-    if note_icons {
+
+    if ($note-icons) {
       &:not(.no-icon) {
         &::before {
-          content:         $note-success-icon;
-          if not note_style == 'modern' {
-            color :        $note-success-text;
-          }        
+          content: $note-success-icon;
+
+          if (!($note-style == 'modern')) {
+            color: $note-success-text;
+          }
         }
       }
     }
   }
 
   &.warning {
-    if note_style == 'flat' {
-      background-color:    $note-warning-bg;
+    if ($note-style == 'flat') {
+      background-color: $note-warning-bg;
     }
-    if note_style == 'modern' {
-      background-color:    $note-modern-warning-bg;
-      border-color:        $note-modern-warning-border;
-      color:               $note-modern-warning-text;
+
+    if ($note-style == 'modern') {
+      background-color: $note-modern-warning-bg;
+      border-color: $note-modern-warning-border;
+      color: $note-modern-warning-text;
+
       a, span.exturl {
         &:not(.btn) {
-          color:                     $note-modern-warning-text;
-          border-bottom:   1px solid $note-modern-warning-text;
+          border-bottom: 1px solid $note-modern-warning-text;
+          color: $note-modern-warning-text;
+
           &:hover {
-            color:                   $note-modern-warning-hover;
             border-bottom: 1px solid $note-modern-warning-hover;
+            color: $note-modern-warning-hover;
           }
         }
       }
     }
-    if not note_style == 'modern' {
-      border-left-color:   $note-warning-border;
+
+    if (!($note-style == 'modern')) {
+      border-left-color: $note-warning-border;
+
       h2, h3, h4, h5, h6 {
-        color:             $note-warning-text;
+        color: $note-warning-text;
       }
     }
-    if note_icons {
+
+    if ($note-icons) {
       &:not(.no-icon) {
         &::before {
-          content:         $note-warning-icon;
-          if not note_style == 'modern' {
-            color :        $note-warning-text;
+          content: $note-warning-icon;
+
+          if (!($note-style == 'modern')) {
+            color: $note-warning-text;
           }
         }
       }
@@ -240,36 +282,43 @@
   }
 
   &.danger {
-    if note_style == 'flat' {
-      background-color:    $note-danger-bg;
+    if ($note-style == 'flat') {
+      background-color: $note-danger-bg;
     }
-    if note_style == 'modern' {
-      background-color:    $note-modern-danger-bg;
-      border-color:        $note-modern-danger-border;
-      color:               $note-modern-danger-text;
+
+    if ($note-style == 'modern') {
+      background-color: $note-modern-danger-bg;
+      border-color: $note-modern-danger-border;
+      color: $note-modern-danger-text;
+
       a, span.exturl {
         &:not(.btn) {
-          color:                     $note-modern-danger-text;
-          border-bottom:   1px solid $note-modern-danger-text;
+          border-bottom: 1px solid $note-modern-danger-text;
+          color: $note-modern-danger-text;
+
           &:hover {
-            color:                   $note-modern-danger-hover;
             border-bottom: 1px solid $note-modern-danger-hover;
+            color: $note-modern-danger-hover;
           }
         }
       }
     }
-    if not note_style == 'modern' {
-      border-left-color:   $note-danger-border;
+
+    if (!($note-style == 'modern')) {
+      border-left-color: $note-danger-border;
+
       h2, h3, h4, h5, h6 {
-        color:             $note-danger-text;
+        color: $note-danger-text;
       }
     }
-    if note_icons {
+
+    if ($note-icons) {
       &:not(.no-icon) {
         &::before {
-          content:         $note-danger-icon;
-          if not note_style == 'modern' {
-            color :        $note-danger-text;
+          content: $note-danger-icon;
+
+          if (!($note-style == 'modern')) {
+            color: $note-danger-text;
           }
         }
       }
diff --git a/source/css/_common/components/tags/pdf.styl b/source/css/_common/components/tags/pdf.styl
index da1fe00434..a58faf5ec0 100644
--- a/source/css/_common/components/tags/pdf.styl
+++ b/source/css/_common/components/tags/pdf.styl
@@ -1,6 +1,6 @@
 .pdfobject-container {
-  position: relative;
+  height: unquote(hexo-config('pdf.height'));
   overflow: auto;
+  position: relative;
   width: 100%;
-  height: unquote(hexo-config('pdf.height'));
 }
diff --git a/source/css/_common/components/tags/tabs.styl b/source/css/_common/components/tags/tabs.styl
index d24cd9630e..6bcd90083a 100644
--- a/source/css/_common/components/tags/tabs.styl
+++ b/source/css/_common/components/tags/tabs.styl
@@ -1,18 +1,17 @@
 .post-body .tabs {
-  position: relative;
   display: block;
   margin-bottom: 20px;
   padding-top: 10px;
-
-  // Read tabs border_radius from NexT config and set in "tbr px" to use it as string variable in this CSS section.
-  hexo-config('tabs.border_radius') is a 'unit' ? (tbr = unit(hexo-config('tabs.border_radius'), px)) : (tbr = 0)
+  position: relative;
+  // Read tabs border_radius from NexT config and set in "$tbr px" to use it as string variable in this CSS section.
+  hexo-config('tabs.border_radius') is a 'unit' ? ($tbr = unit(hexo-config('tabs.border_radius'), px)) : ($tbr = 0);
 
   ul.nav-tabs {
-    margin: 0;
-    padding: 0;
     display: flex;
     flex-wrap: wrap;
+    margin: 0;
     margin-bottom: -1px;
+    padding: 0;
 
     +mobile-smallest() {
       display: block;
@@ -20,75 +19,94 @@
     }
 
     li.tab {
-      flex-grow: 1;
-      list-style-type: none;
       background-color: #fff;
-      border-top: 3px solid transparent;
-      border-right: 1px solid transparent;
       border-bottom: 1px solid #ddd;
       border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
+      border-top: 3px solid transparent;
+      flex-grow: 1;
+      list-style-type: none;
 
       +mobile-smallest() {
-        border-top: 1px solid transparent;
-        border-right: 1px solid transparent;
         border-bottom: 1px solid transparent;
         border-left: 3px solid transparent;
+        border-right: 1px solid transparent;
+        border-top: 1px solid transparent;
+      }
+
+      if ($tbr > 0) {
+        border-radius: $tbr $tbr 0 0;
+
+        +mobile-smallest() {
+          border-radius: $tbr;
+        }
       }
 
-      if tbr > 0 {
-        border-radius: tbr tbr 0 0;
-        +mobile-smallest() { border-radius: tbr; }
+      if (hexo-config('tabs.transition.tabs')) {
+        the-transition-ease-out();
       }
-      if hexo-config('tabs.transition.tabs') { the-transition-ease-out(); }
 
       & a {
-        text-align: center;
-        outline: 0;
         border-bottom: initial;
         display: block;
         line-height: 1.8em;
+        outline: 0;
         padding: .25em .75em;
-        & i { width: (18em / 14); }
-        if hexo-config('tabs.transition.labels') { the-transition-ease-out(); }
+        text-align: center;
+
+        & i {
+          width: (18em / 14);
+        }
+
+        if (hexo-config('tabs.transition.labels')) {
+          the-transition-ease-out();
+        }
       }
 
       &.active {
-        border-top: 3px solid $orange;
-        border-right: 1px solid $table-border-color;
         border-bottom: 1px solid transparent;
         border-left: 1px solid $table-border-color;
+        border-right: 1px solid $table-border-color;
+        border-top: 3px solid $orange;
 
         +mobile-smallest() {
-          border-top: 1px solid $table-border-color;
-          border-right: 1px solid $table-border-color;
           border-bottom: 1px solid $table-border-color;
           border-left: 3px solid $orange;
+          border-right: 1px solid $table-border-color;
+          border-top: 1px solid $table-border-color;
         }
 
         & a {
-          cursor: default;
           color: $link-color;
+          cursor: default;
         }
       }
     }
   }
 
   .tab-content {
-
     .tab-pane {
       border: 1px solid $table-border-color;
       padding: 20px 20px 0 20px;
-      if tbr > 0 { border-radius: tbr; }
+
+      if ($tbr > 0) {
+        border-radius: $tbr;
+      }
 
       &:not(.active) {
         display: none;
       }
+
       &.active {
         display: block;
-        if tbr > 0 {
+
+        if ($tbr > 0) {
           &:nth-of-type(1) {
-            border-radius: 0 tbr tbr tbr;
-            +mobile-smallest() { border-radius: tbr; }
+            border-radius: 0 $tbr $tbr $tbr;
+
+            +mobile-smallest() {
+              border-radius: $tbr;
+            }
           }
         }
       }
diff --git a/source/css/_common/components/tags/tags.styl b/source/css/_common/components/tags/tags.styl
index 664b63e4a6..bf74cbd52a 100644
--- a/source/css/_common/components/tags/tags.styl
+++ b/source/css/_common/components/tags/tags.styl
@@ -1,7 +1,10 @@
-@import "full-image";
-@import "blockquote-center";
-@import "group-pictures";
-@import "label";
-@import "note" if not hexo-config('note.style') == 'disabled';
-@import "tabs" if hexo-config('tabs.enable');
-@import "pdf" if hexo-config('pdf.enable');
+@import 'full-image';
+@import 'blockquote-center';
+@import 'group-pictures';
+@import 'label';
+
+@import 'note' if (!hexo-config('note.style') == 'disabled');
+
+@import 'tabs' if (hexo-config('tabs.enable'));
+
+@import 'pdf' if (hexo-config('pdf.enable'));
diff --git a/source/css/_common/components/third-party/algolia-search.styl b/source/css/_common/components/third-party/algolia-search.styl
index eef8937f93..0ffcfe4ebd 100644
--- a/source/css/_common/components/third-party/algolia-search.styl
+++ b/source/css/_common/components/third-party/algolia-search.styl
@@ -1,135 +1,173 @@
-// fix bug using algolia search's CDN
+// Fix bug using algolia search's CDN
 .ais-search-box--magnifier svg {
   display: none !important;
 }
+
 .ais-search-box--reset svg {
   display: none !important;
 }
 
-.algolia-pop-overlay
-  position: fixed
-  width: 100%
-  height: 100%
-  top: 0
-  left: 0
-  z-index: 2080
-  background-color: rgba(0, 0, 0, 0.3)
-  +mobile()
+.algolia-pop-overlay {
+  background-color: rgba(0, 0, 0, .3);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2080;
+
+  +mobile() {
     display: none;
+  }
+}
+
+.algolia-popup {
+  background: #fff;
+  border-radius: 5px;
+  color: #333;
+  display: none;
+  height: 80%;
+  left: 50%;
+  margin-left: -350px;
+  overflow: hidden;
+  padding: 0;
+  position: fixed;
+  top: 10%;
+  width: 700px;
+  z-index: 9999;
+
+  +mobile() {
+    border-radius: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .popup-btn-close {
+    border-left: 1px solid #eee;
+    color: #4EBD79;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+    padding-left: 15px;
+    position: absolute;
+    right: 14px;
+    text-transform: uppercase;
+    top: 10px;
+
+    .fa {
+      color: $grey-dark;
+      font-size: 18px;
+    }
+
+    &:hover .fa {
+      color: $black-deep;
+    }
+  }
+}
+
+.algolia-search {
+  background: $whitesmoke;
+  border-bottom: 1px solid #ccc;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  max-height: 50px;
+  padding: 10px 15px 5px;
+}
+
+.algolia-search-input-icon {
+  display: inline-block;
+  width: 20px;
+
+  .fa {
+    font-size: 18px;
+  }
+}
+
+.algolia-search-input {
+  display: inline-block;
+  width: calc(90% - 20px);
+
+  input {
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 5px 0;
+    width: 100%;
+  }
+}
 
-.algolia-popup
-  overflow: hidden
-  padding: 0
-  display: none
-  position: fixed
-  top: 10%
-  left: 50%
-  width: 700px
-  height: 80%
-  margin-left: -350px
-  background: #fff
-  color: #333
-  z-index: 9999
-  border-radius: 5px
-  +mobile()
-    padding: 0
-    top: 0
-    left: 0
-    margin: 0
-    width: 100%
-    height: 100%
-    border-radius: 0
-
-  .popup-btn-close
-    position: absolute
-    right: 14px
-    color: #4EBD79
-    font-size: 14px
-    font-weight: bold
-    text-transform: uppercase
-    cursor: pointer
-    padding-left: 15px
-    border-left: 1px solid #eee
-    top: 10px
-    .fa
-      color: $grey-dark
-      font-size: 18px
-    &:hover .fa
-      color: $black-deep
-
-.algolia-search
-  padding: 10px 15px 5px
-  max-height: 50px
-  border-bottom: 1px solid #ccc
-  background: $whitesmoke
-  border-top-left-radius: 5px
-  border-top-right-radius: 5px
-
-.algolia-search-input-icon
-  display: inline-block
-  width: 20px
-  .fa
-    font-size: 18px
-
-.algolia-search-input
-  display: inline-block
-  width: calc(90% - 20px)
-  input
-    padding: 5px 0
-    width: 100%
-    outline: none
-    border: none
-    background: transparent
-
-.algolia-powered
-  float: right
-  img
-    display: inline-block
-    height: 18px
-    vertical-align: middle
-
-.algolia-results
-  position: relative
-  overflow: auto
-  padding: 10px 30px
-  height: calc(100% - 50px)
-
-  hr
-    margin: 10px 0
-
-  .highlight
-    font-style: normal
-    margin: 0
-    padding: 0 2px
-    font-size: inherit
-    color: red
-
-.algolia-hits
-  margin-top: 20px
-
-.algolia-hit-item
-  margin: 15px 0
-
-.algolia-hit-item-link
-  display: block
-  border-bottom: 1px dashed #ccc
-  the-transition()
-
-.algolia-pagination
-  .pagination
-    margin: 40px 0px
-    border-top: none
-    padding: 0
-    opacity: 1
-  .pagination-item
-    display: inline-block
-  .page-number
-    border-top: none
-    &:hover
-      border-bottom: 1px solid $black-deep
-
-  .current .page-number
-    @extend .pagination .page-number.current
-
-  .disabled-item
-    visibility: hidden
+.algolia-powered {
+  float: right;
+
+  img {
+    display: inline-block;
+    height: 18px;
+    vertical-align: middle;
+  }
+}
+
+.algolia-results {
+  height: calc(100% - 50px);
+  overflow: auto;
+  padding: 10px 30px;
+  position: relative;
+
+  hr {
+    margin: 10px 0;
+  }
+
+  .highlight {
+    color: red;
+    font-size: inherit;
+    font-style: normal;
+    margin: 0;
+    padding: 0 2px;
+  }
+}
+
+.algolia-hits {
+  margin-top: 20px;
+}
+
+.algolia-hit-item {
+  margin: 15px 0;
+}
+
+.algolia-hit-item-link {
+  border-bottom: 1px dashed #ccc;
+  display: block;
+  the-transition();
+}
+
+.algolia-pagination {
+  .pagination {
+    border-top: none;
+    margin: 40px 0;
+    opacity: 1;
+    padding: 0;
+  }
+
+  .pagination-item {
+    display: inline-block;
+  }
+
+  .page-number {
+    border-top: none;
+
+    &:hover {
+      border-bottom: 1px solid $black-deep;
+    }
+  }
+
+  .current .page-number {
+    @extend .pagination .page-number.current;
+  }
+
+  .disabled-item {
+    visibility: hidden;
+  }
+}
diff --git a/source/css/_common/components/third-party/gitalk.styl b/source/css/_common/components/third-party/gitalk.styl
index e411a3a13e..7c4ae6953a 100644
--- a/source/css/_common/components/third-party/gitalk.styl
+++ b/source/css/_common/components/third-party/gitalk.styl
@@ -1,4 +1,7 @@
-.gt-header a, .gt-comments a, .gt-popup a
+.gt-header a, .gt-comments a, .gt-popup a {
   border-bottom: none;
-.gt-container .gt-popup .gt-action.is--active::before
-  top: 0.7em;
+}
+
+.gt-container .gt-popup .gt-action.is--active::before {
+  top: .7em;
+}
diff --git a/source/css/_common/components/third-party/localsearch.styl b/source/css/_common/components/third-party/localsearch.styl
index df8f638903..b7a8cf8517 100644
--- a/source/css/_common/components/third-party/localsearch.styl
+++ b/source/css/_common/components/third-party/localsearch.styl
@@ -1,101 +1,117 @@
-.local-search-pop-overlay
-  position: fixed
-  width: 100%
-  height: 100%
-  top: 0
-  left: 0
-  z-index: 2080
-  background-color: rgba(0, 0, 0, 0.3)
+.local-search-pop-overlay {
+  background-color: rgba(0, 0, 0, .3);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2080;
+}
 
-.local-search-popup
-  display: none
-  position: fixed
-  top: 10%
-  left: 50%
-  margin-left: -350px
-  width: 700px
-  height: 80%
-  padding: 0
-  background: #fff
-  color: #333
-  z-index: 9999
-  border-radius: 5px
-  +mobile()
-    padding: 0
-    top: 0
-    left: 0
-    margin: 0
-    width: 100%
-    height: 100%
-    border-radius: 0
+.local-search-popup {
+  background: #fff;
+  border-radius: 5px;
+  color: #333;
+  display: none;
+  height: 80%;
+  left: 50%;
+  margin-left: -350px;
+  padding: 0;
+  position: fixed;
+  top: 10%;
+  width: 700px;
+  z-index: 9999;
 
-  ul.search-result-list
-    padding: 0
-    margin: 0 5px
+  +mobile() {
+    border-radius: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    width: 100%;
+  }
 
-  p.search-result
-    border-bottom: 1px dashed #ccc
-    padding: 5px 0
+  ul.search-result-list {
+    margin: 0 5px;
+    padding: 0;
+  }
 
-  a.search-result-title
-    font-weight: bold
+  p.search-result {
+    border-bottom: 1px dashed #ccc;
+    padding: 5px 0;
+  }
 
-  .search-keyword
-    border-bottom: 1px dashed #f00
-    font-weight: bold
-    color: #f00
+  a.search-result-title {
+    font-weight: bold;
+  }
 
-  .local-search-header
-    padding: 5px
-    height: 36px
-    background: #f5f5f5
-    border-top-left-radius: 5px
-    border-top-right-radius: 5px
+  .search-keyword {
+    border-bottom: 1px dashed #f00;
+    color: #f00;
+    font-weight: bold;
+  }
 
-  #local-search-result
-    overflow: auto
-    position: relative
-    padding: 5px 25px
-    height: calc(100% - 55px)
+  .local-search-header {
+    background: #f5f5f5;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    height: 36px;
+    padding: 5px;
+  }
 
-  .local-search-input-wrapper
-    display: inline-block
-    position: absolute
-    width: calc(100% - 90px)
-    height: 36px
-    line-height: 36px
-    padding: 0 5px
+  #local-search-result {
+    height: calc(100% - 55px);
+    overflow: auto;
+    padding: 5px 25px;
+    position: relative;
+  }
 
-  .local-search-input-wrapper input
-    padding: 8px 0
-    height: 20px
-    display: block
-    width: 100%
-    outline: none
-    border: none
-    background: transparent
-    vertical-align: middle
+  .local-search-input-wrapper {
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 5px;
+    position: absolute;
+    width: calc(100% - 90px);
+  }
 
-  .search-icon, .popup-btn-close
-    display: inline-block
-    font-size: 18px
-    color: #999
-    height: 36px
-    width: 18px
-    padding-left: 10px
-    padding-right: 10px
+  .local-search-input-wrapper input {
+    background: transparent;
+    border: none;
+    display: block;
+    height: 20px;
+    outline: none;
+    padding: 8px 0;
+    vertical-align: middle;
+    width: 100%;
+  }
 
-  .search-icon
-    float: left
+  .search-icon, .popup-btn-close {
+    color: #999;
+    display: inline-block;
+    font-size: 18px;
+    height: 36px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 18px;
+  }
 
-  .popup-btn-close
-    border-left: 1px solid #eee
-    float: right
-    cursor: pointer
+  .search-icon {
+    float: left;
+  }
 
-  #no-result
-    position: absolute
-    left: 50%
-    top: 50%
-    transform: translate(-50%, -50%)
-    color: #ccc
+  .popup-btn-close {
+    border-left: 1px solid #eee;
+    cursor: pointer;
+    float: right;
+  }
+
+  #no-result {
+    color: #ccc;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
diff --git a/source/css/_common/components/third-party/needsharebutton.styl b/source/css/_common/components/third-party/needsharebutton.styl
index c3c93001d9..a00dd08ede 100644
--- a/source/css/_common/components/third-party/needsharebutton.styl
+++ b/source/css/_common/components/third-party/needsharebutton.styl
@@ -1,28 +1,28 @@
 #needsharebutton-postbottom {
-  position: relative;
-  margin-top: 10px;
   cursor: pointer;
   height: 26px;
+  margin-top: 10px;
+  position: relative;
 
   .btn {
-    display: initial;
-    padding: 1px 4px;
     border: 1px solid $btn-default-border-color;
     border-radius: 3px;
+    display: initial;
+    padding: 1px 4px;
   }
 }
 
 #needsharebutton-float {
-    position: fixed;
-    bottom: 88px;
-    left: -8px;
-    z-index: 9999;
-    cursor: pointer;
+  bottom: 88px;
+  cursor: pointer;
+  left: -8px;
+  position: fixed;
+  z-index: 9999;
 
   .btn {
-    //display: initial;
-    padding: 0 10px 0 14px;
     border: 1px solid $btn-default-border-color;
     border-radius: 4px;
+    // display: initial;
+    padding: 0 10px 0 14px;
   }
 }
diff --git a/source/css/_common/components/third-party/related-posts.styl b/source/css/_common/components/third-party/related-posts.styl
index ab3aa99e32..ae48bce700 100644
--- a/source/css/_common/components/third-party/related-posts.styl
+++ b/source/css/_common/components/third-party/related-posts.styl
@@ -1,9 +1,9 @@
 .popular-posts-header {
-  margin-top: $post-eof-margin-bottom;
-  margin-bottom: 10px;
-  font-size: $font-size-headings-base;
   border-bottom: 1px solid $gainsboro;
   display: block;
+  font-size: $font-size-large;
+  margin-bottom: 10px;
+  margin-top: $post-eof-margin-bottom;
 }
 
 ul.popular-posts {
@@ -12,11 +12,12 @@ ul.popular-posts {
   .popular-posts-item {
     // list-style: none;
     margin-left: 2em;
+
     .popular-posts-title {
-      font-weight: normal;
       font-size: $font-size-small;
-      margin: 0;
+      font-weight: normal;
       line-height: $line-height-base * 1.2;
+      margin: 0;
     }
   }
 }
diff --git a/source/css/_common/components/third-party/third-party.styl b/source/css/_common/components/third-party/third-party.styl
index 91a1e34419..a1257bde27 100644
--- a/source/css/_common/components/third-party/third-party.styl
+++ b/source/css/_common/components/third-party/third-party.styl
@@ -1,6 +1,11 @@
-@import "gitalk" if hexo-config('gitalk.enable');
-@import "localsearch" if hexo-config('local_search.enable');
-@import "algolia-search" if hexo-config('algolia_search.enable');
-@import "needsharebutton" if hexo-config('needmoreshare2.enable');
-@import "related-posts" if hexo-config('related_posts.enable');
-@import "math" if hexo-config('math.enable') and hexo-config('math.engine') == 'mathjax';
+@import 'gitalk' if (hexo-config('gitalk.enable'));
+
+@import 'localsearch' if (hexo-config('local_search.enable'));
+
+@import 'algolia-search' if (hexo-config('algolia_search.enable'));
+
+@import 'needsharebutton' if (hexo-config('needmoreshare2.enable'));
+
+@import 'related-posts' if (hexo-config('related_posts.enable'));
+
+@import 'math' if (hexo-config('math.enable') && hexo-config('math.engine') == 'mathjax');
diff --git a/source/css/_common/outline/outline.styl b/source/css/_common/outline/outline.styl
index b0ac5f36a1..17228369b7 100644
--- a/source/css/_common/outline/outline.styl
+++ b/source/css/_common/outline/outline.styl
@@ -1,17 +1,16 @@
-//
+// 
 // Layout
 // Note: Must name this file "outline" instead of "layout"
-//       Or Hexo will use it as template layout.
+// Or Hexo will use it as template layout.
 // =================================================
-
-
-html, body { height: 100%; }
+html, body {
+  height: 100%;
+}
 
 .container {
   position: relative;
 }
 
-
 // Header Section
 // --------------------------------------------------
 .header-inner {
@@ -20,14 +19,18 @@ html, body { height: 100%; }
   width: $content-desktop;
 
   +desktop-large() {
-    .container & { width: $content-desktop-large; }
+    .container & {
+      width: $content-desktop-large;
+    }
   }
+
   +desktop-largest() {
-    .container & { width: $content-desktop-largest; }
+    .container & {
+      width: $content-desktop-largest;
+    }
   }
 }
 
-
 // Main Section
 // --------------------------------------------------
 .main-inner {
@@ -35,28 +38,38 @@ html, body { height: 100%; }
   width: $content-desktop;
 
   +desktop-large() {
-    .container & { width: $content-desktop-large; }
+    .container & {
+      width: $content-desktop-large;
+    }
   }
+
   +desktop-largest() {
-    .container & { width: $content-desktop-largest; }
+    .container & {
+      width: $content-desktop-largest;
+    }
   }
 }
 
-
 // Footer Section
 // --------------------------------------------------
 .footer {
   padding: 20px 0;
 }
+
 .footer-inner {
   box-sizing: border-box;
-  margin: 0px auto;
+  margin: 0 auto;
   width: $content-desktop;
 
   +desktop-large() {
-    .container & { width: $content-desktop-large; }
+    .container & {
+      width: $content-desktop-large;
+    }
   }
+
   +desktop-largest() {
-    .container & { width: $content-desktop-largest; }
+    .container & {
+      width: $content-desktop-largest;
+    }
   }
 }
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index f35849eb28..64b9f0b852 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -4,12 +4,12 @@
 }
 
 body {
-  position: relative; // Required by scrollspy
+  background: $body-bg-color;
+  color: $text-color;
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
-  color: $text-color;
-  background: $body-bg-color;
+  position: relative; // Required by scrollspy
 
   +tablet-mobile() {
     padding-right: 0 !important;
@@ -17,33 +17,35 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 20px 0 15px;
-  padding: 0;
+  font-family: $font-family-headings;
   font-weight: bold;
   line-height: 1.5;
-  font-family: $font-family-headings;
+  margin: 20px 0 15px;
+  padding: 0;
 }
 
-for headline in (1..6) {
+for headline in (1 .. 6) {
   h{headline} {
     font-size: $font-size-headings-base - $font-size-headings-step * headline;
   }
 }
 
-p { margin: 0 0 20px 0; }
+p {
+  margin: 0 0 20px 0;
+}
 
 a, span.exturl {
   word-wrap();
   // Remove the gray background color from active links in IE 10.
   background-color: transparent;
+  border-bottom: 1px solid $link-decoration-color;
   color: $link-color;
-  text-decoration: none;
   outline: none;
-  border-bottom: 1px solid $link-decoration-color;
+  text-decoration: none;
 
   &:hover {
-    color: $link-hover-color;
     border-bottom-color: $link-decoration-hover-color;
+    color: $link-hover-color;
   }
 
   // For spanned external links.
@@ -51,23 +53,20 @@ a, span.exturl {
 }
 
 video {
-  max-width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  max-width: 100%;
 }
 
 img {
   display: block;
+  height: auto;
   margin: auto;
   max-width: 100%;
-  height: auto;
 }
 
 hr {
-  margin: 40px 0;
-  height: 3px;
-  border: none;
   background-color: $gray-lighter;
   background-image: repeating-linear-gradient(
     -45deg,
@@ -76,19 +75,23 @@ hr {
     transparent 4px,
     transparent 8px
   );
+  border: none;
+  height: 3px;
+  margin: 40px 0;
 }
 
 blockquote {
+  border-left: 4px solid $gray-lighter;
+  color: $grey-dim;
   margin: 0;
   padding: 0 15px;
-  color: $grey-dim;
-  border-left: 4px solid $gray-lighter;
+
   p {
     font-family: STKaiti, KaiTi, $font-family-posts;
   }
 
   cite::before {
-    content: "-";
+    content: '-';
     padding: 0 5px;
   }
 }
@@ -103,12 +106,12 @@ dd {
 }
 
 kbd {
-  border: 1px solid $grey-light;
-  border-radius: 0.2em;
-  box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
   background-color: #f9f9f9;
-  font-family: inherit;
   background-image: linear-gradient(top, #eee, white, #eee);
-  padding: 0.1em 0.3em;
+  border: 1px solid $grey-light;
+  border-radius: .2em;
+  box-shadow: .1em .1em .2em rgba(0, 0, 0, .1);
+  font-family: inherit;
+  padding: .1em .3em;
   white-space: nowrap;
 }
diff --git a/source/css/_common/scaffolding/helpers.styl b/source/css/_common/scaffolding/helpers.styl
index c2efa07f07..fdd5997010 100644
--- a/source/css/_common/scaffolding/helpers.styl
+++ b/source/css/_common/scaffolding/helpers.styl
@@ -1,21 +1,40 @@
-//
+// 
 // Helpers
 // =================================================
 
-
 // Alignment
-.text-left    { text-align: left; }
-.text-center  { text-align: center; }
-.text-right   { text-align: right; }
-.text-justify { text-align: justify; }
-.text-nowrap  { white-space: nowrap; }
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
 
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
 
 // Transformation
-.text-lowercase  { text-transform: lowercase; }
-.text-uppercase  { text-transform: uppercase; }
-.text-capitalize { text-transform: capitalize; }
+.text-lowercase {
+  text-transform: lowercase;
+}
 
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
 
 // Center-align a block level element.
 .center-block {
@@ -24,7 +43,6 @@
   margin-right: auto;
 }
 
-
 // Clearfix. http://nicolasgallagher.com/micro-clearfix-hack/
 .clearfix {
   clearfix();
@@ -51,18 +69,20 @@
 }
 
 .translation {
-  margin-top: -20px;
-  font-size: $font-size-small;
   color: $grey-dark;
+  font-size: $font-size-small;
+  margin-top: -20px;
 }
 
 // https://davidwalsh.name/detect-scrollbar-width
 .scrollbar-measure {
-  width: 100px;
   height: 100px;
   overflow: scroll;
   position: absolute;
   top: -9999px;
+  width: 100px;
 }
 
-.use-motion .motion-element { opacity: 0; }
+.use-motion .motion-element {
+  opacity: 0;
+}
diff --git a/source/css/_common/scaffolding/mobile.styl b/source/css/_common/scaffolding/mobile.styl
index 75467d17f5..9e54d5cc00 100644
--- a/source/css/_common/scaffolding/mobile.styl
+++ b/source/css/_common/scaffolding/mobile.styl
@@ -19,14 +19,12 @@
 
 }
 */
-
-// < 567px
 +mobile-small() {
-
   // For Muse & Mist schemes only vertical economy.
   .header-inner {
     margin-bottom: initial !important;
   }
+
   .main-inner {
     margin-top: initial !important;
   }
@@ -38,9 +36,9 @@
 
   // For all schemes wider width.
   .posts-expand {
-    padding-top: $content-mobile-padding !important;
     // For Muse & Mist & Pisces schemes only wider width.
     margin: initial !important;
+    padding-top: $content-mobile-padding !important;
 
     .post-header {
       padding: 0 18px;
@@ -49,13 +47,12 @@
     .post-meta {
       margin: 3px 0 10px 0 !important;
     }
-
   }
 
   .post-block {
+    margin-top: initial !important;
     // Inside posts blocks content padding (default 40px).
     padding: $content-mobile-padding 0 !important;
-    margin-top: initial !important;
   }
 
   .post-body {
@@ -63,6 +60,7 @@
     h1, h2, h3, h4, h5, h6 {
       margin: 10px 18px 8px;
     }
+
     // Rewrite paddings & margins inside tags.
     .note, .tabs .tab-content .tab-pane {
       h1, h2, h3, h4, h5, h6 {
@@ -102,19 +100,20 @@
     }
 
     .video-container .fluid-vids {
-      margin-bottom:  10px !important;
+      margin-bottom: 10px !important;
     }
 
     .note {
-      padding:        10px !important;
-      margin-bottom:  10px !important;
+      margin-bottom: 10px !important;
+      padding: 10px !important;
 
-      if hexo-config('note.icons') {
+      if (hexo-config('note.icons')) {
         &:not(.no-icon) {
           padding-left: 35px !important;
+
           &::before {
-            top:       8px !important;
-            left:     12px !important;
+            left: 12px !important;
+            top: 8px !important;
           }
         }
       }
@@ -127,9 +126,8 @@
 
   .post-nav {
     padding-bottom: 2px;
-    //padding: 2px 8px;
+    // padding: 2px 8px;
   }
-
 }
 
 /*
diff --git a/source/css/_common/scaffolding/normalize.styl b/source/css/_common/scaffolding/normalize.styl
index 192eb9ce43..47e425560c 100644
--- a/source/css/_common/scaffolding/normalize.styl
+++ b/source/css/_common/scaffolding/normalize.styl
@@ -1,25 +1,20 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
+/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
-   ========================================================================== */
-
+========================================================================== */
 /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
-
 html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
-   ========================================================================== */
-
+========================================================================== */
 /**
  * Remove the margin in all browsers.
  */
-
 body {
   margin: 0;
 }
@@ -27,7 +22,6 @@ body {
 /**
  * Render the `main` element consistently in IE.
  */
-
 main {
   display: block;
 }
@@ -36,20 +30,17 @@ main {
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
-
 h1 {
   font-size: 2em;
-  margin: 0.67em 0;
+  margin: .67em 0;
 }
 
 /* Grouping content
-   ========================================================================== */
-
+========================================================================== */
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
-
 hr {
   box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
@@ -60,19 +51,16 @@ hr {
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
-
 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
-   ========================================================================== */
-
+========================================================================== */
 /**
  * Remove the gray background on active links in IE 10.
  */
-
 a {
   background-color: transparent;
 }
@@ -81,7 +69,6 @@ a {
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
-
 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
@@ -91,9 +78,7 @@ abbr[title] {
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
-
-b,
-strong {
+b, strong {
   font-weight: bolder;
 }
 
@@ -101,10 +86,7 @@ strong {
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
-
-code,
-kbd,
-samp {
+code, kbd, samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
@@ -112,7 +94,6 @@ samp {
 /**
  * Add the correct font size in all browsers.
  */
-
 small {
   font-size: 80%;
 }
@@ -121,9 +102,7 @@ small {
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
-
-sub,
-sup {
+sub, sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -131,37 +110,29 @@ sup {
 }
 
 sub {
-  bottom: -0.25em;
+  bottom: -.25em;
 }
 
 sup {
-  top: -0.5em;
+  top: -.5em;
 }
 
 /* Embedded content
-   ========================================================================== */
-
+========================================================================== */
 /**
  * Remove the border on images inside links in IE 10.
  */
-
 img {
   border-style: none;
 }
 
 /* Forms
-   ========================================================================== */
-
+========================================================================== */
 /**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
-
-button,
-input,
-optgroup,
-select,
-textarea {
+button, input, optgroup, select, textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
@@ -172,9 +143,8 @@ textarea {
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
-
-button,
-input { /* 1 */
+button, input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -182,31 +152,22 @@ input { /* 1 */
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
-
-button,
-select { /* 1 */
+button, select {
+  /* 1 */
   text-transform: none;
 }
 
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+button, [type='button'], [type='reset'], [type='submit'] {
   -webkit-appearance: button;
 }
 
 /**
  * Remove the inner border and padding in Firefox.
  */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -214,20 +175,15 @@ button::-moz-focus-inner,
 /**
  * Restore the focus styles unset by the previous rule.
  */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 /**
  * Correct the padding in Firefox.
  */
-
 fieldset {
-  padding: 0.35em 0.75em 0.625em;
+  padding: .35em .75em .625em;
 }
 
 /**
@@ -236,7 +192,6 @@ fieldset {
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
-
 legend {
   box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
@@ -249,7 +204,6 @@ legend {
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
-
 progress {
   vertical-align: baseline;
 }
@@ -257,7 +211,6 @@ progress {
 /**
  * Remove the default vertical scrollbar in IE 10+.
  */
-
 textarea {
   overflow: auto;
 }
@@ -266,9 +219,7 @@ textarea {
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */
-
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'], [type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -276,9 +227,7 @@ textarea {
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -286,17 +235,15 @@ textarea {
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+[type='search'] {
   outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield; /* 1 */
 }
 
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
-
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -304,19 +251,16 @@ textarea {
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
-
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
 }
 
 /* Interactive
-   ========================================================================== */
-
+========================================================================== */
 /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
-
 details {
   display: block;
 }
@@ -324,18 +268,15 @@ details {
 /*
  * Add the correct display in all browsers.
  */
-
 summary {
   display: list-item;
 }
 
 /* Misc
-   ========================================================================== */
-
+========================================================================== */
 /**
  * Add the correct display in IE 10+.
  */
-
 template {
   display: none;
 }
@@ -343,7 +284,6 @@ template {
 /**
  * Add the correct display in IE 10.
  */
-
 [hidden] {
   display: none;
 }
diff --git a/source/css/_common/scaffolding/scaffolding.styl b/source/css/_common/scaffolding/scaffolding.styl
index b5d3500250..234b9e694a 100644
--- a/source/css/_common/scaffolding/scaffolding.styl
+++ b/source/css/_common/scaffolding/scaffolding.styl
@@ -1,9 +1,9 @@
-//
+// 
 // Scaffolding
 // =================================================
+@import 'normalize';
+@import 'base';
+@import 'helpers';
+@import 'tables';
 
-@import "normalize";
-@import "base";
-@import "helpers";
-@import "tables";
-@import "mobile" if hexo-config('mobile_layout_economy');
+@import 'mobile' if (hexo-config('mobile_layout_economy'));
diff --git a/source/css/_common/scaffolding/tables.styl b/source/css/_common/scaffolding/tables.styl
index 91ae458213..91bcf39c5a 100644
--- a/source/css/_common/scaffolding/tables.styl
+++ b/source/css/_common/scaffolding/tables.styl
@@ -5,26 +5,31 @@
 }
 
 .highlight .table-container {
-  margin: 0px;
+  margin: 0;
 }
 
 table {
-  width: $table-width;
   border-collapse: collapse;
   border-spacing: 0;
   font-size: $table-font-size;
+  width: $table-width;
 }
 
 table > tbody > tr {
-  &:nth-of-type(odd) { background-color: $table-row-odd-bg-color; }
-  &:hover { background-color: $table-row-hover-bg-color; }
+  &:nth-of-type(odd) {
+    background-color: $table-row-odd-bg-color;
+  }
+
+  &:hover {
+    background-color: $table-row-hover-bg-color;
+  }
 }
 
 caption, th, td {
+  font-weight: normal;
   padding: $table-cell-padding;
   text-align: $table-content-alignment;
   vertical-align: $table-content-vertical;
-  font-weight: normal;
 }
 
 th, td {
@@ -33,8 +38,8 @@ th, td {
 }
 
 th {
-  padding-bottom: 10px;
   font-weight: $table-th-font-weight;
+  padding-bottom: 10px;
 }
 
 td {
diff --git a/source/css/_mixins/Gemini.styl b/source/css/_mixins/Gemini.styl
index eb4102ee2e..08a3853253 100644
--- a/source/css/_mixins/Gemini.styl
+++ b/source/css/_mixins/Gemini.styl
@@ -1 +1 @@
-@import "Pisces.styl";
+@import 'Pisces.styl';
diff --git a/source/css/_mixins/Pisces.styl b/source/css/_mixins/Pisces.styl
index 5ccc1db9bd..6c8e2d7b43 100644
--- a/source/css/_mixins/Pisces.styl
+++ b/source/css/_mixins/Pisces.styl
@@ -1,16 +1,19 @@
 sidebar-inline-links-item() {
   margin: 5px 0 0;
-  if !hexo-config('social_icons.icons_only') { width: 50%; }
+
+  if (!hexo-config('social_icons.icons_only')) {
+    width: 50%;
+  }
 
   & a, span.exturl {
-    max-width: 216px;
     box-sizing: border-box;
     display: inline-block;
-    margin-right: 0;
     margin-bottom: 0;
-    padding: 0 5px;
+    margin-right: 0;
+    max-width: 216px;
     overflow: hidden;
-    white-space: nowrap;
+    padding: 0 5px;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
diff --git a/source/css/_mixins/base.styl b/source/css/_mixins/base.styl
index 14d520302e..e554320dfc 100644
--- a/source/css/_mixins/base.styl
+++ b/source/css/_mixins/base.styl
@@ -1,66 +1,66 @@
 the-transition() {
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
   transition-delay: 0s;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
 }
 
 the-transition-ease-in() {
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in;
   transition-delay: 0s;
+  transition-duration: .2s;
+  transition-timing-function: ease-in;
 }
 
 the-transition-ease-out() {
-  transition-duration: 0.2s;
-  transition-timing-function: ease-out;
   transition-delay: 0s;
+  transition-duration: .2s;
+  transition-timing-function: ease-out;
 }
 
 mobile-smallest() {
   @media (max-width: 413px) {
-    {block}
+    {block};
   }
 }
 
 mobile-small() {
   @media (max-width: 567px) {
-    {block}
+    {block};
   }
 }
 
 mobile() {
   @media (max-width: 767px) {
-    {block}
+    {block};
   }
 }
 
 tablet-mobile() {
   @media (max-width: 991px) {
-    {block}
+    {block};
   }
 }
 
 tablet() {
   @media (min-width: 768px) and (max-width: 991px) {
-    {block}
+    {block};
   }
 }
 
 desktop() {
   @media (min-width: 992px) {
-    {block}
+    {block};
   }
 }
 
 desktop-large() {
   @media (min-width: 1200px) {
-    {block}
+    {block};
   }
 }
 
 desktop-largest() {
   @media (min-width: 1600px) {
-    {block}
+    {block};
   }
 }
 
@@ -82,12 +82,14 @@ random-color($min, $max) {
 
 // Clearfix. http://nicolasgallagher.com/micro-clearfix-hack/
 clearfix() {
-  &::before,
-  &::after {
-    content: " ";
+  &::before, &::after {
+    content: ' ';
     display: table;
   }
-  &::after { clear: both; }
+
+  &::after {
+    clear: both;
+  }
 }
 
 word-wrap() {
@@ -97,7 +99,7 @@ word-wrap() {
 
 disable-touch-hover() {
   // To prevent hover on external links with touch devices after click.
-  @media (hover:none) {
+  @media (hover: none) {
     &:hover {
       background: none;
     }
@@ -105,8 +107,8 @@ disable-touch-hover() {
 }
 
 disable-user-select() {
-  -webkit-user-select: none;
+  user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none;
+  -webkit-user-select: none;
 }
diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl
index 3852c15e05..d3231896fd 100644
--- a/source/css/_schemes/Gemini/index.styl
+++ b/source/css/_schemes/Gemini/index.styl
@@ -1,8 +1,8 @@
-@import "../Pisces/_layout";
-@import "../Pisces/_brand";
-@import "../Pisces/_menu";
-@import "../Pisces/_sub-menu";
-@import "../Pisces/_sidebar";
+@import '../Pisces/_layout';
+@import '../Pisces/_brand';
+@import '../Pisces/_menu';
+@import '../Pisces/_sub-menu';
+@import '../Pisces/_sidebar';
 
 // =================================================
 // Rewrite _layout.styl
@@ -21,56 +21,61 @@
 // So, it will 12px in Desktop, 10px in Tablets and 8px in Mobiles for all possible paddings.
 // =================================================
 // Read values from NexT config and set they as local variables to use as string variables (in any CSS section).
-use_seo = hexo-config('seo');
+$use-seo = hexo-config('seo');
 
 // =================================================
 // Desktop layout styles.
 // =================================================
 // Post blocks.
 .content-wrap {
-  padding: initial;
   background: initial;
-  box-shadow: initial;
   border-radius: initial;
+  box-shadow: initial;
+  padding: initial;
 }
 
 // Post & Comments blocks.
 .post-block {
-  padding: $content-desktop-padding;
   background: white;
-  box-shadow: $box-shadow-inner;
   border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
+  padding: $content-desktop-padding;
 }
 
 // When blocks are siblings (homepage).
 #posts > article + article {
   .post-block {
-    margin-top: $sidebar-offset;
+    border-radius: $border-radius;
     // Rewrite shadows & borders because all blocks have offsets.
     box-shadow: $box-shadow;
-    border-radius: $border-radius;
+    margin-top: $sidebar-offset;
   }
 }
 
 // Comments blocks.
 .comments {
-  padding: $content-desktop-padding;
-  margin: auto;
-  margin-top: $sidebar-offset;
   background: white;
-  box-shadow: $box-shadow;
   border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  margin: auto;
+  margin-top: $sidebar-offset;
+  padding: $content-desktop-padding;
 }
 
 // Top main padding from header to posts (default 40px).
 .posts-expand {
   padding-top: initial;
+
+  .post-title-link {
+    line-height: inherit;
+  }
 }
 
 // Post navigation items.
 .post-nav-divider {
   width: 4%;
 }
+
 .post-nav-item {
   width: 48%;
 }
@@ -86,11 +91,12 @@ use_seo = hexo-config('seo');
     margin-bottom: initial;
     top: initial;
   }
-  margin: $sidebar-offset 0 0;
-  border-top: initial;
+
   background: white;
-  box-shadow: $box-shadow;
   border-radius: $border-radius;
+  border-top: initial;
+  box-shadow: $box-shadow;
+  margin: $sidebar-offset 0 0;
   padding: 10px 0 10px;
 }
 
@@ -98,6 +104,7 @@ use_seo = hexo-config('seo');
 .main {
   padding-bottom: initial;
 }
+
 .footer {
   bottom: auto;
 }
@@ -106,14 +113,17 @@ use_seo = hexo-config('seo');
 .sub-menu {
   border-bottom: initial !important;
   box-shadow: $box-shadow-inner;
+
   // Adapt submenu(s) with post-blocks.
   &+ #content > #posts {
     .post-block {
       box-shadow: $box-shadow;
       margin-top: $sidebar-offset;
+
       +tablet() {
         margin-top: $content-tablet-padding;
       }
+
       +mobile() {
         margin-top: $content-mobile-padding;
       }
@@ -124,23 +134,21 @@ use_seo = hexo-config('seo');
 // =================================================
 // Headers.
 // =================================================
-.posts-expand .post-title-link {
-  line-height: inherit;
-}
-
 .post-body {
   h1, h2 {
     border-bottom: 1px solid $body-bg-color;
   }
+
   h3 {
-    if use_seo {
+    if ($use-seo) {
       border-bottom: 1px solid $body-bg-color;
     } else {
       border-bottom: 1px dotted $body-bg-color;
     }
   }
+
   h4 {
-    if use_seo {
+    if ($use-seo) {
       border-bottom: 1px dotted $body-bg-color;
     }
   }
@@ -150,11 +158,11 @@ use_seo = hexo-config('seo');
 // > 768px & < 991px
 // =================================================
 +tablet() {
-
   // Posts in blocks.
   .content-wrap {
     padding: $content-tablet-padding;
   }
+
   .posts-expand {
     margin: initial;
 
@@ -165,11 +173,11 @@ use_seo = hexo-config('seo');
   }
 
   .post-block {
-    // Inside posts blocks content padding (default 40px).
-    padding: ($content-tablet-padding * 2);
+    border-radius: $border-radius;
     // Rewrite shadows & borders because all blocks have offsets.
     box-shadow: $box-shadow;
-    border-radius: $border-radius;
+    // Inside posts blocks content padding (default 40px).
+    padding: ($content-tablet-padding * 2);
   }
 
   // Only if blocks are siblings need bottom margin (homepage).
@@ -182,43 +190,44 @@ use_seo = hexo-config('seo');
   .comments {
     margin-top: $content-tablet-padding;
     padding: $content-tablet-padding ($content-tablet-padding * 2);
-    //padding: initial;
-    //padding-top: $content-tablet-padding;
+    // padding: initial;
+    // padding-top: $content-tablet-padding;
   }
 
   .pagination {
     margin: $content-tablet-padding 0 0;
   }
-
 }
+
 // =================================================
 // < 767px
 // =================================================
 +mobile() {
-
   // Posts in blocks.
   .content-wrap {
     padding: $content-mobile-padding;
   }
+
   .posts-expand {
     margin: initial;
 
     // Components inside Posts.
     .post-button {
-      margin: $sidebar-offset 0px;
+      margin: $sidebar-offset 0;
     }
+
     img {
       padding: initial !important;
     }
   }
 
   .post-block {
-    // Inside posts blocks content padding (default 40px).
-    padding: $sidebar-offset;
-    min-height: auto;
+    border-radius: $border-radius;
     // Rewrite shadows & borders because all blocks have offsets.
     box-shadow: $box-shadow;
-    border-radius: $border-radius;
+    min-height: auto;
+    // Inside posts blocks content padding (default 40px).
+    padding: $sidebar-offset;
   }
 
   // Only if blocks are siblings need bottom margin (homepage).
diff --git a/source/css/_schemes/Mist/_base.styl b/source/css/_schemes/Mist/_base.styl
index cf2f438fce..f36b49b8a8 100644
--- a/source/css/_schemes/Mist/_base.styl
+++ b/source/css/_schemes/Mist/_base.styl
@@ -1,9 +1,10 @@
 // Tags
 // --------------------------------------------------
-
-a { border-bottom-color: $grey-light; }
+a {
+  border-bottom-color: $grey-light;
+}
 
 hr {
-  margin: 20px 0;
   height: 2px;
+  margin: 20px 0;
 }
diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl
index 6c2df79666..0314a02d27 100644
--- a/source/css/_schemes/Mist/_header.styl
+++ b/source/css/_schemes/Mist/_header.styl
@@ -1,62 +1,78 @@
 // Header
 // --------------------------------------------------
-.header { background: $whitesmoke; }
+.header {
+  background: $whitesmoke;
+}
+
 .header-inner {
   clearfix();
-  padding: 20px 0;
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: center;
+  padding: 20px 0;
 
   +mobile() {
     display: block;
-    width: auto;
     padding: 10px;
+    width: auto;
   }
 }
 
 .site-meta {
   float: left;
-  margin-left: -20px;
   line-height: normal;
+  margin-left: -20px;
 
   +mobile() {
     margin-left: 10px;
   }
 
   .brand {
-    padding: 2px 1px;
     background: none;
+    padding: 2px 1px;
 
-    +mobile() { display: block; }
+    +mobile() {
+      display: block;
+    }
   }
 
-  .logo { display: none; }
+  .logo {
+    display: none;
+  }
 
   .site-title {
     font-weight: bolder;
   }
 }
 
-.logo-line-before,
-.logo-line-after {
+.logo-line-before, .logo-line-after {
   display: block;
-  overflow: hidden;
   margin: 0 auto;
+  overflow: hidden;
   width: 75%;
 
-  +mobile() { display: none; }
+  +mobile() {
+    display: none;
+  }
 
   i {
-    position: relative;
+    background: $black-deep;
     display: block;
     height: 2px;
-    background: $black-deep;
-    +mobile() { height: 3px; }
+    position: relative;
+
+    +mobile() {
+      height: 3px;
+    }
   }
 }
 
 .use-motion {
-  .logo-line-before i { left: -100%; }
-  .logo-line-after i { right: -100%; }
+  .logo-line-before i {
+    left: -100%;
+  }
+
+  .logo-line-after i {
+    right: -100%;
+  }
 }
diff --git a/source/css/_schemes/Mist/_logo.styl b/source/css/_schemes/Mist/_logo.styl
index 571b407073..617d35839d 100644
--- a/source/css/_schemes/Mist/_logo.styl
+++ b/source/css/_schemes/Mist/_logo.styl
@@ -1 +1,3 @@
-.site-subtitle { display: none; }
+.site-subtitle {
+  display: none;
+}
diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl
index 36b7f75693..54df3a357c 100644
--- a/source/css/_schemes/Mist/_menu.styl
+++ b/source/css/_schemes/Mist/_menu.styl
@@ -5,13 +5,14 @@
 }
 
 .site-nav-toggle {
-  position: static;
   float: right;
+  position: static;
   top: 10px;
 }
 
 .site-nav {
   flex-grow: 1;
+
   +mobile() {
     transform: translateY(10px);
   }
@@ -22,7 +23,7 @@
 }
 
 .menu {
-  //float: right;
+  // float: right;
   margin: 0;
 
   +mobile() {
@@ -30,37 +31,41 @@
     padding: 0;
   }
 
-  br { display: none; }
+  br {
+    display: none;
+  }
 
   .menu-item {
     margin: 0;
+
     +mobile() {
       display: block;
       margin-top: 5px;
     }
 
     .badge {
+      background-color: #fff;
+      border-radius: 10px;
+      color: $black-light;
       display: inline-block;
-      padding: 1px 4px;
-      margin-left: 5px;
       font-weight: $font-weight-bolder;
       line-height: 1;
-      color: $black-light;
+      margin-left: 5px;
+      padding: 1px 4px;
       text-align: center;
+      text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
       white-space: nowrap;
-      background-color: #fff;
-      border-radius: 10px;
-      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
+
       +mobile() {
         float: right;
-        margin: 0.35em 0 0 0;
+        margin: .35em 0 0 0;
       }
     }
 
     a, span.exturl {
-      padding: 0 10px;
       border: none;
       border-radius: 2px;
+      padding: 0 10px;
       transition-property: background;
 
       +mobile() {
@@ -77,8 +82,13 @@
 
   a::before {
     display: none;
-    +mobile() { display: block; }
+
+    +mobile() {
+      display: block;
+    }
   }
 
-  +mobile() { float: none; }
+  +mobile() {
+    float: none;
+  }
 }
diff --git a/source/css/_schemes/Mist/_posts-expanded.styl b/source/css/_schemes/Mist/_posts-expanded.styl
index 2ee97594e5..dd5703bea3 100644
--- a/source/css/_schemes/Mist/_posts-expanded.styl
+++ b/source/css/_schemes/Mist/_posts-expanded.styl
@@ -3,37 +3,56 @@
 .posts-expand {
   padding-top: 0;
 
-  .post-title,
-  .post-meta {
+  .post-title, .post-meta {
     text-align: $site-meta-text-align;
-    +mobile() { text-align: center; }
+
+    +mobile() {
+      text-align: center;
+    }
+  }
+
+  .post-eof {
+    display: none;
+  }
+
+  .post {
+    margin-top: 120px;
   }
-  .post-eof { display: none; }
 
-  .post { margin-top: 120px; }
-  .post:first-child { margin-top: 0; }
+  .post:first-child {
+    margin-top: 0;
+  }
 
   .post-meta {
-    margin-top: 5px;
     margin-bottom: 20px;
+    margin-top: 5px;
   }
 
   .post-title:hover::before {
     background: $black-deep;
   }
+
   .post-body img {
     margin-left: 0;
   }
+
   .post-tags {
     text-align: left;
+
     a {
-      padding: 1px 5px;
       background: $whitesmoke;
       border-bottom: none;
+      padding: 1px 5px;
     }
-    a:hover { background: $grey-light; }
+
+    a:hover {
+      background: $grey-light;
+    }
+  }
+
+  .post-nav {
+    margin-top: 40px;
   }
-  .post-nav { margin-top: 40px; }
 }
 
 .post-button {
@@ -41,14 +60,16 @@
   text-align: left;
 
   a {
-    padding: 0;
-    font-size: $font-size-small;
-    //color: $grey-dim;
+    // color: $grey-dim;
     background: none;
     border: none;
     border-bottom: 2px solid $grey-dim;
+    font-size: $font-size-small;
+    padding: 0;
     transition-property: border;
 
-    &:hover { border-bottom-color: $black-deep; }
+    &:hover {
+      border-bottom-color: $black-deep;
+    }
   }
 }
diff --git a/source/css/_schemes/Mist/index.styl b/source/css/_schemes/Mist/index.styl
index 9a1122f065..80d4ce6838 100644
--- a/source/css/_schemes/Mist/index.styl
+++ b/source/css/_schemes/Mist/index.styl
@@ -1,41 +1,49 @@
-//
+// 
 // Mist scheme
 // =================================================
-
-@import "_base";
-@import "outline/outline";
-@import "_header";
-@import "_logo";
-@import "_menu";
-@import "_posts-expanded";
-@import "../Muse/sidebar/_sidebar";
-@import "../Muse/sidebar/sidebar-blogroll";
+@import '_base';
+@import 'outline/outline';
+@import '_header';
+@import '_logo';
+@import '_menu';
+@import '_posts-expanded';
+@import '../Muse/sidebar/_sidebar';
+@import '../Muse/sidebar/sidebar-blogroll';
 
 // Components
 // --------------------------------------------------
 .btn {
-  padding: 0 10px;
-  border-width: 2px;
   border-radius: 0;
+  border-width: 2px;
+  padding: 0 10px;
 }
 
-.headband { display: none; }
+.headband {
+  display: none;
+}
 
 // Page - Container
 // --------------------------------------------------
 .container .main-inner {
-  +mobile() { width: auto; }
+  +mobile() {
+    width: auto;
+  }
 }
 
 // Page - Post details
 // --------------------------------------------------
 .page-post-detail {
-  .post-title,
-  .post-meta { text-align: center; }
+  .post-title, .post-meta {
+    text-align: center;
+  }
 
-  .post-title::before { display: none; }
+  .post-title::before {
+    display: none;
+  }
 
-  .post-meta { margin-bottom: 60px; }
+  .post-meta {
+    margin-bottom: 60px;
+  }
 }
 
 // Pagination
@@ -53,17 +61,18 @@
 // Footer
 // --------------------------------------------------
 .footer {
-  margin-top: 80px;
-  padding: 10px 0;
   background: $whitesmoke;
   color: $grey-dim;
+  margin-top: 80px;
+  padding: 10px 0;
 }
+
 .footer-inner {
   margin: 0 auto;
   text-align: left;
 
   +mobile() {
-    width: auto;
     text-align: center;
+    width: auto;
   }
 }
diff --git a/source/css/_schemes/Mist/outline/outline.styl b/source/css/_schemes/Mist/outline/outline.styl
index 12c0bae253..38cd986acf 100644
--- a/source/css/_schemes/Mist/outline/outline.styl
+++ b/source/css/_schemes/Mist/outline/outline.styl
@@ -1 +1,3 @@
-.main-inner { margin-top: 80px; }
+.main-inner {
+  margin-top: 80px;
+}
diff --git a/source/css/_schemes/Muse/_layout.styl b/source/css/_schemes/Muse/_layout.styl
index b3eaf1dea9..fcbabd2377 100644
--- a/source/css/_schemes/Muse/_layout.styl
+++ b/source/css/_schemes/Muse/_layout.styl
@@ -13,5 +13,5 @@
 // embed tag
 embed {
   display: block;
-  margin: 0px auto 25px auto;
+  margin: 0 auto 25px auto;
 }
diff --git a/source/css/_schemes/Muse/_logo.styl b/source/css/_schemes/Muse/_logo.styl
index 56b784cfe8..bc1d58a1b2 100644
--- a/source/css/_schemes/Muse/_logo.styl
+++ b/source/css/_schemes/Muse/_logo.styl
@@ -8,8 +8,9 @@
   }
 
   .site-title {
-    margin: 10px auto 0;
     color: $black-deep;
+    margin: 10px auto 0;
+
     a {
       border: none;
     }
@@ -17,8 +18,8 @@
 }
 
 .custom-logo-image {
+  background: white;
   margin: 0 auto;
-  padding: 5px;
   max-width: 150px;
-  background: white;
+  padding: 5px;
 }
diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl
index 156281d713..d338317b4f 100644
--- a/source/css/_schemes/Muse/_menu.styl
+++ b/source/css/_schemes/Muse/_menu.styl
@@ -1,11 +1,11 @@
 .site-nav {
   +mobile() {
+    background: white;
+    border-bottom: 1px solid $gray-lighter;
     left: 0;
     margin: 0;
-    width: 100%;
     padding: 0;
-    background: white;
-    border-bottom: 1px solid $gray-lighter;
+    width: 100%;
     z-index: $zindex-3;
   }
 }
@@ -15,7 +15,9 @@
 }
 
 .menu {
-  +mobile() { text-align: left; }
+  +mobile() {
+    text-align: left;
+  }
 }
 
 .menu-item-active a {
@@ -35,17 +37,18 @@
   }
 
   .badge {
+    background-color: $gainsboro;
     display: inline-block;
-    padding: 1px 4px;
-    margin-left: 5px;
     font-weight: $font-weight-bolder;
     line-height: 1;
+    margin-left: 5px;
+    padding: 1px 4px;
     text-align: center;
     white-space: nowrap;
-    background-color: $gainsboro;
+
     +mobile() {
       float: right;
-      margin: 0.35em 0 0 0;
+      margin: .35em 0 0 0;
     }
   }
 
@@ -65,16 +68,18 @@
     }
 
     // To prevent hover on external links with touch devices after click.
-    @media (hover:none) {
+    @media (hover: none) {
       &:hover {
         border-bottom-color: transparent !important;
       }
     }
   }
+
   .fa {
     +tablet() {
       width: 100%;
     }
+
     +desktop() {
       width: 100%;
     }
diff --git a/source/css/_schemes/Muse/index.styl b/source/css/_schemes/Muse/index.styl
index 479c3b5d52..f3ae0685ca 100644
--- a/source/css/_schemes/Muse/index.styl
+++ b/source/css/_schemes/Muse/index.styl
@@ -1,5 +1,5 @@
-@import "_layout.styl";
-@import "_logo.styl";
-@import "_menu.styl";
-@import "sidebar/_sidebar";
-@import "sidebar/sidebar-blogroll";
+@import '_layout.styl';
+@import '_logo.styl';
+@import '_menu.styl';
+@import 'sidebar/_sidebar';
+@import 'sidebar/sidebar-blogroll';
diff --git a/source/css/_schemes/Muse/sidebar/_sidebar.styl b/source/css/_schemes/Muse/sidebar/_sidebar.styl
index 2d6ccc3b13..1651e4d671 100644
--- a/source/css/_schemes/Muse/sidebar/_sidebar.styl
+++ b/source/css/_schemes/Muse/sidebar/_sidebar.styl
@@ -1,11 +1,12 @@
 if (hexo-config('sidebar.position') == 'left') {
   .sidebar {
-    right: auto;
     left: 0;
+    right: auto;
   }
+
   .sidebar-toggle, .back-to-top {
-    right: auto;
     left: $b2t-position-right;
+    right: auto;
 
     +tablet-mobile() {
       left: $b2t-position-right-mobile;
diff --git a/source/css/_schemes/Muse/sidebar/sidebar-blogroll.styl b/source/css/_schemes/Muse/sidebar/sidebar-blogroll.styl
index 6db1ed79ba..be9a1c07de 100644
--- a/source/css/_schemes/Muse/sidebar/sidebar-blogroll.styl
+++ b/source/css/_schemes/Muse/sidebar/sidebar-blogroll.styl
@@ -1 +1,3 @@
-.links-of-blogroll-inline .links-of-blogroll-item { display: inline-block; }
+.links-of-blogroll-inline .links-of-blogroll-item {
+  display: inline-block;
+}
diff --git a/source/css/_schemes/Pisces/_brand.styl b/source/css/_schemes/Pisces/_brand.styl
index 23eb6db258..dbd43a0f6d 100644
--- a/source/css/_schemes/Pisces/_brand.styl
+++ b/source/css/_schemes/Pisces/_brand.styl
@@ -3,31 +3,32 @@
 }
 
 .site-meta {
-  padding: 20px 0;
-  color: white;
   background: $black-deep;
+  color: white;
+  padding: 20px 0;
 
   +tablet-mobile() {
-    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 16px rgba(0, 0, 0, .5);
   }
 }
 
 .brand {
-  padding: 0;
   background: none;
+  padding: 0;
 
   &:hover {
-   color: white;
+    color: white;
   }
 }
 
 .site-subtitle {
-  margin: 10px 10px 0;
   font-weight: initial;
+  margin: 10px 10px 0;
 }
 
 .custom-logo-image {
   margin-top: 20px;
+
   +tablet-mobile() {
     display: none;
   }
diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
index 9b2c5b01b9..2f3a6a5274 100644
--- a/source/css/_schemes/Pisces/_layout.styl
+++ b/source/css/_schemes/Pisces/_layout.styl
@@ -1,36 +1,41 @@
 .header {
-  position: relative;
   margin: 0 auto;
+  position: relative;
   width: $content-desktop;
 
   +desktop-large() {
     width: $content-desktop-large;
   }
+
   +desktop-largest() {
     width: $content-desktop-largest;
   }
+
   +tablet-mobile() {
     width: auto;
   }
 }
 
 .header-inner {
-  position: absolute;
-  top: 0;
+  background: white;
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
   overflow: hidden;
   padding: 0;
+  position: absolute;
+  top: 0;
   width: $sidebar-desktop;
-  background: white;
-  box-shadow: $box-shadow-inner;
-  border-radius: $border-radius-inner;
 
   +desktop-large() {
-    .container & { width: $sidebar-desktop; }
+    .container & {
+      width: $sidebar-desktop;
+    }
   }
+
   +tablet-mobile() {
+    border-radius: initial;
     position: relative;
     width: auto;
-    border-radius: initial;
   }
 }
 
@@ -39,64 +44,74 @@
 }
 
 .container .main-inner {
-
   +tablet-mobile() {
     width: auto;
   }
 }
 
 .content-wrap {
-  float: right;
+  background: white;
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
   box-sizing: border-box;
+  float: right;
+  min-height: 700px;
   padding: $content-desktop-padding;
   width: $content-wrap;
-  background: white;
-  min-height: 700px;
-  box-shadow: $box-shadow-inner;
-  border-radius: $border-radius-inner;
 
   +tablet() {
-    width: 100%;
-    padding: 20px;
     border-radius: initial;
+    padding: 20px;
+    width: 100%;
   }
+
   +mobile() {
-    width: 100%;
-    padding: 20px;
-    min-height: auto;
     border-radius: initial;
+    min-height: auto;
+    padding: 20px;
+    width: 100%;
   }
 }
 
 .sidebar {
-  position: static;
+  background: $body-bg-color;
+  box-shadow: none;
   float: left;
   margin-left: -100%;
+  position: static;
   width: $sidebar-desktop;
-  background: $body-bg-color;
-  box-shadow: none;
 
   +tablet-mobile() {
     display: none;
   }
 }
 
-.sidebar-toggle { display: none; }
+.sidebar-toggle {
+  display: none;
+}
 
 .footer-inner {
   padding-left: 260px;
 
   +tablet-mobile() {
-    width: auto;
     padding-left: 0 !important;
     padding-right: 0 !important;
+    width: auto;
   }
 }
 
 .sidebar-position-right {
-  .header-inner { right: 0; }
-  .content-wrap { float: left; }
-  .sidebar { float: right; }
+  .header-inner {
+    right: 0;
+  }
+
+  .content-wrap {
+    float: left;
+  }
+
+  .sidebar {
+    float: right;
+  }
 
   .footer-inner {
     padding-left: 0;
diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl
index 82ae01202d..ea14afd30d 100644
--- a/source/css/_schemes/Pisces/_menu.styl
+++ b/source/css/_schemes/Pisces/_menu.styl
@@ -1,7 +1,6 @@
 .site-nav-toggle {
   left: 20px;
   top: 50%;
-
   transform: translateY(-50%);
 
   +tablet() {
@@ -26,19 +25,19 @@
 .menu-item-active a {
   background: #f9f9f9;
   border-bottom-color: white;
+  $badges = hexo-config('menu_settings.badges');
 
-  badges = hexo-config('menu_settings.badges');
-  if not badges {
+  if (!$badges) {
     &::after {
-      content: " ";
-      position: absolute;
-      top: 50%;
+      background-color: $grey;
+      border-radius: 50%;
+      content: ' ';
+      height: 6px;
       margin-top: -3px;
+      position: absolute;
       right: 15px;
+      top: 50%;
       width: 6px;
-      height: 6px;
-      background-color: $grey;
-      border-radius: 50%;
     }
   }
 }
@@ -48,11 +47,11 @@
   margin: 0;
 
   a, span.exturl {
-    position: relative;
     box-sizing: border-box;
+    line-height: inherit;
     padding: 5px 20px;
+    position: relative;
     text-align: left;
-    line-height: inherit;
     transition-property: background-color;
     the-transition();
 
@@ -64,22 +63,24 @@
   }
 
   .badge {
+    background-color: $grey-light;
+    border-radius: 10px;
+    color: #fff;
     display: inline-block;
-    padding: 2px 5px;
+    float: right;
     font-weight: $font-weight-bolder;
     line-height: 1;
-    color: #fff;
+    margin: .35em 0 0 0;
+    padding: 2px 5px;
     text-align: center;
-    white-space: nowrap;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
     vertical-align: middle;
-    background-color: $grey-light;
-    border-radius: 10px;
-    float: right;
-    margin: 0.35em 0 0 0;
-    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
+    white-space: nowrap;
   }
 
-  br { display: none; }
+  br {
+    display: none;
+  }
 }
 
 .btn-bar {
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
index bff6025bc8..a28147bcf0 100644
--- a/source/css/_schemes/Pisces/_sidebar.styl
+++ b/source/css/_schemes/Pisces/_sidebar.styl
@@ -1,28 +1,33 @@
-.use-motion .sidebar .motion-element { opacity: 1; }
+.use-motion .sidebar .motion-element {
+  opacity: 1;
+}
 
 .sidebar {
-  right: auto;
   bottom: auto;
+  right: auto;
 
   a, span.exturl {
     color: $black-light;
 
     &:hover {
-      color: $black-deep;
       border-bottom-color: $black-deep;
+      color: $black-deep;
     }
   }
 }
 
 .sidebar-inner {
-  //padding: 20px 10px 0;
-  box-sizing: border-box;
-  width: $sidebar-desktop;
-  color: $text-color;
   background: white;
-  box-shadow: $box-shadow;
   border-radius: $border-radius;
-  if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { opacity: 0; }
+  box-shadow: $box-shadow;
+  // padding: 20px 10px 0;
+  box-sizing: border-box;
+  color: $text-color;
+  width: $sidebar-desktop;
+
+  if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
+    opacity: 0;
+  }
 
   &.affix {
     position: fixed;
@@ -35,7 +40,7 @@
 }
 
 .site-overview {
-  //margin: 0 2px;
+  // margin: 0 2px;
   text-align: left;
 }
 
@@ -48,25 +53,28 @@
 }
 
 .feed-link, .chat {
-  border-top: 1px dotted $grey-light;
   border-bottom: 1px dotted $grey-light;
+  border-top: 1px dotted $grey-light;
   text-align: center;
+
   a {
-    display: block;
-    color: $orange;
     border: none !important;
+    color: $orange;
+    display: block;
 
     &:hover {
       background: none;
       color: darken($orange, 20%);
 
-      i { color: darken($orange, 20%); }
+      i {
+        color: darken($orange, 20%);
+      }
     }
   }
 }
 
 .links-of-author {
-  //clearfix();
+  // clearfix();
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -74,16 +82,19 @@
 
 .links-of-author-item {
   sidebar-inline-links-item();
+
   a, span.exturl {
-    display: block;
     border-bottom: none;
+    display: block;
     text-decoration: none;
 
-    &::before { display: none; }
+    &::before {
+      display: none;
+    }
 
     &:hover {
-      border-radius: 4px;
       background: $gainsboro;
+      border-radius: 4px;
     }
   }
 
@@ -93,16 +104,23 @@
 }
 
 .links-of-blogroll {
-  text-align: center;
   padding: 3px 0 0;
+  text-align: center;
+}
+
+.links-of-blogroll-item {
+  padding: 0;
 }
-.links-of-blogroll-item { padding: 0; }
+
 .links-of-blogroll-inline {
   clearfix();
 
   .links-of-blogroll-item {
     sidebar-inline-links-item();
     display: inline-block;
-    if !hexo-config('social_icons.icons_only') { width: unset; }
+
+    if (!hexo-config('social_icons.icons_only')) {
+      width: unset;
+    }
   }
 }
diff --git a/source/css/_schemes/Pisces/_sub-menu.styl b/source/css/_schemes/Pisces/_sub-menu.styl
index 41e2f7eb6b..2954148c19 100644
--- a/source/css/_schemes/Pisces/_sub-menu.styl
+++ b/source/css/_schemes/Pisces/_sub-menu.styl
@@ -1,38 +1,39 @@
 .sub-menu {
-  margin: 0;
-  padding: 6px 0;
   background: #fff !important;
   border-bottom: 1px solid $table-border-color;
-}
+  margin: 0;
+  padding: 6px 0;
 
-.sub-menu .menu-item {
-  display: inline-block !important;
+  .menu-item {
+    display: inline-block !important;
 
-  & a, span.exturl {
-    padding: initial !important;
-    margin: 5px 10px;
-  }
+    & a, span.exturl {
+      margin: 5px 10px;
+      padding: initial !important;
+    }
 
-  & a:hover, span.exturl:hover {
-    background: initial !important;
-    color: $sidebar-highlight;
+    & a:hover, span.exturl:hover {
+      background: initial !important;
+      color: $sidebar-highlight;
+    }
   }
-}
-
-.sub-menu .menu-item-active a {
-  background: #fff !important;
-  color: $sidebar-highlight;
-  border-bottom-color: $sidebar-highlight;
 
-  &:hover {
+  .menu-item-active a {
     background: #fff !important;
     border-bottom-color: $sidebar-highlight;
-  }
+    color: $sidebar-highlight;
+
+    &:hover {
+      background: #fff !important;
+      border-bottom-color: $sidebar-highlight;
+    }
+
+    $badges = hexo-config('menu_settings.badges');
 
-  badges = hexo-config('menu_settings.badges');
-  if not badges {
-    &::after {
-      content: initial;
+    if (!$badges) {
+      &::after {
+        content: initial;
+      }
     }
   }
 }
diff --git a/source/css/_schemes/Pisces/index.styl b/source/css/_schemes/Pisces/index.styl
index 75b63c3f2d..da75c4e51f 100644
--- a/source/css/_schemes/Pisces/index.styl
+++ b/source/css/_schemes/Pisces/index.styl
@@ -1,5 +1,5 @@
-@import "_layout";
-@import "_brand";
-@import "_menu";
-@import "_sub-menu";
-@import "_sidebar";
+@import '_layout';
+@import '_brand';
+@import '_menu';
+@import '_sub-menu';
+@import '_sidebar';
diff --git a/source/css/_variables/Gemini.styl b/source/css/_variables/Gemini.styl
index b4a1f0a3a6..56cf0bf24d 100644
--- a/source/css/_variables/Gemini.styl
+++ b/source/css/_variables/Gemini.styl
@@ -5,17 +5,17 @@
 
 // Settings for some of the most global styles.
 // --------------------------------------------------
-$body-bg-color              = #eee
+$body-bg-color           = #eee;
 
 // Borders.
 // --------------------------------------------------
-$box-shadow-inner           = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
-$box-shadow                 = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)
+$box-shadow-inner        = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12);
+$box-shadow              = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09);
 
-$border-radius-inner        = initial
-$border-radius              = initial
-//$border-radius-inner      = 0 0 3px 3px;
-//$border-radius            = 3px;
+$border-radius-inner     = initial;
+$border-radius           = initial;
+//$border-radius-inner   = 0 0 3px 3px;
+//$border-radius         = 3px;
 
 // Back to top
-$b2t-sidebar-bg-color       = $body-bg-color
+$b2t-sidebar-bg-color    = $body-bg-color;
diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl
index c34ccc4004..0d36b0fbb9 100644
--- a/source/css/_variables/Mist.styl
+++ b/source/css/_variables/Mist.styl
@@ -1,11 +1,11 @@
 // Variables of Mist scheme
 // =================================================
 
-$brand-color             = $black-deep
-$brand-hover-color       = $brand-color
+$brand-color             = $black-deep;
+$brand-hover-color       = $brand-color;
 
-$site-meta-text-align    = left
-$posts-collapse-left     = 0
+$site-meta-text-align    = left;
+$posts-collapse-left     = 0;
 
-$btn-default-color       = $link-color
-$btn-default-bg          = transparent
+$btn-default-color       = $link-color;
+$btn-default-bg          = transparent;
diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl
index 51ebdcede6..68aebe11a2 100644
--- a/source/css/_variables/Pisces.styl
+++ b/source/css/_variables/Pisces.styl
@@ -3,15 +3,15 @@
 
 // Settings for some of the most global styles.
 // --------------------------------------------------
-$body-bg-color                = #f5f7f9
+$body-bg-color                = #f5f7f9;
 
-$sidebar-width                = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240
-$sidebar-desktop              = unit($sidebar-width, 'px')
-$content-wrap                 = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px')
+$sidebar-width                = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240;
+$sidebar-desktop              = unit($sidebar-width, 'px');
+$content-wrap                 = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px');
 
-$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px')
-$content-desktop-large        = 1160px
-$content-desktop-largest      = 73%
+$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');
+$content-desktop-large        = 1160px;
+$content-desktop-largest      = 73%;
 
 
 // Borders
@@ -25,55 +25,55 @@ $border-radius                    = initial;
 
 // Header
 // --------------------------------------------------
-$subtitle-color                   = $gray-lighter
+$subtitle-color                   = $gray-lighter;
 
 // Sidebar
 // --------------------------------------------------
-$sidebar-nav-hover-color          = $orange
-$sidebar-highlight                = $orange
-
-$site-author-image-width          = 120px
-$site-author-image-border-width   = 1px
-$site-author-image-border-color   = $gainsboro
-
-$site-author-name-margin          = 0
-$site-author-name-color           = $black-deep
-$site-author-name-align           = center
-$site-author-name-weight          = $font-weight-bold
-
-$site-description-font-size       = $font-size-smaller
-$site-description-color           = $grey-dark
-$site-description-margin-top      = 0
-$site-description-align           = center
-
-$site-state-item-count-font-size  = $font-size-medium
-$site-state-item-name-font-size   = $font-size-smaller
-$site-state-item-name-color       = $grey-dark
-$site-state-item-border-color     = $gainsboro
-
-$toc-link-color                       = $grey-dim
-$toc-link-border-color                = $grey-light
-$toc-link-hover-color                 = black
-$toc-link-hover-border-color          = black
-$toc-link-active-color                = $sidebar-highlight
-$toc-link-active-border-color         = $sidebar-highlight
-$toc-link-active-current-color        = $sidebar-highlight
-$toc-link-active-current-border-color = $sidebar-highlight
+$sidebar-nav-hover-color          = $orange;
+$sidebar-highlight                = $orange;
+
+$site-author-image-width          = 120px;
+$site-author-image-border-width   = 1px;
+$site-author-image-border-color   = $gainsboro;
+
+$site-author-name-margin          = 0;
+$site-author-name-color           = $black-deep;
+$site-author-name-align           = center;
+$site-author-name-weight          = $font-weight-bold;
+
+$site-description-font-size       = $font-size-smaller;
+$site-description-color           = $grey-dark;
+$site-description-margin-top      = 0;
+$site-description-align           = center;
+
+$site-state-item-count-font-size  = $font-size-medium;
+$site-state-item-name-font-size   = $font-size-smaller;
+$site-state-item-name-color       = $grey-dark;
+$site-state-item-border-color     = $gainsboro;
+
+$toc-link-color                       = $grey-dim;
+$toc-link-border-color                = $grey-light;
+$toc-link-hover-color                 = black;
+$toc-link-hover-border-color          = black;
+$toc-link-active-color                = $sidebar-highlight;
+$toc-link-active-border-color         = $sidebar-highlight;
+$toc-link-active-current-color        = $sidebar-highlight;
+$toc-link-active-current-border-color = $sidebar-highlight;
 
 
 // Components
 // --------------------------------------------------
 
 // Button
-$btn-default-radius           = 2px
-$btn-default-bg               = white
-$btn-default-color            = $text-color
-$btn-default-border-color     = $text-color
-$btn-default-hover-color      = white
-$btn-default-hover-bg         = $black-deep
+$btn-default-radius           = 2px;
+$btn-default-bg               = white;
+$btn-default-color            = $text-color;
+$btn-default-border-color     = $text-color;
+$btn-default-hover-color      = white;
+$btn-default-hover-bg         = $black-deep;
 
 // Back to top
-$b2t-opacity                  = .6
-$b2t-position-bottom          = -100px
-$b2t-position-bottom-on       = 30px
-$b2t-sidebar-bg-color         = $body-bg-color
+$b2t-opacity                  = .6;
+$b2t-position-bottom          = -100px;
+$b2t-position-bottom-on       = 30px;
+$b2t-sidebar-bg-color         = $body-bg-color;
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index 3abd60b059..4fdf9fd0ca 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -6,213 +6,213 @@
 // Colors
 // colors for use across theme.
 // --------------------------------------------------
-$whitesmoke   = #f5f5f5
-$gainsboro    = #eee
-$gray-lighter = #ddd
-$grey-light   = #ccc
-$grey         = #bbb
-$grey-dark    = #999
-$grey-dim     = #666
-$black-light  = #555
-$black-dim    = #333
-$black-deep   = #222
-$red          = #ff2a2a
-$blue-bright  = #87daff
-$blue         = #0684bd
-$blue-deep    = #262a30
-$orange       = #fc6423
+$whitesmoke   = #f5f5f5;
+$gainsboro    = #eee;
+$gray-lighter = #ddd;
+$grey-light   = #ccc;
+$grey         = #bbb;
+$grey-dark    = #999;
+$grey-dim     = #666;
+$black-light  = #555;
+$black-dim    = #333;
+$black-deep   = #222;
+$red          = #ff2a2a;
+$blue-bright  = #87daff;
+$blue         = #0684bd;
+$blue-deep    = #262a30;
+$orange       = #fc6423;
 
 
 // Scaffolding
 // Settings for some of the most global styles.
 // --------------------------------------------------
 // Global text color on <body>
-$text-color                   = $black-light
+$text-color                   = $black-light;
 
 // Global link color.
-$link-color                   = $black-light
-$link-hover-color             = $black-deep
-$link-decoration-color        = $grey-dark
-$link-decoration-hover-color  = $black-deep
+$link-color                   = $black-light;
+$link-hover-color             = $black-deep;
+$link-decoration-color        = $grey-dark;
+$link-decoration-hover-color  = $black-deep;
 
 // Global border color.
-$border-color                 = $grey-light
+$border-color                 = $grey-light;
 
 // Background color for <body>
-$body-bg-color                = white
+$body-bg-color                = white;
 
 // Selection
-$selection-bg                 = $blue-deep
-$selection-color              = white
+$selection-bg                 = $blue-deep;
+$selection-color              = white;
 
 
 // Typography
 // Font, line-height, and elements colors.
 // --------------------------------------------------
 get_font_family(config) {
-  custom_family = hexo-config('font.' + config + '.family')
-  return custom_family is a 'string' ? custom_family : null
+  $custom-family = hexo-config('font.' + config + '.family');
+  return $custom-family is a 'string' ? $custom-family : null;
 }
 
 // Font families.
-$font-family-chinese      = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese      = "PingFang SC", "Microsoft YaHei";
 
-$font-family-base         = $font-family-chinese, sans-serif
-$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')
+$font-family-base         = $font-family-chinese, sans-serif;
+$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');
 
-$font-family-logo         = $font-family-base
-$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title')
+$font-family-logo         = $font-family-base;
+$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');
 
-$font-family-headings     = $font-family-base
-$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings')
+$font-family-headings     = $font-family-base;
+$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');
 
-$font-family-posts        = $font-family-base
-$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts')
+$font-family-posts        = $font-family-base;
+$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');
 
-$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace
-$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
+$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace;
+$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes');
 
-$font-family-icons        = 'FontAwesome'
+$font-family-icons        = 'FontAwesome';
 
 
 // Font Weight
-$font-weight-lighter      = 200
-$font-weight-light        = 300
-$font-weight-normal       = 400
-$font-weight-bold         = 600
-$font-weight-bolder       = 700
+$font-weight-lighter      = 200;
+$font-weight-light        = 300;
+$font-weight-normal       = 400;
+$font-weight-bold         = 600;
+$font-weight-bolder       = 700;
 
 
 // Font size
-$font-size-base           = 1em
-$font-size-base           = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit'
-$font-size-smallest       = 0.75em
-$font-size-smaller        = 0.8125em
-$font-size-small          = 0.875em
-$font-size-medium         = 1em
-$font-size-large          = 1.125em
-$font-size-larger         = 1.25em
-$font-size-largest        = 1.375em
+$font-size-base           = 1em;
+$font-size-base           = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit';
+$font-size-smallest       = .75em;
+$font-size-smaller        = .8125em;
+$font-size-small          = .875em;
+$font-size-medium         = 1em;
+$font-size-large          = 1.125em;
+$font-size-larger         = 1.25em;
+$font-size-largest        = 1.375em;
 
 
 // Headings font size
-$font-size-headings-step  = 0.125em
-$font-size-headings-base  = 1.875em
-$font-size-headings-base  = unit(hexo-config('font.headings.size'), em) if hexo-config('font.headings.size') is a 'unit'
+$font-size-headings-step  = .125em;
+$font-size-headings-base  = 1.875em;
+$font-size-headings-base  = unit(hexo-config('font.headings.size'), em) if hexo-config('font.headings.size') is a 'unit';
 
 
 // Global line height
-$line-height-base         = 2
-$line-height-code-block   = 1.6  // Can't be less than 1.3
+$line-height-base         = 2;
+$line-height-code-block   = 1.6  // Can't be less than 1.3;
 
 
 // Z-index master list
 // --------------------------------------------------
-$zindex-bottom  = -1
-$zindex-1       = 1010
-$zindex-2       = 1020
-$zindex-3       = 1030
-$zindex-4       = 1040
-$zindex-5       = 1050
+$zindex-bottom  = -1;
+$zindex-1       = 1010;
+$zindex-2       = 1020;
+$zindex-3       = 1030;
+$zindex-4       = 1040;
+$zindex-5       = 1050;
 
 
 // Table
 // --------------------------------------------------
-$table-width                    = 100%
-$table-border-color             = $gray-lighter
-$table-font-size                = $font-size-small
-$table-content-alignment        = left
-$table-content-vertical         = middle
-$table-th-font-weight           = 700
-$table-cell-padding             = 8px
-$table-cell-border-right-color  = $gainsboro
-$table-cell-border-bottom-color = $gray-lighter
-$table-row-odd-bg-color         = #f9f9f9
-$table-row-hover-bg-color       = $whitesmoke
+$table-width                    = 100%;
+$table-border-color             = $gray-lighter;
+$table-font-size                = $font-size-small;
+$table-content-alignment        = left;
+$table-content-vertical         = middle;
+$table-th-font-weight           = 700;
+$table-cell-padding             = 8px;
+$table-cell-border-right-color  = $gainsboro;
+$table-cell-border-bottom-color = $gray-lighter;
+$table-row-odd-bg-color         = #f9f9f9;
+$table-row-hover-bg-color       = $whitesmoke;
 
 
 // Code & Code Blocks
 // --------------------------------------------------
-$code-font-family               = $font-family-monospace
-$code-border-radius             = 3px
-$code-foreground                = $black-light
-$code-background                = $gainsboro
+$code-font-family               = $font-family-monospace;
+$code-border-radius             = 3px;
+$code-foreground                = $black-light;
+$code-background                = $gainsboro;
 
 
 // Buttons
 // --------------------------------------------------
-$btn-font-weight                = normal
+$btn-font-weight                = normal;
 
-$btn-default-radius             = 0
-$btn-default-bg                 = $black-deep
-$btn-default-color              = white
-$btn-default-font-size          = $font-size-small
-$btn-default-border-width       = 2px
-$btn-default-border-color       = $black-deep
-$btn-default-hover-bg           = white
-$btn-default-hover-color        = $black-deep
-$btn-default-hover-border-color = $black-deep
+$btn-default-radius             = 0;
+$btn-default-bg                 = $black-deep;
+$btn-default-color              = white;
+$btn-default-font-size          = $font-size-small;
+$btn-default-border-width       = 2px;
+$btn-default-border-color       = $black-deep;
+$btn-default-hover-bg           = white;
+$btn-default-hover-color        = $black-deep;
+$btn-default-hover-border-color = $black-deep;
 
 
 // Pagination
 // --------------------------------------------------
-$pagination-border              = $gainsboro
+$pagination-border              = $gainsboro;
 
-$pagination-link-bg             = transparent
-$pagination-link-color          = $link-color
-$pagination-link-border         = $gainsboro
+$pagination-link-bg             = transparent;
+$pagination-link-color          = $link-color;
+$pagination-link-border         = $gainsboro;
 
-$pagination-link-hover-bg       = transparent
-$pagination-link-hover-color    = $link-color
-$pagination-link-hover-border   = $black-deep
+$pagination-link-hover-bg       = transparent;
+$pagination-link-hover-color    = $link-color;
+$pagination-link-hover-border   = $black-deep;
 
-$pagination-active-bg           = $grey-light
-$pagination-active-color        = white
-$pagination-active-border       = $grey-light
+$pagination-active-bg           = $grey-light;
+$pagination-active-color        = white;
+$pagination-active-border       = $grey-light;
 
 
 // Layout sizes
 // --------------------------------------------------
-$content-desktop                = 700px
-$content-desktop-large          = 800px
-$content-desktop-largest        = 900px
+$content-desktop                = 700px;
+$content-desktop-large          = 800px;
+$content-desktop-largest        = 900px;
 
-$content-desktop-padding        = 40px
-$content-tablet-padding         = 10px
-$content-mobile-padding         = 8px
+$content-desktop-padding        = 40px;
+$content-tablet-padding         = 10px;
+$content-mobile-padding         = 8px;
 
 
 // Headband
 // --------------------------------------------------
-$headband-height                = 3px
-$headband-bg                    = $black-deep
+$headband-height                = 3px;
+$headband-bg                    = $black-deep;
 
 
 // Section Header
 // Variables for header section elements.
 // --------------------------------------------------
-$head-bg                        = transparent
+$head-bg                        = transparent;
 
 // Site Meta
-$site-meta-text-align           = center
-$brand-color                    = white
-$brand-hover-color              = white
-$brand-bg                       = $black-deep
+$site-meta-text-align           = center;
+$brand-color                    = white;
+$brand-hover-color              = white;
+$brand-bg                       = $black-deep;
 
-$title-font-size                = $font-size-largest
-$title-font-size                = unit(hexo-config('font.title.size'), em) if hexo-config('font.title.size') is a 'unit'
-$subtitle-font-size             = $font-size-smaller
-$subtitle-color                 = $grey-dark
-$site-subtitle-color            = $grey-dark
+$title-font-size                = $font-size-largest;
+$title-font-size                = unit(hexo-config('font.title.size'), em) if hexo-config('font.title.size') is a 'unit';
+$subtitle-font-size             = $font-size-smaller;
+$subtitle-color                 = $grey-dark;
+$site-subtitle-color            = $grey-dark;
 
 // Menu
-$menu-link-border               = transparent
-$menu-link-hover-border         = $black-deep
+$menu-link-border               = transparent;
+$menu-link-hover-border         = $black-deep;
 
 
 // Posts Expand
 // --------------------------------------------------
-$posts-expand-title-font-weight = $font-weight-normal
+$posts-expand-title-font-weight = $font-weight-normal;
 $post-copyright = {
   margin: 2em 0 0,
   padding: .5em 1em,
@@ -227,156 +227,156 @@ $post-copyright = {
 
 // Posts Collpase
 // --------------------------------------------------
-$posts-collapse-left            = 55px
-$posts-collapse-left-mobile     = 5px
+$posts-collapse-left            = 55px;
+$posts-collapse-left-mobile     = 5px;
 
 
 // Sidebar
 // Variables for sidebar section elements.
 // --------------------------------------------------
-$sidebar-offset                       = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit'
-$sidebar-nav-color                    = $black-light
-$sidebar-nav-hover-color              = $whitesmoke
-$sidebar-highlight                    = $blue-bright
-
-$site-author-image-padding            = 2px
-$site-author-image-width              = 96px
-$site-author-image-height             = auto
-$site-author-image-border-width       = 2px
-$site-author-image-border-color       = $black-dim
-
-$site-author-name-margin              = 5px 0 0
-$site-author-name-color               = $whitesmoke
-$site-author-name-align               = center
-$site-author-name-weight              = normal
-
-$site-description-font-size           = $font-size-medium
-$site-description-color               = $grey-dark
-$site-description-margin-top          = 5px
-$site-description-align               = center
-
-$site-state-align                     = center
-$site-state-item-count-font-size      = $font-size-larger
-$site-state-item-count-color          = inherit
-$site-state-item-name-font-size       = $font-size-small
-$site-state-item-name-color           = inherit
-$site-state-item-border-color         = $black-dim
-
-$toc-link-color                       = $grey-dark
-$toc-link-border-color                = $black-light
-$toc-link-hover-color                 = $grey-light
-$toc-link-hover-border-color          = $grey-light
-$toc-link-active-color                = $sidebar-highlight
-$toc-link-active-border-color         = $sidebar-highlight
-$toc-link-active-current-color        = $sidebar-highlight
-$toc-link-active-current-border-color = $sidebar-highlight
+$sidebar-offset                       = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit';
+$sidebar-nav-color                    = $black-light;
+$sidebar-nav-hover-color              = $whitesmoke;
+$sidebar-highlight                    = $blue-bright;
+
+$site-author-image-padding            = 2px;
+$site-author-image-width              = 96px;
+$site-author-image-height             = auto;
+$site-author-image-border-width       = 2px;
+$site-author-image-border-color       = $black-dim;
+
+$site-author-name-margin              = 5px 0 0;
+$site-author-name-color               = $whitesmoke;
+$site-author-name-align               = center;
+$site-author-name-weight              = normal;
+
+$site-description-font-size           = $font-size-medium;
+$site-description-color               = $grey-dark;
+$site-description-margin-top          = 5px;
+$site-description-align               = center;
+
+$site-state-align                     = center;
+$site-state-item-count-font-size      = $font-size-larger;
+$site-state-item-count-color          = inherit;
+$site-state-item-name-font-size       = $font-size-small;
+$site-state-item-name-color           = inherit;
+$site-state-item-border-color         = $black-dim;
+
+$toc-link-color                       = $grey-dark;
+$toc-link-border-color                = $black-light;
+$toc-link-hover-color                 = $grey-light;
+$toc-link-hover-border-color          = $grey-light;
+$toc-link-active-color                = $sidebar-highlight;
+$toc-link-active-border-color         = $sidebar-highlight;
+$toc-link-active-current-color        = $sidebar-highlight;
+$toc-link-active-current-border-color = $sidebar-highlight;
 
 
 // Components
 // --------------------------------------------------
 // Back to top
-$b2t-opacity                  = 1
-$b2t-opacity-hover            = 0.8
-$b2t-position-bottom          = -100px
-$b2t-position-bottom-on       = 19px
-$b2t-position-right           = 30px
-$b2t-position-right-mobile    = 20px
-$b2t-font-size                = 12px
-$b2t-color                    = white
-$b2t-bg-color                 = $black-deep
-$b2t-sidebar-bg-color         = $black-deep
+$b2t-opacity                  = 1;
+$b2t-opacity-hover            = .8;
+$b2t-position-bottom          = -100px;
+$b2t-position-bottom-on       = 19px;
+$b2t-position-right           = 30px;
+$b2t-position-right-mobile    = 20px;
+$b2t-font-size                = 12px;
+$b2t-color                    = white;
+$b2t-bg-color                 = $black-deep;
+$b2t-sidebar-bg-color         = $black-deep;
 
 //  .post-expand .post-eof
 //  In Muse scheme, margin above and below the post separator
-$post-eof-margin-top          = 80px  //  or 160px for more white space
-$post-eof-margin-bottom       = 60px  //  or 120px for less white space
+$post-eof-margin-top          = 80px  //  or 160px for more white space;
+$post-eof-margin-bottom       = 60px  //  or 120px for less white space;
 
 
 // Iconography
 // Icons SVG Base64
 // --------------------------------------------------
 // blockquote-center icon
-$center-quote-left            = '../images/quote-l.svg'
-$center-quote-right           = '../images/quote-r.svg'
+$center-quote-left            = '../images/quote-l.svg';
+$center-quote-right           = '../images/quote-r.svg';
 
 
 // Note colors
 // --------------------------------------------------
-// Read note light_bg_offset from NexT config and set in "lbg%" to use it as string variable.
-hexo-config('note.light_bg_offset') is a 'unit' ? (lbg = unit(hexo-config('note.light_bg_offset'),"%")) : (lbg = 0)
+// Read note light_bg_offset from NexT config and set in "$lbg%" to use it as string variable.
+hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'),"%")) : ($lbg = 0);
 
 // Default
-$note-default-border        = #777
-$note-default-bg            = lighten(spin($note-default-border, 0), 94% + lbg)
-$note-default-text          = $note-default-border
-$note-default-icon          = "\f0a9"
+$note-default-border        = #777;
+$note-default-bg            = lighten(spin($note-default-border, 0), 94% + $lbg);
+$note-default-text          = $note-default-border;
+$note-default-icon          = "\f0a9";
 
-$note-modern-default-border = #e1e1e1
-$note-modern-default-bg     = lighten(spin($note-modern-default-border, 10), 60% + (lbg * 4))
-$note-modern-default-text   = $grey-dim
-$note-modern-default-hover  = darken(spin($note-modern-default-text, -10), 32%)
+$note-modern-default-border = #e1e1e1;
+$note-modern-default-bg     = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
+$note-modern-default-text   = $grey-dim;
+$note-modern-default-hover  = darken(spin($note-modern-default-text, -10), 32%);
 
 // Primary
-$note-primary-border        = #6f42c1
-$note-primary-bg            = lighten(spin($note-primary-border, 10), 92% + lbg)
-$note-primary-text          = $note-primary-border
-$note-primary-icon          = "\f055"
+$note-primary-border        = #6f42c1;
+$note-primary-bg            = lighten(spin($note-primary-border, 10), 92% + $lbg);
+$note-primary-text          = $note-primary-border;
+$note-primary-icon          = "\f055";
 
-$note-modern-primary-border = #e1c2ff
-$note-modern-primary-bg     = lighten(spin($note-modern-primary-border, 10), 40% + (lbg * 4))
-$note-modern-primary-text   = #6f42c1
-$note-modern-primary-hover  = darken(spin($note-modern-primary-text, -10), 22%)
+$note-modern-primary-border = #e1c2ff;
+$note-modern-primary-bg     = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
+$note-modern-primary-text   = #6f42c1;
+$note-modern-primary-hover  = darken(spin($note-modern-primary-text, -10), 22%);
 
 // Info
-$note-info-border           = #428bca
-$note-info-bg               = lighten(spin($note-info-border, -10), 91% + lbg)
-$note-info-text             = $note-info-border
-$note-info-icon             = "\f05a"
+$note-info-border           = #428bca;
+$note-info-bg               = lighten(spin($note-info-border, -10), 91% + $lbg);
+$note-info-text             = $note-info-border;
+$note-info-icon             = "\f05a";
 
-$note-modern-info-border    = #b3e5ef
-$note-modern-info-bg        = lighten(spin($note-modern-info-border, 10), 50% + (lbg * 4))
-$note-modern-info-text      = #31708f
-$note-modern-info-hover     = darken(spin($note-modern-info-text, -10), 32%)
+$note-modern-info-border    = #b3e5ef;
+$note-modern-info-bg        = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
+$note-modern-info-text      = #31708f;
+$note-modern-info-hover     = darken(spin($note-modern-info-text, -10), 32%);
 
 // Success
-$note-success-border        = #5cb85c
-$note-success-bg            = lighten(spin($note-success-border, 10), 90% + lbg)
-$note-success-text          = $note-success-border
-$note-success-icon          = "\f058"
+$note-success-border        = #5cb85c;
+$note-success-bg            = lighten(spin($note-success-border, 10), 90% + $lbg);
+$note-success-text          = $note-success-border;
+$note-success-icon          = "\f058";
 
-$note-modern-success-border = #d0e6be
-$note-modern-success-bg     = lighten(spin($note-modern-success-border, 10), 40% + (lbg * 4))
-$note-modern-success-text   = #3c763d
-$note-modern-success-hover  = darken(spin($note-modern-success-text, -10), 27%)
+$note-modern-success-border = #d0e6be;
+$note-modern-success-bg     = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
+$note-modern-success-text   = #3c763d;
+$note-modern-success-hover  = darken(spin($note-modern-success-text, -10), 27%);
 
 // Warning
-$note-warning-border        = #f0ad4e
-$note-warning-bg            = lighten(spin($note-warning-border, 10), 88% + lbg)
-$note-warning-text          = $note-warning-border
-$note-warning-icon          = "\f06a"
+$note-warning-border        = #f0ad4e;
+$note-warning-bg            = lighten(spin($note-warning-border, 10), 88% + $lbg);
+$note-warning-text          = $note-warning-border;
+$note-warning-icon          = "\f06a";
 
-$note-modern-warning-border = #fae4cd
-$note-modern-warning-bg     = lighten(spin($note-modern-warning-border, 10), 43% + (lbg * 4))
-$note-modern-warning-text   = #8a6d3b
-$note-modern-warning-hover  = darken(spin($note-modern-warning-text, -10), 18%)
+$note-modern-warning-border = #fae4cd;
+$note-modern-warning-bg     = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
+$note-modern-warning-text   = #8a6d3b;
+$note-modern-warning-hover  = darken(spin($note-modern-warning-text, -10), 18%);
 
 // Danger
-$note-danger-border         = #d9534f
-$note-danger-bg             = lighten(spin($note-danger-border, -10), 92% + lbg)
-$note-danger-text           = $note-danger-border
-$note-danger-icon           = "\f056"
+$note-danger-border         = #d9534f;
+$note-danger-bg             = lighten(spin($note-danger-border, -10), 92% + $lbg);
+$note-danger-text           = $note-danger-border;
+$note-danger-icon           = "\f056";
 
-$note-modern-danger-border  = #ebcdd2
-$note-modern-danger-bg      = lighten(spin($note-modern-danger-border, 10), 35% + (lbg * 4))
-$note-modern-danger-text    = #a94442
-$note-modern-danger-hover   = darken(spin($note-modern-danger-text, -10), 22%)
+$note-modern-danger-border  = #ebcdd2;
+$note-modern-danger-bg      = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
+$note-modern-danger-text    = #a94442;
+$note-modern-danger-hover   = darken(spin($note-modern-danger-text, -10), 22%);
 
 
 // Label colors
 // --------------------------------------------------
-$label-default              = lighten(spin($note-default-border, 0), 89% + lbg)
-$label-primary              = lighten(spin($note-primary-border, 10), 87% + lbg)
-$label-info                 = lighten(spin($note-info-border, -10), 86% + lbg)
-$label-success              = lighten(spin($note-success-border, 10), 85% + lbg)
-$label-warning              = lighten(spin($note-warning-border, 10), 83% + lbg)
-$label-danger               = lighten(spin($note-danger-border, -10), 87% + lbg)
+$label-default              = lighten(spin($note-default-border, 0), 89% + $lbg);
+$label-primary              = lighten(spin($note-primary-border, 10), 87% + $lbg);
+$label-info                 = lighten(spin($note-info-border, -10), 86% + $lbg);
+$label-success              = lighten(spin($note-success-border, 10), 85% + $lbg);
+$label-warning              = lighten(spin($note-warning-border, 10), 83% + $lbg);
+$label-danger               = lighten(spin($note-danger-border, -10), 87% + $lbg);
diff --git a/source/fonts/.gitkeep b/source/fonts/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000