refactor: Change some style

layout/_layout.pug

@@ -31,11 +31,10 @@ html(lang=config.language)
 
       if theme.back2top.enable
         include ./_partials/widgets/back2top.pug
+    include ./_partials/search/index.pug
 
-    //- include ../_components/search/index.pug
-
-    //- include ../_scripts/vendors.pug
-    //- include ../_third-party/search/index.pug
+    include ./_scripts/vendors.pug
+    include ./_third-party/search/index.pug
 
     //- if theme.pjax && theme.pjax.enable
     //-   include ../_third-party/pjax.pug
@@ -47,6 +46,6 @@ html(lang=config.language)
     //-   include ../_third-party/math/index.pug
     //-   include ../_third-party/quicklink.pug
 
-    //- include ../_third-party/comments/index.pug
-    //- include ../_third-party/advertising/index.pug
-    //- include ../_scripts/stun.pug
+    include ./_third-party/comments/index.pug
+    include ./_third-party/advertising/index.pug
+    include ./_scripts/stun.pug

layout/_mixins/gallery.pug

 mixin gallery(post)
   div.gallery(itemscope itemtype="http://schema.org/ImageGallery")
     each photo in post.photos
-      img(src=url_for(photo) itemprop="contentUrl").gallery-image
+      img(src=url_for(photo) itemprop="contentUrl").gallery__img

layout/_mixins/post-header.pug

@@ -52,7 +52,7 @@ mixin postHeader(post)
 
         if theme.valine && theme.valine.enable && theme.valine.visitor
           span(id=url_for(post.path) data-flag-title=post.title).leancloud_visitors
-            i.fa.fa-eye
+            i(class=`${fa_prefix} fa-eye`)
             if !theme.post_meta.icon_only
               span= __("post.reading_count") + " "
             span.leancloud-visitors-count
@@ -61,7 +61,7 @@ mixin postHeader(post)
         //-   because will conflict by ID selector.
         if is_post()
           if theme.busuanzi.enable && theme.busuanzi.post_pv.enable
-            span.post-header-reading-count
+            span.post-header-meta-reading-count
               i(class=`${fa_prefix} fa-${theme.busuanzi.post_pv.icon}`)
 
               if !theme.post_meta.icon_only && !theme.busuanzi.post_pv.icon_only

layout/_mixins/post-timeline.pug

@@ -14,7 +14,7 @@ mixin postTimeline(posts)
           time.post-timeline-item__time= full_date(post.date, "MM-DD")
           h2.post-timeline-item-title
             if post.link
-              a.post-timeline-item-title__a(href=url_for(post.link) target="_blank" rel="noopener")= post.title || post.link
+              a(href=url_for(post.link) target="_blank" rel="noopener").post-timeline-item-title__a= post.title || post.link
             else
-              a.post-timeline-item-title__a(href=url_for(post.path))= post.title || __("post.untitled")
+              a(href=url_for(post.path)).post-timeline-item-title__a= post.title || __("post.untitled")
     - })

layout/_partials/config.pug

@@ -15,6 +15,13 @@
     });
   } 
 
