refactor: Optimize UI style & not show header by default

layout/_common/header.pug

@@ -5,7 +5,7 @@ header#header(
         theme.header.bg_image.url : " "
   })`
 )
-  nav.header-nav
+  nav.header-nav.slider-up
     div.header-nav-inner
       div.fa.fa-bars.header-nav-menu-icon
 

source/css/_common/main.styl

@@ -8,7 +8,7 @@ setUlStyle(content, hoverColor)
     color: $ul-list-color
     transition: color .2s ease
     transform: scale(.6)
-    @extend $font-face
+    @extend $font-face-awesome
 
   &:hover
     &::before
@@ -46,7 +46,7 @@ setUlStyle(content, hoverColor)
         color: $h-link-logo-color
         opacity: 0
         transition: opacity .1s ease
-        @extend $font-face
+        @extend $font-face-awesome
 
     &:hover
       &::after

source/css/_common/notification.styl

@@ -9,6 +9,7 @@
   position: relative
   border-radius: 3px
   padding: 8px 12px
+  font-size: $font-size-large
   line-height: 1rem
   color: $black-light
   background-color: #fff
@@ -38,9 +39,5 @@
     & ~ i
       color: $alert-error
 
-  &-icon
-    font-size: 20px
-
   &-description
     margin-left: .5rem
-    font-size: 18px

source/css/_common/page.styl

@@ -69,16 +69,16 @@
         &::before
           color: $categories-list-dot-hover-color
 
-  &-count
-    padding-left: .3em
-    font-size: $font-size-base
-    color: $categories-post-count-color
+    &-count
+      padding-left: .3em
+      font-size: $font-size-base
+      color: $categories-post-count-color
 
-    &::before
-      content: '('
+      &::before
+        content: '('
 
-    &::after
-      content: ')'
+      &::after
+        content: ')'
 
 // Gallery in post / page.
 .gallery-image

source/css/_components/copy.styl

@@ -4,6 +4,7 @@
   right: 0
   width: 1.5rem
   height: 1.5rem
+  line-height: 1.5rem
   text-align: center
   color: $black-light
   cursor: pointer

source/css/_components/external-link.styl

@@ -11,7 +11,3 @@
 .post-title
   .external-link i
     font-size: .7em
-
-.article-sort-item
-  .external-link i
-    font-size: .55em

source/css/_components/tag-plugin/note.styl

@@ -17,19 +17,19 @@
       font-size: $font-size-base + 6px
 
     &.default::before
-      content: '\f0a9'
+      content: $note-default
       color: #777
 
     &.success::before
-      content: '\f058'
+      content: $note-success
       color: #42b983
 
     &.warning::before
-      content: '\f06a'
+      content: $note-warning
       color: #ecc91e
 
     &.danger::before
-      content: '\f056'
+      content: $note-danger
       color: #dc3b3b
 
   &.default

source/css/_global/base.styl

@@ -65,7 +65,7 @@ hr
     font-size: 24px
     color: $hr-icon-color
     transform: translateY(-50% - 4px)
-    @extend $font-face
+    @extend $font-face-awesome
 
 blockquote
   border-left: 5px solid $quote-left-color

source/css/_highlight/highlight.styl

@@ -8,7 +8,7 @@ for lang in languages
   .highlight{'.' + lang}
     figcaption
       span
-        &::before
+        &:first-child::before
           content: lang
           margin: 0 .6rem
           color: alpha($highlight-header-color, .5)
@@ -44,20 +44,22 @@ for lang in languages
     background-color: $highlight-header-bg-color
 
     span
-      float: left
-      color: $highlight-header-color
+      &:first-child
+        float: left
+        color: $highlight-header-color
 
-    a
-      float: right
-      margin-right: 2rem
-      border-bottom: 0
+    span
+      &:nth-child(2)
+        float: right
+        margin-right: 2rem
 
   figcaption.custom
     padding: .1rem 0
     min-height: 1.5rem
 
-    span
-      margin: 0 1rem 0 .6rem
+    .custom-lang
+      float: left
+      margin: 0 .6rem
       color: alpha($highlight-header-color, .5)
 
   .gutter,

source/css/var.styl

@@ -175,7 +175,7 @@ $font-weight-bolder     = 700
 // Icon content define
 // -------------------------------------------
 // All icon elements will inherit these attributes.
-$font-face
+$font-face-awesome
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
@@ -190,6 +190,11 @@ $icon-ul-list-3          = '\f0c8'
 
 $icon-hr                 = '\f0fb'
 
+$note-default            = '\f0a9'
+$note-success            = '\f058'
+$note-warning            = '\f06a'
+$note-danger             = '\f056'
+
 // -------------------------------------------
 // z-index list
 // -------------------------------------------

source/js/copy.js

@@ -10,7 +10,7 @@ $(document).ready(function () {
         .filter(function (e) { return e !== CODEBLOCK_CLASS_NAME; });
       var codeHeader = $(
         '<figcaption class="custom">' +
-          '<span>' + lang + '</span>' +
+          '<div class="custom-lang">' + lang + '</div>' +
         '</figcaption>'
       )[0];