+  var fontawesome = "undefined";
+  if (theme.fa_prefix) {
+    fontawesome = JSON.stringify({
+      prefix: theme.fa_prefix
+    });
+  }
+
   var sidebar = "undefined";
   if (theme.sidebar.enable) {
     sidebar = JSON.stringify({
@@ -72,6 +79,7 @@ script.
   var CONFIG = {
     root: '!{ config.root }',
     algolia: !{ algolia },
+    fontawesome: !{ fontawesome },
     sidebar: !{ sidebar },
     back2top: !{ back2top },
     reward: !{ theme.reward.enable },

layout/_partials/footer/footer.pug

@@ -32,7 +32,7 @@ if footerPowered || footerTheme
       if footer.powered.version
         span= " v" + hexo_env("version") + "."
     if footerPowered && footerTheme
-      span= " | "
+      span.separator= "|"
     if footerTheme
       span= __("footer.theme") + " - "
         - var STUN_URL = "https://github.com/liuyib/hexo-theme-stun/";
@@ -40,8 +40,8 @@ if footerPowered || footerTheme
       if footer.theme.version
         span= " v" + stun_env("version") + "."
 
-//- if theme.busuanzi.enable
-//-   include ../_components/analytics/busuanzi.pug
+if theme.busuanzi.enable
+  include ../analytics/busuanzi.pug
 
 if footer.custom.enable
   div

layout/_partials/head/head.pug

@@ -28,21 +28,21 @@ meta(name="keywords" content=keywords)
 meta(name="description" content=description)
 title= title
 
-//- if theme.google_site_verification
-//-   meta(name="google-site-verification" content=theme.google_site_verification)
-//- if theme.bing_site_verification
-//-   meta(name="msvalidate.01" content=theme.bing_site_verification)
-//- if theme.baidu_site_verification
-//-   meta(name="baidu-site-verification" content=theme.baidu_site_verification)
-//- if theme.qihu360_site_verification
-//-   meta(name="360-site-verification" content=theme.qihu360_site_verification)
+if theme.google_site_verification
+  meta(name="google-site-verification" content=theme.google_site_verification)
+if theme.bing_site_verification
+  meta(name="msvalidate.01" content=theme.bing_site_verification)
+if theme.baidu_site_verification
+  meta(name="baidu-site-verification" content=theme.baidu_site_verification)
+if theme.qihu360_site_verification
+  meta(name="360-site-verification" content=theme.qihu360_site_verification)
 
-//- if theme.pwa && theme.pwa.enable
-//-   if theme.pwa.theme_color
-//-     meta(name="theme-color" content=theme.pwa.theme_color)
+if theme.pwa && theme.pwa.enable
+  if theme.pwa.theme_color
+    meta(name="theme-color" content=theme.pwa.theme_color)
 
-//-   if theme.pwa.manifest
-//-     link(rel="manifest" href=`${url_for(theme.pwa.manifest)}?v=${stun_env("version")}`)
+  if theme.pwa.manifest
+    link(rel="manifest" href=`${url_for(theme.pwa.manifest)}?v=${stun_env("version")}`)
 
 if theme.favicon.small
   link(rel="icon" href=`${url_for(theme.favicon.small)}?v=${stun_env("version")}` type="image/png" sizes="16x16")
@@ -65,30 +65,30 @@ link(rel="dns-prefetch" href="https://cdn.jsdelivr.net")
 - if (theme.cdn.fontawesome) fontawesome_css = theme.cdn.fontawesome
 link(rel="stylesheet" href=fontawesome_css type="text/css")
 
-//- if theme.fancybox
-//-   - var fancybox_css = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"
-//-   - if (theme.cdn.fancybox_css) fancybox_css = theme.cdn.fancybox_css
-//-   link(rel="stylesheet" href=fancybox_css type="text/css")
+if theme.fancybox
+  - var fancybox_css = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"
+  - if (theme.cdn.fancybox_css) fancybox_css = theme.cdn.fancybox_css
+  link(rel="stylesheet" href=fancybox_css type="text/css")
 
-//- if page.comments || theme.pjax.enable
-//-   if theme.gitalk && theme.gitalk.enable
-//-     - var gitalk_css = "https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.css"
-//-     - if (theme.cdn.gitalk_css) gitalk_css = theme.cdn.gitalk_css
-//-     link(rel="stylesheet" href=gitalk_css type="text/css")
+if page.comments || theme.pjax.enable
+  if theme.gitalk && theme.gitalk.enable
+    - var gitalk_css = "https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.css"
+    - if (theme.cdn.gitalk_css) gitalk_css = theme.cdn.gitalk_css
+    link(rel="stylesheet" href=gitalk_css type="text/css")
 
-//- if theme.algolia_search.enable
-//-   - var instantsearch_css = "https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css"
-//-   - if (theme.cdn.instantsearch_css) instantsearch_css = theme.cdn.instantsearch_css
-//-   link(rel="stylesheet" href=instantsearch_css type="text/css")
+if theme.algolia_search.enable
+  - var instantsearch_css = "https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css"
+  - if (theme.cdn.instantsearch_css) instantsearch_css = theme.cdn.instantsearch_css
+  link(rel="stylesheet" href=instantsearch_css type="text/css")
 
 link(rel="stylesheet" href=`${url_for(theme.css)}/index.css?v=${stun_env("version")}`)
 
-//- if theme.google_analytics
-//-   link(rel="dns-prefetch" href="https://www.googletagmanager.com")
-//- if theme.baidu_analytics
-//-   link(rel="dns-prefetch" href="https://hm.baidu.com")
-//- if theme.tencent_analytics
-//-   link(rel="dns-prefetch" href="https://tajs.qq.com")
+if theme.google_analytics
+  link(rel="dns-prefetch" href="https://www.googletagmanager.com")
+if theme.baidu_analytics
+  link(rel="dns-prefetch" href="https://hm.baidu.com")
+if theme.tencent_analytics
+  link(rel="dns-prefetch" href="https://tajs.qq.com")
 
-//- include ../_third-party/analytics/index.pug
-//- include ./config.pug
+include ../../_third-party/analytics/index.pug
+include ../config.pug

layout/_partials/post/post-list.pug

 section.post-list
   include ../../_mixins/post-header.pug
-  //- include ../_mixins/gallery.pug
+  include ../../_mixins/gallery.pug
 
   - var postLists = theme.post_list.paginate.home ? page.posts : site.posts
   - postLists.each(function (post) {
@@ -12,7 +12,7 @@ section.post-list
           img(src=post.top_image)
 
         if post.photos && post.photos.length
-          //- +gallery(post)
+          +gallery(post)
 
         - var isExcerpt = true
         if theme.auto_excerpt && theme.auto_excerpt.enable

layout/_partials/sidebar/sidebar.pug

-- var isShowToc = page.toc === false ? page.toc : (theme.toc.enable && is_post())
+- var isShowToc = page.toc || (theme.toc.enable && is_post())
 - var fa_prefix = theme.fa_prefix || 'fa'
 
 if isShowToc
@@ -17,7 +17,6 @@ section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`)
     div.sidebar-ov-author
       if theme.author.avatar.url
         img.sidebar-ov-author__img(src=theme.author.avatar.url alt="avatar")
-
       if theme.author.motto
         p.sidebar-ov-author__p= theme.author.motto
 
@@ -87,8 +86,8 @@ section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`)
         img(src=url_for(`/${theme.images}/cc-${ccLicense}.svg`) alt=__("creative_commons"))
 
 if theme.reading_progress.enable && is_post()
-  div.sidebar-progress
-    div.sidebar-progress-read
+  div.sidebar-reading
+    div.sidebar-reading-info
       span= __("sidebar.read_info") + " "
-      span.sidebar-progress-number
-    div.sidebar-progress-line
+      span.sidebar-reading-info-num
+    div.sidebar-reading-line

layout/_partials/widgets/comments.pug

 if theme.disqus && theme.disqus.enable
   div#comments.comments
-    div.comment-inner
-      div#disqus_thread
+    div#disqus_thread
 else if theme.valine && theme.valine.enable
   div#comments.comments
-    div.comment-inner
 else if theme.gitalk && theme.gitalk.enable
   div#comments.comments
-    div.comment-inner
-      div#gitalk-container
+    div#gitalk-container
 else if theme.livere && theme.livere.enable
   div#comments.comments
-    div.comment-inner
-      div#lv-container(data-id="city" data-uid=theme.livere.uid)
+    div#lv-container(data-id="city" data-uid=theme.livere.uid)

layout/page.pug

 extends ./_layout.pug
 
 block content
-  //- include ./_mixins/gallery.pug
+  include ./_mixins/gallery.pug
 
   if (page.type === "tags")
     div.tagcloud
@@ -18,14 +18,12 @@ block content
         span= site.categories.length
       != list_categories()
   else if (page.type === "about")
-    div.headings.code-highlight
+    div.about
       if page.photos && page.photos.length
-        //- +gallery(page)
-
+        +gallery(page)
       != page.content
   else
-    div.headings.code-highlight
+    div.custom
       if page.photos && page.photos.length
-        //- +gallery(page)
-
+        +gallery(page)
       != page.content

layout/post.pug

@@ -5,13 +5,13 @@ block content
     - var fa_prefix = theme.fa_prefix || 'fa'
 
     include ./_mixins/post-header.pug
-    //- include ./_mixins/gallery.pug
+    include ./_mixins/gallery.pug
 
     +postHeader(page)
 
     div.post-body
       if page.photos && page.photos.length
-        //- +gallery(page)
+        +gallery(page)
       != page.content
 
     footer.post-footer

scripts/filters/post-heading.js

@@ -11,10 +11,9 @@ hexo.extend.filter.register('after_post_render', function (data) {
 
   $('h1,h2,h3,h4,h5,h6').each(function () {
     var $heading = $(this);
-    var $headingATag = $heading.find('a');
+    var headingTxt = $heading.text().trim();
 
-    $headingATag.addClass('heading-link');
-    $heading.html($headingATag.html($heading.text().trim()));
+    $heading.html('<span class="heading-link">' + headingTxt + '</span>');
   });
 
   data.content = $.html();

scripts/filters/resize-img.js

@@ -4,23 +4,23 @@
 
 hexo.extend.filter.register('after_post_render', function (data) {
   var cheerio;
-  
+
   if (!cheerio) cheerio = require('cheerio');
 
   var $ = cheerio.load(data.content, { decodeEntities: false });
 
   $('img').each(function () {
     var $img = $(this);
-    
+
     if (!$img.attr('src')) return;
     if ($img.attr('src').includes('?size=')) {
-      var size = $img.attr('src').split('?size=')[1] &&
-        $img.attr('src').split('?size=')[1].toLowerCase();
+      var size = $img.attr('src').split('?size=')[1] && $img.attr('src').split('?size=')[1].toLowerCase();
       var w = size.split('x')[0] + 'px';
       var h = size.split('x')[1] + 'px';
-  
+
       $img.css({ width: w, height: h });
     }
   });
+
   data.content = $.html();
 }, 0);

source/css/_common/components/analytics/busuanzi.styl

-.busuanzi
-  .separator
-    margin: 0 .3rem
+.busuanzi {
+  &-uv {
+    color: $white-light;
 
-  &-uv
-    color: $white-light
+    i {
+      margin: 0 .3rem 0 0;
+    }
+  }
 
-    i
-      margin: 0 .3rem 0 0
+  &-pv {
+    color: $white-light;
 
-  &-pv
-    color: $white-light
-
-    i
-      margin: 0 .3rem 0 0
+    i {
+      margin: 0 .3rem 0 0;
+    }
+  }
+}

source/css/_common/components/analytics/index.styl

-@import './busuanzi.styl' if (hexo-config('busuanzi.enable'))
+@import './busuanzi.styl' if (hexo-config('busuanzi.enable'));

source/css/_common/components/footer/index.styl

@@ -20,6 +20,10 @@
     }
   }
 
+  .separator {
+    margin: 0 .5rem;
+  }
+
   .footer-icon {
     margin: 0 .2rem;
     font-size: .9em;

source/css/_common/components/highlight/highlight.styl

@@ -25,10 +25,6 @@ for lang in languages {
   color: $highlight-color;
   background-color: $highlight-background;
 
-  .copy-button i {
-    color: $copy-button-color;
-  }
-
   pre,
   code {
     font-family: $font-family-code;
@@ -48,24 +44,23 @@ for lang in languages {
   }
 
   figcaption {
-    overflow: hidden;
     position: relative;
-    padding: 0 .6rem;
+    padding: .1rem 0;
     width: 100%;
     color: $highlight-header-color;
     background-color: $highlight-header-bg-color;
+    clearfix();
 
     span {
       &:first-child {
         float: left;
+        margin-left: .5rem;
         color: $highlight-code-note-color;
       }
-    }
 
-    span {
-      &:last-child {
+      &.external-link {
         float: right;
-        margin-right: 2rem;
+        margin-right: 2em;
       }
     }
   }

source/css/_common/components/index.styl

 @import './header/index.styl';
 @import './footer/index.styl';
 @import './sidebar/index.styl';
+@import './search/index.styl';
 @import './pages/index.styl';
 @import './post/index.styl';
-@import './highlight';
+@import './highlight/index.styl';
 @import './widgets/index.styl';
+@import './plugins/index.styl';
+@import './analytics/index.styl';

source/css/_common/components/plugins/friends.styl

-.friends-plugin
-  overflow: hidden
-  max-width: 100%
+.friends-plugin {
+  overflow: hidden;
+  max-width: 100%;
+}
 
-.friends-item
-  clearAStyle()
-  display: block
-  float: left
-  margin: 0 5px
-  padding: .5rem .5rem .5rem 1rem
-  width: calc(33.3% - 10px)
-  height: 100px
-  transition: background-color .3s
+.friends-item {
+  display: block;
+  float: left;
+  margin: 0 5px;
+  padding: .5rem .5rem .5rem 1rem;
+  width: calc(33.3% - 10px);
+  height: 100px;
+  transition: background-color .3s;
 
-  &:hover
-    background-color: alpha($blue-light, .1)
+  &:hover {
+    background-color: alpha($blue-light, .1);
+  }
 
-  .avatar
-    clearImgStyle()
-    display: inline-block
-    border-radius: 50%
-    width: 60px
-    height: 60px
-    vertical-align: middle
+  p {
+    margin: 0;
+  }
 
-  .info
-    display: inline-block
-    margin-left: 1rem
-    padding-top: .6rem
-    width: calc(100% - 60px - 1rem)
-    height: 100%
-    vertical-align: middle
-    color: $font-color
+  .avatar {
+    display: inline-block;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    vertical-align: middle;
+  }
 
-  .name,
-  .intro
-    overflow: hidden
-    white-space: nowrap
-    text-overflow: ellipsis
+  .info {
+    display: inline-block;
+    margin-left: 1rem;
+    padding-top: .6rem;
+    width: calc(100% - 60px - 1rem);
+    height: 100%;
+    vertical-align: middle;
+    color: $font-color;
+  }
 
-  .intro
-    font-size: .9em
-    color: #999
+  .name,
+  .intro {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-  p
-    margin: 0
+  .intro {
+    font-size: .9em;
+    color: #999;
+  }
+}

source/css/_common/components/plugins/index.styl

-@import './table.styl'
-@import './note.styl'
-@import './friends.styl'
+@import './table.styl';
+@import './note.styl';
+@import './friends.styl';

source/css/_common/components/plugins/note.styl

-.note-plugin
-  position: relative
-  margin: 1rem 0
-  border: 1px solid #eee
-  border-left-width: .35rem
-  padding: 0 1rem
-  line-height: 1.7em
-
-  &:not(.no-icon)
-    padding-left: 2rem
-
-    &::before
-      position: absolute
-      top: .8em
-      left: .6rem
-      font-family: 'FontAwesome'
-      font-size: $font-size-base + 6px
-
-    &.default::before
-      content: $icon-note-default
-      color: #777
-
-    &.success::before
-      content: $icon-note-success
-      color: #42b983
-
-    &.warning::before
-      content: $icon-note-warning
-      color: #ecc91e
-
-    &.danger::before
-      content: $icon-note-danger
-      color: #dc3b3b
-
-  &.default
-    border-left-color: #777
-
-    strong
-      color: #777
-
-  &.success
-    border-left-color: #42b983
-
-    strong
-      color: #42b983
-
-  &.warning
-    border-left-color: #ecc91e
-
-    strong
-      color: #ecc91e
-
-  &.danger
-    border-left-color: #dc3b3b
-
-    strong
-      color: #dc3b3b
+.note-plugin {
+  position: relative;
+  margin: 0 0 1rem;
+  border: 1px solid #eee;
+  border-left-width: .35rem;
+  padding: 0 1rem;
+  line-height: 1.7em;
 
   h1,
   h2,
   h3,
   h4,
   h5,
-  h6
-    margin: 0
-
-  strong
-    font-size: $font-size-base + 6px
+  h6 {
+    margin: 0;
+  }
+
+  p {
+    margin: 1em 0;
+  }
+
+  strong {
+    font-size: $font-size-base + 6px;
+  }
+
+  &:not(.no-icon) {
+    padding-left: 2rem;
+
+    &::before {
+      position: absolute;
+      top: 1.5rem;
+      left: .6rem;
+      fontawesome-base();
+      font-size: $font-size-base + 6px;
+      transform: translateY(-50%);
+    }
+
+    &.default::before {
+      content: $icon-note-default;
+      color: #777;
+    }
+
+    &.success::before {
+      content: $icon-note-success;
+      color: #42b983;
+    }
+
+    &.warning::before {
+      content: $icon-note-warning;
+      color: #ecc91e;
+    }
+
+    &.danger::before {
+      content: $icon-note-danger;
+      color: #dc3b3b;
+    }
+  }
+
+  &.default {
+    border-left-color: #777;
+
+    strong {
+      color: #777;
+    }
+  }
+
+  &.success {
+    border-left-color: #42b983;
+
+    strong {
+      color: #42b983;
+    }
+  }
+
+  &.warning {
+    border-left-color: #ecc91e;
+
+    strong {
+      color: #ecc91e;
+    }
+  }
+
+  &.danger {
+    border-left-color: #dc3b3b;
+
+    strong {
+      color: #dc3b3b;
+    }
+  }
+}

source/css/_common/components/plugins/table.styl

-.table-plugin
-  thead
-    tr
-      background-color: #f8f8f8
+.table-plugin {
+  & tbody tr {
+    &:nth-of-type(odd) {
+      background-color: $table-row-odd-bg-color;
+    }
 
-  tbody
-    tr
-      &:nth-child(2n)
-        background-color: #f8f8f8
+    &:hover {
+      background-color: $table-row-hover-bg-color;
+    }
+  }
+}

source/css/_common/components/post/post.styl

@@ -86,34 +86,6 @@
     color: $post-end-color;
   }
 
-  &-copyright {
-    position: relative;
-    margin: 0 0 1rem;
-    border: 1px solid $post-copyright-border-color;
-    padding: .8rem 1rem;
-    width: 100%;
-    transition-property: box-shadow;
-    transition-ease();
-
-    &:hover {
-      box-shadow: 0 0 5px 5px $post-copyright-shadow-color;
-    }
-
-    &-author,
-    &-link,
-    &-notice {
-      &-name {
-        font-weight: $font-weight-bold;
-        word-wrap();
-      }
-
-      &-value {
-        color: $font-color;
-        word-wrap();
-      }
-    }
-  }
-
   &-tags {
     margin: 0 0 1rem;
 

source/css/_common/components/search/algolia.styl

@@ -40,10 +40,12 @@
       border-radius: 3px;
       width: 1.5rem;
       height: 1.5rem;
-      font-size: $font-size-larger;
+      font-size: $font-size-base + 2pxr;
       line-height: 1.5rem;
       text-align: center;
+      transition-property: color, background-color;
       cursor: pointer;
+      transition-ease();
 
       &:hover {
         color: #fff;

source/css/_common/components/search/common.styl

@@ -20,7 +20,7 @@
   padding: 1rem;
   width: 700px;
   max-height: 80%;
-  font-size: $font-size-large;
+  font-size: $font-size-base + 2px;
   color: $font-color;
   background-color: $white-light;
 }

source/css/_common/components/sidebar/index.styl

-.sidebar-inner {
-  border-radius: 5px;
-  padding: 1rem;
-  width: 100%;
-  font-size: $font-size-sidebar;
-  background-color: $white;
-
-  &.sticky {
-    position: fixed;
-    top: convert(hexo-config('sidebar.offsetTop') || '30px');
-    z-index: $z-index0;
-    transform: translateZ(0);
-  }
-
+.sidebar {
   .hide {
     display: none;
   }
-}
-
-// TODO
-.sidebar-nav {
-  padding-bottom: 1em;
-  text-align: center;
 
-  &-toc,
-  &-ov {
-    border-bottom: 1px solid #fff;
-    padding: .3em .5em;
-    color: $sidebar-nav-text-color;
-    transition: opacity .2s;
-
-    &:hover {
-      color: $sidebar-nav-text-hover-color;
-      cursor: pointer;
-    }
+  &-inner {
+    border-radius: 5px;
+    padding: 1rem;
+    width: convert(hexo-config('sidebar.width') || '$sidebar-width');
+    font-size: $font-size-sidebar;
+    background-color: $white;
   }
 
-  .current {
-    border-color: $sidebar-nav-text-hover-color;
-    color: $sidebar-nav-text-hover-color;
-  }
-}
-
-// TODO
-.sidebar-toc {
-  overflow: auto;
-  position: relative;
-  max-height: 70vh;
-
-  if (hexo-config('toc.wrap')) {
-    white-space: normal;
-    word-break: break-all;
-  } else {
-    white-space: nowrap;
-    word-break: normal;
-  }
+  &-nav {
+    padding-bottom: 1em;
+    text-align: center;
 
-  if (!hexo-config('toc.expand_all')) {
-    .toc .toc-child {
-      display: none;
-    }
+    &-toc,
+    &-ov {
+      border-bottom: 1px solid #fff;
+      padding: .3em .5em;
+      color: $sidebar-nav-text-color;
+      transition: opacity .2s;
 
-    .toc .active > .toc-child {
-      display: block;
+      &:hover {
+        color: $sidebar-nav-text-hover-color;
+        cursor: pointer;
+      }
     }
 
-    .toc .current > .toc-child {
-      display: block;
+    .current {
+      border-color: $sidebar-nav-text-hover-color;
+      color: $sidebar-nav-text-hover-color;
     }
   }
 
-  .active,
-  .current {
-    & > a {
-      color: $orange-dark;
-      transition: color .3s;
+  &-toc {
+    overflow: auto;
+    position: relative;
+    max-height: 70vh;
+
+    if (hexo-config('toc.wrap')) {
+      word-wrap();
+    } else {
+      white-space: nowrap;
     }
-  }
 
-  ol,
-  li {
-    list-style: none;
-  }
+    if (!hexo-config('toc.expand_all')) {
+      .toc .toc-child {
+        display: none;
+      }
 
-  ol {
-    margin: 0;
-    padding-left: 1em;
-  }
-}
+      .toc .active > .toc-child {
+        display: block;
+      }
 
-.sidebar-ov {
-  & > div {
-    if (hexo-config('sidebar.horizon_line')) {
-      &:not(:last-child) {
-        border-bottom: 1px dashed $sidebar-horizon-line-color;
+      .toc .current > .toc-child {
+        display: block;
       }
     }
-  }
 
-  &-author {
-    width: 100%;
-    text-align: center;
-
-    &__img {
-      width: 120px;
-      height: 120px;
-      opacity: hexo-config('author.avatar.opacity');
-
-      if (hexo-config('author.avatar.rounded')) {
-        border-radius: 50%;
-      } else {
-        border-radius: 2px;
+    .active,
+    .current {
+      & > a {
+        color: $orange-dark;
+        transition: color .3s;
       }
+    }
 
-      &:hover {
-        animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out;
-      }
+    ol,
+    li {
+      list-style: none;
     }
 
-    &__p {
-      margin: .5rem 0 0;
-      font-weight: $font-weight-bold;
+    ol {
+      margin: 0;
+      padding-left: 1em;
     }
   }
 
-  &-social {
-    padding: .5rem 0;
-    text-align: center;
+  &-ov {
+    & > div {
+      if (hexo-config('sidebar.horizon_line')) {
+        &:not(:last-child) {
+          border-bottom: 1px dashed $sidebar-horizon-line-color;
+        }
+      }
+    }
 
-    &-item {
-      display: inline-block;
-      margin: .2rem;
+    &-author {
+      width: 100%;
       text-align: center;
 
-      if (hexo-config('social_setting.icon_only')) {
-        border-radius: 50%;
-        width: 1.5rem;
-        height: 1.5rem;
-        background-color: $sidebar-social-color;
-        transition-property: background-color;
-        transition-ease();
+      &__img {
+        width: 120px;
+        height: 120px;
+        opacity: hexo-config('author.avatar.opacity');
+
+        if (hexo-config('author.avatar.rounded')) {
+          border-radius: 50%;
+        } else {
+          border-radius: 2px;
+        }
 
         &:hover {
-          background-color: $sidebar-social-hover-color;
+          animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out;
         }
+      }
 
-        &__a {
-          display: inline-block;
-          width: 100%;
-          color: $white;
+      &__p {
+        margin: .5rem 0 0;
+        font-weight: $font-weight-bold;
+      }
+    }
 
-          &:hover {
-            color: $white;
-          }
+    &-social {
+      padding: .5rem 0;
+      text-align: center;
 
-          &--icon {
-            font-size: 1.2em;
-            line-height: 1.5rem;
-          }
-        }
-      } else {
-        &__a {
-          display: block;
-          border-radius: 3px;
-          padding: 0 .4rem;
-          color: $white;
+      &-item {
+        display: inline-block;
+        margin: .2rem;
+        text-align: center;
+
+        if (hexo-config('social_setting.icon_only')) {
+          border-radius: 50%;
+          width: 1.5rem;
+          height: 1.5rem;
           background-color: $sidebar-social-color;
-          transition-property: color, background-color;
+          transition-property: background-color;
           transition-ease();
 
           &:hover {
-            color: $white;
             background-color: $sidebar-social-hover-color;
           }
-        }
 
-        span {
-          margin-left: .2rem;
+          &__a {
+            display: inline-block;
+            width: 100%;
+            color: $white;
+
+            &:hover {
+              color: $white;
+            }
+
+            &--icon {
+              font-size: 1.2em;
+              line-height: 1.5rem;
+            }
+          }
+        } else {
+          &__a {
+            display: block;
+            border-radius: 3px;
+            padding: 0 .4rem;
+            color: $white;
+            background-color: $sidebar-social-color;
+            transition-property: color, background-color;
+            transition-ease();
+
+            &:hover {
+              color: $white;
+              background-color: $sidebar-social-hover-color;
+            }
+          }
+
+          span {
+            margin-left: .2rem;
+          }
         }
       }
     }
-  }
 
-  &-feed {
-    padding: .5rem 0;
-    text-align: center;
+    &-feed {
+      padding: .5rem 0;
+      text-align: center;
 
-    &-icon {
-      margin-right: .3em;
-    }
+      &-icon {
+        margin-right: .3em;
+      }
 
-    &-email,
-    &-rss {
-      display: inline-block;
-      width: 50%;
+      &-email,
+      &-rss {
+        display: inline-block;
+        width: 50%;
 
-      &__a {
-        transition-property: color;
-        transition-ease();
+        &__a {
+          transition-property: color;
+          transition-ease();
 
-        &--icon {
-          margin-right: .2rem;
+          &--icon {
+            margin-right: .2rem;
+          }
         }
       }
-    }
 
-    &-email__a {
-      color: $sidebar-feed-email-color;
+      &-email__a {
+        color: $sidebar-feed-email-color;
 
-      &:hover {
-        color: darken($sidebar-feed-email-color, 20%);
+        &:hover {
+          color: darken($sidebar-feed-email-color, 20%);
+        }
       }
-    }
 
-    &-rss__a {
-      color: $sidebar-feed-rss-color;
+      &-rss__a {
+        color: $sidebar-feed-rss-color;
 
-      &:hover {
-        color: darken($sidebar-feed-rss-color, 20%);
+        &:hover {
+          color: darken($sidebar-feed-rss-color, 20%);
+        }
       }
     }
-  }
 
-  &-state {
-    padding: .5rem 0;
-    text-align: center;
+    &-state {
+      padding: .5rem 0;
+      text-align: center;
 
-    &__a {
-      display: inline-block;
-      width: 33.3%;
-      line-height: 1.5em;
-      transition-property: color;
-      transition-ease();
+      &__a {
+        display: inline-block;
+        width: 33.3%;
+        line-height: 1.5em;
+        transition-property: color;
+        transition-ease();
 
-      &:not(:last-child) {
-        border-right: 1px solid $sidebar-horizon-line-color;
-      }
+        &:not(:last-child) {
+          border-right: 1px solid $sidebar-horizon-line-color;
+        }
 
-      &.posts {
-        color: $sidebar-state-post-color;
+        &.posts {
+          color: $sidebar-state-post-color;
 
-        &:hover {
-          color: darken($sidebar-state-post-color, 30%);
+          &:hover {
+            color: darken($sidebar-state-post-color, 30%);
+          }
         }
-      }
 
-      &.categories {
-        color: $sidebar-state-category-color;
+        &.categories {
+          color: $sidebar-state-category-color;
 
-        &:hover {
-          color: darken($sidebar-state-category-color, 30%);
+          &:hover {
+            color: darken($sidebar-state-category-color, 30%);
+          }
         }
-      }
 
-      &.tags {
-        color: $sidebar-state-tag-color;
+        &.tags {
+          color: $sidebar-state-tag-color;
 
-        &:hover {
-          color: darken($sidebar-state-tag-color, 30%);
+          &:hover {
+            color: darken($sidebar-state-tag-color, 30%);
+          }
         }
-      }
 
-      &--count {
-        font-weight: $font-weight-bold;
-        color: $black-dark;
+        &--count {
+          font-weight: $font-weight-bold;
+          color: $black-dark;
+        }
       }
     }
-  }
 
-  &-cc {
-    padding-top: .5rem;
-    text-align: center;
+    &-cc {
+      padding-top: .5rem;
+      text-align: center;
+    }
   }
-}
 
-.sidebar-progress {
-  overflow: hidden;
-  margin-top: .5em;
-  text-align: center;
+  &-reading {
+    overflow: hidden;
+    margin-top: .5em;
+    text-align: center;
 
-  &-read {
-    margin-bottom: .3em;
-  }
+    &-info {
+      margin-bottom: .3em;
+    }
 
-  &-line {
-    width: 100%;
-    height: convert(hexo-config('reading_progress.height') || '1px');
-    background-color: convert(hexo-config('reading_progress.color') || '#49b1f5');
-    transition-property: transform;
-    transition-ease();
-    transform: translateX(-100%);
+    &-line {
+      width: 100%;
+      height: convert(hexo-config('reading_progress.height') || '1px');
+      background-color: convert(hexo-config('reading_progress.color') || '#49b1f5');
+      transition-property: transform;
+      transition-ease();
+      transform: translateX(-100%);
+    }
   }
 }

source/css/_common/components/widgets/comments.styl

 .comments {
   margin: 1.5rem 0 0;
   width: $content-width;
+  layout-card();
 
   if (hexo-config('sidebar.position') == 'left') {
     float: right;
   } else if (hexo-config('sidebar.position') == 'right') {
     float: left;
   }
-
-  &-inner {
-    layout-card();
-  }
 }
 
 // Disqus

source/css/_common/components/widgets/copy-button.styl

+.copy-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  text-align: center;
+  color: $black-light;
+  cursor: pointer;
+
+  i {
+    color: $copy-button-color;
+  }
+}

source/css/_common/components/widgets/copy.styl

-.copy-button
-  position: absolute
-  top: 0
-  right: 0
-  width: 1.5rem
-  height: 1.5rem
-  line-height: 1.5rem
-  text-align: center
-  color: $black-light
-  cursor: pointer

source/css/_common/components/widgets/copyright.styl

+.post-copyright {
+  position: relative;
+  margin: 0 0 1rem;
+  border: 1px solid $post-copyright-border-color;
+  padding: .8rem 1rem;
+  width: 100%;
+  transition-property: box-shadow;
+  transition-ease();
+
+  &:hover {
+    box-shadow: 0 0 5px 5px $post-copyright-shadow-color;
+  }
+
+  &-author,
+  &-link,
+  &-notice {
+    &-name {
+      font-weight: $font-weight-bold;
+      word-wrap();
+    }
+
+    &-value {
+      color: $font-color;
+      word-wrap();
+    }
+  }
+}

source/css/_common/components/widgets/external-link.styl

-.external-link i
-  margin: 0 .1em 0 .2em
-  font-size: .8em
-  color: convert(hexo-config('external_link.icon.color') || '#aaa')
+.external-link i {
+  margin: 0 .1em 0 .2em;
+  font-size: .8em;
+  color: convert(hexo-config('external_link.icon.color') || '#aaa');
+}
 
-.footer-inner
-  .external-link i
-    font-size: .7em
-    color: #fff
+.footer-inner {
+  .external-link i {
+    font-size: .7em;
+    color: #fff;
+  }
+}
 
-.post-title
-  .external-link i
-    font-size: .7em
+.post-header-title {
+  .external-link i {
+    font-size: .7em;
+  }
+}

source/css/_common/components/widgets/fancybox.styl

-a.fancybox
-  cursor: zoom-in
+a.fancybox {
+  cursor: zoom-in;
+}

source/css/_common/components/widgets/gallery-image.styl

+// Gallery in post / page.
+.gallery {
+  &__img {
+    margin-bottom: convert(hexo-config('gallery_waterfall.gap_y') || '10px');
+    width: convert(hexo-config('gallery_waterfall.col_width') || '220px');
+  }
+}

source/css/_common/components/widgets/index.styl

-// @import './copyright.styl' if (hexo-config('footer.copyright.enable'))
-// @import './reward.styl' if (hexo-config('reward.enable'))
+@import './copyright.styl' if (hexo-config('footer.copyright.enable'));
+@import './reward.styl' if (hexo-config('reward.enable'));
 @import './back2top.styl' if (hexo-config('back2top.enable'));
-
-// @import './external-link.styl' if (hexo-config('external_link.icon.enable'))
-// @import './fancybox.styl' if (hexo-config('fancybox'))
-// @import './lazyload.styl' if (hexo-config('lazyload.enable'))
-// @import './recent-posts.styl'
+@import './external-link.styl' if (hexo-config('external_link.icon.enable'));
+@import './fancybox.styl' if (hexo-config('fancybox'));
+@import './zoom-image.styl' if (hexo-config('zoom_image.enable'));
+@import './gallery-image.styl' if (hexo-config('gallery_waterfall.enable'));
+@import './lazyload.styl' if (hexo-config('lazyload.enable'));
 @import './comments.styl';
-// @import './copy.styl'
-// @import './analytics/index.styl'
-// @import './search/index.styl'
-// @import './tag-plugin/index.styl'
+@import './copy-button.styl'
 @import './loading-bar.styl';
 @import './sticky-top.styl';
 @import './pagination.styl';
-@import './reward.styl';

source/css/_common/components/widgets/lazyload.styl

-.lazyload
-  &.block
-    box-sizing: content-box
-    min-width: 30px
-    min-height: 30px
+.lazyload {
+  &.block {
+    box-sizing: content-box;
+    min-width: 30px;
+    min-height: 30px;
+  }
+}

source/css/_common/components/widgets/other.styl → source/css/_common/components/widgets/zoom-image.styl

-
-// Gallery in post / page.
-.gallery-image {
-  margin-bottom: convert(hexo-config('gallery_waterfall.gap_y') || '10px');
-  width: convert(hexo-config('gallery_waterfall.col_width') || '220px');
-}
-
 .zoom-image-mask {
   position: fixed;
   top: 0;
@@ -26,7 +19,6 @@
   }
 
   &.show {
-    clearImgStyle();
     position: absolute;
     z-index: $z-index2;
     margin: 0;

source/css/_common/index.styl

 @import './scaffolding/index.styl';
 @import './outline/index.styl';
 @import './components/index.styl';
-
 @import './responsive.styl';

source/css/_common/outline/macro.styl

@@ -15,12 +15,16 @@
 
 .sidebar {
   float: convert(hexo-config('sidebar.position'));
-  width: convert(hexo-config('sidebar.width') || '$sidebar-width');
+
+  &.sticky {
+    position: fixed;
+    top: convert(hexo-config('sidebar.offsetTop') || '30px');
+    z-index: $z-index0;
+    transform: translateZ(0);
+  }
 }
 
 .content {
-  width: $content-width;
-
   if (hexo-config('sidebar.position') == 'left') {
     float: right;
   } else if (hexo-config('sidebar.position') == 'right') {
@@ -28,22 +32,10 @@
   }
 
   &-inner {
-    width: 100%;
+    width: $content-width;
     height: 100%;
     layout-card();
 
-    a {
-      &:not(.heading-link):not(.paginator-post-next__a) {
-        border-bottom: 1px solid $link-bottom-color;
-        transition-property: border-color;
-        transition-ease();
-
-        &:hover {
-          border-bottom-color: $link-bottom-hover-color;
-        }
-      }
-    }
-
     img {
       border: 1px solid $img-border-color;
       border-radius: 3px;
@@ -60,43 +52,23 @@
       }
     }
 
-    .external-link {
-      color: $gray-dark;
-
-      i {
-        margin: 0 .1rem 0 .15rem;
-        font-size: .9em;
-      }
-    }
-
     .table-container {
       overflow: auto;
       margin-bottom: 1rem;
     }
 
-    .table-plugin {
-      & tbody tr {
-        &:nth-of-type(odd) {
-          background-color: $table-row-odd-bg-color;
-        }
-
-        &:hover {
-          background-color: $table-row-hover-bg-color;
-        }
-      }
-    }
-
     .heading-link {
       color: $heading-color;
+      cursor: pointer;
 
       &::after {
         content: $icon-heading-link;
         margin-left: .3em;
         color: $heading-logo-color;
         opacity: 0;
-        @extend $font-awesome;
         transition-property: opacity;
         transition-ease();
+        fontawesome-base();
       }
 
       &:hover {

source/css/_common/responsive.styl

@@ -103,13 +103,13 @@
 // // -----------------------------------------
 // @media screen and (min-width: $xs-width)
 //   .content
-//     font-size: $font-size-large
+//     font-size: $font-size-base + 2px
 
 //   .sidebar-inner
-//     font-size: $font-size-large
+//     font-size: $font-size-base + 2px
 
 //   .footer-inner
-//     font-size: $font-size-large
+//     font-size: $font-size-base + 2px
 
 // @media screen and (max-width: $xs-width)
 //   #header

source/css/_common/scaffolding/utils.styl

@@ -55,7 +55,7 @@ popover-bg-color = alpha(#000, .7);
   position: relative;
   border-radius: 3px;
   padding: 8px 12px;
-  font-size: $font-size-large;
+  font-size: $font-size-base + 2px;
   line-height: 1rem;
   color: $black-light;
   background-color: #fff;

source/css/_mixins/index.styl

@@ -93,3 +93,11 @@ layout-card() {
   padding: 1rem 2rem;
   background-color: $white;
 }
+
+fontawesome-base() {
+  font: normal normal normal 14px / 1 $font-family-icons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

source/css/_variables/index.styl

@@ -35,7 +35,7 @@ $md-width = 992px - 0.02px
 $lg-width = 1200px - 0.02px
 
 // Width
-$sidebar-width  = 260px
+$sidebar-width  = convert(hexo-config('sidebar.width') || '260px')
 $side-main-gap  = 20px
 $content-width  = $md-width
 $main-aside-gap = 40px
@@ -187,7 +187,7 @@ $loading-bar-bg-color              = #77b6ff
 $loading-bar-shadow-color          = alpha(#77b6ff, .7)
 
 // Notification
-$alert-success                     = #52c41a
+$alert-success-color               = #52c41a
 $alert-info-color                  = #1890ff
 $alert-warning-color               = #faad14
 $alert-error-color                 = #f5222d
@@ -195,13 +195,6 @@ $alert-error-color                 = #f5222d
 // -------------------------------------------
 // Icon font
 // -------------------------------------------
-$font-awesome
-  font: normal normal normal 14px/1 $font-family-icons;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
 $icon-heading-link        = '\f0c1'
 
 $icon-note-default        = '\f0a9'

source/css/index.styl

 // Variables Layer
 // --------------------------------------------------
 @import './_variables/index.styl';
-
 // Mixins Layer
 // --------------------------------------------------
 @import './_mixins/index.styl';
-
 // Common Layer
 // --------------------------------------------------
 @import './_common/index.styl';
-
 // Custom Layer
 // --------------------------------------------------
 @import './_custom/index.styl';

source/js/header.js

 $(document).ready(function () {
   var $menu = $('.header-nav-menu');
-  var $menuItem = $('.header-nav-menu .menu-item');
+  var $menuItem = $('.header-nav-menu-item');
 
   $(document).on('click', function () {
     $menu.removeClass('show');

source/js/scroll.js

@@ -5,18 +5,19 @@ $(document).ready(function () {
   var isNavShow = true;
 
   function headerNavScroll () {
+    var $headerNav = $('.header-nav');
     var scrollTop = $(window).scrollTop();
     var delta = scrollTop - prevScrollTop;
 
     if (scrollTop === 0) {
-      $('.header-nav').removeClass('fixed');
-      $('.header-nav').removeClass('slider-up');
-      $('.header-nav').addClass('slider-down');
+      $headerNav.removeClass('fixed');
+      $headerNav.removeClass('slider-up');
+      $headerNav.addClass('slider-down');
 
       isNavFix = false;
     } else {
       if (!isNavFix) {
-        $('.header-nav').addClass('fixed');
+        $headerNav.addClass('fixed');
 
         isNavFix = true;
       }
@@ -25,13 +26,13 @@ $(document).ready(function () {
       // Make the state of nav bar not change due to tiny scrolling.
       if (Math.abs(delta) > MIN_SCROLL_TO_CHANGE_NAV) {
         if (isNavShow && delta > 0) {
-          $('.header-nav').removeClass('slider-down');
-          $('.header-nav').addClass('slider-up');
+          $headerNav.removeClass('slider-down');
+          $headerNav.addClass('slider-up');
 
           isNavShow = false;
         } else if (!isNavShow && delta < 0) {
-          $('.header-nav').removeClass('slider-up');
-          $('.header-nav').addClass('slider-down');
+          $headerNav.removeClass('slider-up');
+          $headerNav.addClass('slider-down');
 
           isNavShow = true;
         }
@@ -48,10 +49,11 @@ $(document).ready(function () {
   }
 
   var isBack2topShow = false;
+
   // Back the page to top.
   function back2top () {
     function back2topHandler () {
-      var $top = $('#back-top');
+      var $top = $('#back2top');
       var scrollTop = $(window).scrollTop();
 
       if (scrollTop !== 0) {
@@ -72,7 +74,7 @@ $(document).ready(function () {
       back2topHandler();
     }, 500));
 
-    $('#back-top').on('click', function () {
+    $('#back2top').on('click', function () {
       $('body').velocity('stop').velocity('scroll');
     });
   }
@@ -87,7 +89,7 @@ $(document).ready(function () {
 
   Stun.utils.pjaxReloadScroll = function () {
     // Click the heading.
-    $('.content')
+    $('#content')
       .find('h1,h2,h3,h4,h5,h6')
       .on('click', function () {
         scrollHeadingToTop('#' + $(this).attr('id'));

source/js/sidebar.js

@@ -6,14 +6,10 @@ $(document).ready(function () {
   var isRemoveTocClass = false;
   var tocDepth = CONFIG.sidebar.renderTocDepth;
   // Optimize selector by theme config.
-  var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6'.slice(0, tocDepth * 3);
+  var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6,'.slice(0, tocDepth * 3).slice(0, -1);
   var $postBody = $('.post-body');
   var $allTocItem = $('.sidebar-toc li');
 
-  if (tocDepth !== 6) {
-    HEADING_SELECTOR = HEADING_SELECTOR.slice(0, -1);
-  }
-
   // Automatically expand items in the article directory
   //   based on the scrolling of heading in the article.
   function autoSpreadToc () {
@@ -42,43 +38,44 @@ $(document).ready(function () {
     }
 
     if (currHeading !== lastHeading) {
-      var targetLink = $('.sidebar-toc a[href="#' + currHeading + '"]');
+      var $targetLink = $('.sidebar-toc a[href="#' + currHeading + '"]');
 
       // If the relevant "<a>" is not found, remain the state of the toc,
       //   either, remove styles for all active states.
-      if (targetLink[0]) {
+      if ($targetLink[0]) {
         $allTocItem.removeClass('active current');
       }
-      targetLink.parents('li').addClass('active');
-      targetLink.parent().addClass('current');
+      $targetLink.parents('li').addClass('active');
+      $targetLink.parent().addClass('current');
       lastHeading = currHeading;
     }
   }
 
   // Whether toc needs scrolling.
   var isTocScroll = false;
+
   // Scroll the post toc to the middle.
   function scrollTocToMiddle () {
-    var $tocWrapperHeight = $('.sidebar-toc').height();
+    var $tocWrapHeight = $('.sidebar-toc').height();
     var $tocHeight = $('.sidebar-toc .toc').height();
 
-    if ($tocHeight <= $tocWrapperHeight) return;
+    if ($tocHeight <= $tocWrapHeight) return;
 
-    var $tocWrapper = $('.sidebar-toc');
+    var $tocWrap = $('.sidebar-toc');
     var $currTocItem = $('.sidebar-toc .current a');
 
-    if ($currTocItem[0] && $tocWrapper[0]) {
-      var tocTop = $currTocItem.offset().top - $tocWrapper.offset().top;
+    if ($currTocItem[0] && $tocWrap[0]) {
+      var tocTop = $currTocItem.offset().top - $tocWrap.offset().top;
 
-      isTocScroll = tocTop > $tocWrapperHeight || tocTop < 0;
+      isTocScroll = tocTop > $tocWrapHeight || tocTop < 0;
     }
 
     if (isTocScroll) {
       $currTocItem
         .velocity('stop')
         .velocity('scroll', {
-          container: $tocWrapper,
-          offset: (-$tocWrapperHeight / 2),
+          container: $tocWrap,
+          offset: (-$tocWrapHeight / 2),
           duration: 500,
           easing: 'easeOutQuart'
         });
@@ -91,28 +88,24 @@ $(document).ready(function () {
 
   // Sticky the sidebar when it arrived the top.
   function sidebarSticky () {
-    var mainInner = $('.main-inner')[0];
-
-    if (mainInner) {
-      var targetY = mainInner.getBoundingClientRect().top;
-
-      if (targetY < SIDEBAR_STICKY_TOP) {
-        if (!isSidebarSticky) {
-          $('.sidebar-inner').addClass('sticky');
-          isSidebarSticky = true;
-        }
-      } else {
-        if (isSidebarSticky) {
-          $('.sidebar-inner').removeClass('sticky');
-          isSidebarSticky = false;
-        }
+    var targetY = $('#main')[0].getBoundingClientRect().top;
+
+    if (targetY < SIDEBAR_STICKY_TOP) {
+      if (!isSidebarSticky) {
+        $('#sidebar').addClass('sticky');
+        isSidebarSticky = true;
+      }
+    } else {
+      if (isSidebarSticky) {
+        $('#sidebar').removeClass('sticky');
+        isSidebarSticky = false;
       }
     }
   }
 
   // Update the reading progress lines of post.
   function readProgress () {
-    var $post = $('.content');
+    var $post = $('#content');
     var scrollH = ($post[0] &&
       $post[0].getBoundingClientRect().top * -1) || 0;
 
@@ -120,8 +113,8 @@ $(document).ready(function () {
       Math.abs($post.height() - $(window).height())) * 100);
     percent = percent > 100 ? 100 : percent < 0 ? 0 : percent;
 
-    $('.sidebar-progress-number').html(percent);
-    $('.sidebar-progress-line').css(
+    $('.sidebar-reading-info-num').html(percent);
+    $('.sidebar-reading-line').css(
       'transform', 'translateX(' + (percent - 100) + '%)'
     );
   }
@@ -143,29 +136,35 @@ $(document).ready(function () {
   }, 150));
 
   Stun.utils.pjaxReloadSidebar = function () {
-    var $tocWrapper = $('.sidebar-toc');
-    var $view = $('.sidebar-overview');
+    var $navToc = $('.sidebar-nav-toc');
+    var $navOv = $('.sidebar-nav-ov');
+    var $tocWrap = $('.sidebar-toc');
+    var $overview = $('.sidebar-ov');
 
-    $('.sidebar-nav-toc').on('click', function () {
-      $('.sidebar-nav-toc').toggleClass('current');
-      $('.sidebar-nav-overview').toggleClass('current');
+    $navToc.on('click', function () {
+      if ($(this).hasClass('current')) return;
 
-      $tocWrapper.css('display', 'block');
-      $tocWrapper.velocity('fadeIn');
+      $navToc.addClass('current');
+      $navOv.removeClass('current');
 
-      $view.css('display', 'none');
-      $view.velocity('fadeOut');
+      $tocWrap.css('display', 'block');
+      $tocWrap.velocity('stop').velocity('fadeIn');
+
+      $overview.css('display', 'none');
+      $overview.velocity('stop').velocity('fadeOut');
     });
 
-    $('.sidebar-nav-overview').on('click', function () {
-      $('.sidebar-nav-toc').toggleClass('current');
-      $('.sidebar-nav-overview').toggleClass('current');
+    $navOv.on('click', function () {
+      if ($(this).hasClass('current')) return;
+
+      $navOv.addClass('current');
+      $navToc.removeClass('current');
 
-      $tocWrapper.css('display', 'none');
-      $tocWrapper.velocity('fadeOut');
+      $tocWrap.css('display', 'none');
+      $tocWrap.velocity('stop').velocity('fadeOut');
 
-      $view.css('display', 'block');
-      $view.velocity('fadeIn');
+      $overview.css('display', 'block');
+      $overview.velocity('stop').velocity('fadeIn');
     });
   };
 

source/js/stun-boot.js

@@ -8,14 +8,15 @@ $(document).ready(function () {
 
   Stun.utils.pjaxReloadBoot = function () {
     this.initTocDisplay();
-    this.addCopyButtonToCopyright();
+    this.addCopyButton();
     this.registerCopyEvent();
+
     CONFIG.reward && this.registerShowReward();
-    CONFIG.gallery_waterfall && this.showImageToWaterfall();
     CONFIG.lazyload && this.lazyLoadImage();
+    CONFIG.gallery_waterfall && this.showImageToWaterfall();
 
     if (CONFIG.external_link) {
-      var WRAPPER = '.archive-inner, .post-title';
+      var WRAPPER = '.archive, .post-header-title';
 
       this.addIconToExternalLink(WRAPPER);
     }

source/js/utils.js

@@ -111,10 +111,11 @@ Stun.utils = Stun.$u = {
     };
 
     if (!$('.stun-alert')[0]) {
+      var fa_prfix = CONFIG.fontawesome.prefix;
       var $alert = $(
         '<div class="stun-message">' +
           '<div class="stun-alert stun-alert-' + status + '">' +
-            '<i class="stun-alert-icon fa fa-' + icon[status] + '"></i>' +
+            '<i class="stun-alert-icon ' + fa_prfix + ' fa-' + icon[status] + '"></i>' +
             '<span class="stun-alert-description">' + text + '</span>' +
           '</div>' +
         '</div>'
@@ -179,7 +180,7 @@ Stun.utils = Stun.$u = {
 
     $('.sidebar-nav').addClass('hide');
     $('.sidebar-toc').addClass('hide');
-    $('.sidebar-overview').removeClass('hide');
+    $('.sidebar-ov').removeClass('hide');
   },
   // Wrap images with fancybox support.
   wrapImageWithFancyBox: function () {
@@ -235,14 +236,12 @@ Stun.utils = Stun.$u = {
     var colWidth = parseInt(gConfig.col_width);
     var colGapX = parseInt(gConfig.gap_x);
 
-    this.waitAllImageLoad('.gallery img', function () {
-      $('.gallery').masonry({
-        itemSelector: '.gallery-image',
-        columnWidth: colWidth,
-        percentPosition: true,
-        gutter: colGapX,
-        transitionDuration: 0
-      });
+    $('.gallery').masonry({
+      itemSelector: '.gallery__img',
+      columnWidth: colWidth,
+      percentPosition: true,
+      gutter: colGapX,
+      transitionDuration: 0
     });
   },
   // Lazy load the images of post.
@@ -251,11 +250,12 @@ Stun.utils = Stun.$u = {
   },
   // Add a mark icon to the link with `target="_blank"` attribute.
   addIconToExternalLink: function (container) {
-    if (!$(container)[0]) return;
+    if (!$(container).length) return;
 
+    var fa_prfix = CONFIG.fontawesome.prefix;
     var $wrapper = $('<span class="external-link"></span>');
     var $icon = $(
-      '<i class="fa fa-' +
+      '<i class="' + fa_prfix + ' fa-' +
         CONFIG.external_link.icon.name +
       '"></i>'
     );
@@ -275,10 +275,10 @@ Stun.utils = Stun.$u = {
       var isNext = e.keyCode === _this.codeToKeyCode('ArrowRight');
 
       if (e.ctrlKey && isPrev) {
-        var prev = $('.article-prev').find('a')[0];
+        var prev = $('.paginator-post-prev').find('a')[0];
         prev && prev.click();
       } else if (e.ctrlKey && isNext) {
-        var next = $('.article-next').find('a')[0];
+        var next = $('.paginator-post-next').find('a')[0];
         next && next.click();
       }
     });
@@ -286,14 +286,14 @@ Stun.utils = Stun.$u = {
   // Show / Hide the reward QR.
   registerShowReward: function () {
     $('.reward-button').on('click', function () {
-      var $container = $('.reward-qr-wrapper');
+      var $container = $('.reward-qr');
 
       if ($container.is(':visible')) {
         $container.css('display', 'none');
       } else {
         $container
           .velocity('stop')
-          .velocity('transition.slideDownBigIn', {
+          .velocity('transition.slideDownIn', {
             duration: 300
           });
       }
@@ -301,7 +301,7 @@ Stun.utils = Stun.$u = {
   },
   // Click to zoom in image, without fancybox.
   registerClickToZoomImage: function () {
-    $('.content img').not(':hidden').each(function () {
+    $('#content img').not(':hidden').each(function () {
       $(this).addClass('zoom-image');
     });
 
@@ -371,7 +371,7 @@ Stun.utils = Stun.$u = {
       });
     }
   },
-  addCopyButtonToCopyright: function () {
+  addCopyButton: function () {
     $('figure.highlight').each(function () {
       if (!$(this).find('figcaption')[0]) {
         var CODEBLOCK_CLASS_NAME = 'highlight';
@@ -389,11 +389,12 @@ Stun.utils = Stun.$u = {
       }
     });
 
+    var fa_prfix = CONFIG.fontawesome.prefix;
     var $copyIcon = $(
       '<div class="copy-button" data-popover=' +
         CONFIG.prompt.copy_button +
         ' data-popover-pos="up">' +
-        '<i class="fa fa-clipboard"></i>' +
+        '<i class="' + fa_prfix + ' fa-clipboard"></i>' +
       '</div>'
     );