refactor: Refactor project & finish basic layout

.stylintrc

 {
   "blocks": false,
-  "brackets": "never",
+  "brackets": "always",
+  "semicolons": "always",
   "colons": "always",
   "colors": "always",
   "commaSpace": "always",
@@ -34,7 +35,6 @@
     "showHeaders": false,
     "truncate": true
   },
-  "semicolons": "never",
   "sortOrder": [
     "content",
     "display",

languages/en.yml

 # Site title
 title:
-  home: Home page
-  archives: Archives page
-  categories: Categories page
-  tags: Tags page
-  about: About page
+  home: Home
+  archive: Archive
+  category: Category
+  tag: Tag
+  about: About
 
 # Header nav
 nav:

languages/zh-CN.yml

 # 网站标题
 title:
   home: 首页
-  archives: 归档页
-  categories: 分类页
-  tags: 标签页
-  about: 关于页
+  archive: 归档
+  category: 分类
+  tag: 标签
+  about: 关于
 
 # 导航栏
 nav:

layout/_common/footer.pug

-footer#footer
-  -
-    var footer = theme.footer
-    var nowYear = new Date().getFullYear()
-    var startYear = footer.copyright.enable ? footer.copyright.since || nowYear : nowYear
-    var endYear = footer.copyright.enable ? footer.copyright.end || nowYear : nowYear
-
-  div.footer-inner
-    if footer.copyright.enable || footer.beian.enable
-      div
-        if footer.copyright.enable
-          span!= `© ${startYear}` + (startYear != endYear ? `-${endYear}` : "")
-          if footer.icon.enable
-            span(
-              class=`fa fa-${footer.icon.name} ${footer.icon.animation ? "heart-beat" : ""}`
-              style=`color: ${footer.icon.color}`
-            ).footer-separator
-          else
-            span= " "
-          span= footer.copyright.text || config.author + "."
-
-        if footer.copyright.enable && footer.beian.enable
-          span.footer-separator= "|"
-
-        if footer.beian.enable
-          span!= footer.beian.icp
-
-    if footer.powered.enable || footer.theme.enable
-      div
-        if footer.powered.enable
-          span.footer-powered
-            - var HEXO_URL = "http://hexo.io/";
-            != _p("footer.powered", link_to(HEXO_URL, "hexo", { external: true }))
-          if footer.powered.version
-            span= " v" + hexo_env("version") + "."
-
-        if footer.powered.enable && footer.theme.enable
-          span.footer-separator= "|"
-
-        if footer.theme.enable
-          span= _p("footer.theme") + " - "
-            - var STUN_URL = "https://github.com/liuyib/hexo-theme-stun/";
-            != link_to(STUN_URL, "stun", { external: true })
-          if footer.theme.version
-            span= " v" + stun_env("version") + "."
-
-    if theme.busuanzi.enable
-      include ../_components/analytics/busuanzi.pug
-
-    if footer.custom.enable
-      div
-        span!= footer.custom.text

layout/_common/header.pug

-include ../_mixins/multi-menu.pug
-
-header#header
-  div.loading-bar
-    div.progress
-
-  nav.header-nav
-    div.header-nav-inner
-      div.fa.fa-bars.header-nav-menu-icon
-
-      if theme.algolia_search.enable || theme.local_search.enable
-        div.header-nav-search
-          if !theme.menu_settings.text_only
-            i.fa.fa-search
-          if !theme.menu_settings.icon_only
-            span!= _p("nav.search")
-
-      div.header-nav-menu
-        +multiMenu(theme.menu)
-
-  div.header-info
-    div.header-info-inner
-      div.header-info-title= config.title
-      div.header-info-subtitle= config.subtitle

layout/_common/layout.pug

-doctype html
-html(lang=config.language)
-  head
-    include ./head.pug
-  body
-    #container
-      include ./header.pug
-      include ./main.pug
-      include ./footer.pug
-
-      if theme.back2top.enable
-        include ../_components/back2top.pug
-
-    include ../_components/search/index.pug
-
-    include ../_scripts/vendors.pug
-    include ../_third-party/search/index.pug
-
-    if theme.pjax && theme.pjax.enable
-      include ../_third-party/pjax.pug
-
-      div#pjax-reload
-        include ../_third-party/math/index.pug
-        include ../_third-party/quicklink.pug
-    else
-      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

layout/_common/sidebar.pug

-aside#sidebar
-  div.sidebar-inner
-    - var isShowPostToc = page.toc === false ? page.toc : (theme.toc.enable && is_post())
-    if isShowPostToc
-      div.sidebar-nav
-        span.sidebar-nav-toc.current= _p("sidebar.catalog")
-        span.sidebar-nav-overview= _p("sidebar.overview")
-    
-    section(class=`${isShowPostToc ? "" : "hide"}`).sidebar-toc
-      if page.content
-        - var tocMaxDepth = page.toc_max_depth || theme.toc.max_depth || 6
-        div!= toc(page.content, {list_number: theme.toc.number, max_depth: tocMaxDepth})
-
-    section(class=`${isShowPostToc ? "hide" : ""}`).sidebar-overview
-      if theme.author.enable
-        div.sidebar-author
-          if theme.author.avatar.url
-            img(src=theme.author.avatar.url alt="avatar").sidebar-author-avatar
-
-          if theme.author.motto
-            p.sidebar-author-motto= theme.author.motto
-
-      if theme.social_setting.enable
-        div.sidebar-social
-          for value, name in (theme.social || {})
-            if name && value
-              - var socialItem = value.split("||")
-              - var socialLinkPath = _.trim(_.get(socialItem, "[0]"))
-              - var socialLinkIcon = _.trim(_.get(socialItem, "[1]"))
-              span.sidebar-social-item
-                a(href=socialLinkPath target="_blank" rel="noopener"
-                    data-popover=_p(`social.${name}`) data-popover-pos=`${
-                      theme.social_setting.icon_only ? "up" : "none"}`)
-
-                  if socialLinkIcon && socialLinkIcon.match("origin:")
-                    span!= socialLinkIcon.split("origin:")[1]
-                  else
-                    i(class=`fa fa-${socialLinkIcon ?
-                        socialLinkIcon : "question-circle-o"}`)
-                  
-                  if !theme.social_setting.icon_only
-                    span= name
-      
-      if theme.feed.enable
-        div.sidebar-feed
-          - var feedEmail = theme.feed.email
-          if feedEmail
-            span.sidebar-feed-email
-              a(href=feedEmail target="_blank" rel="noopener")
-                i.fa.fa-envelope.sidebar-feed-icon
-                span= "Email "
-                span= _p("sidebar.subscribe")
-          
-          - var feedRSS = theme.feed.rss
-          if feedRSS
-            span.sidebar-feed-rss
-              a(href=url_for(feedRSS) target="_blank" rel="noopener")
-                i.fa.fa-rss.sidebar-feed-icon
-                span= "RSS "
-                span= _p("sidebar.subscribe")
-      
-      if theme.menu
-        div.sidebar-state
-          if theme.menu.archives
-            - var menuArchives = _.trim(_.get(theme.menu.archives.split("||"), "[0]"))
-            span.sidebar-state-item.sidebar-state-posts
-              a(href=menuArchives)
-                div.sidebar-state-item-count= site.posts.length
-                div.sidebar-state-item-name= _p("sidebar.archives")
-          if theme.menu.categories
-            - var menuCategories = _.trim(_.get(theme.menu.categories.split("||"), "[0]"))
-            span.sidebar-state-item.sidebar-state-categories
-              a(href=menuCategories)
-                div.sidebar-state-item-count= site.categories.length
-                div.sidebar-state-item-name= _p("sidebar.categories")
-          if theme.menu.tags
-            - var menuTags = _.trim(_.get(theme.menu.tags.split("||"), "[0]"))
-            span.sidebar-state-item.sidebar-state-tags
-              a(href=menuTags)
-                div.sidebar-state-item-count= site.tags.length
-                div.sidebar-state-item-name= _p("sidebar.tags")
-      
-      if theme.creative_commons.enable && theme.creative_commons.sidebar
-        - var themeCC = theme.creative_commons
-        - var ccLicense = themeCC.license && themeCC.license.toLowerCase()
-        - var ccLanguage = (themeCC.language && themeCC.language.toLowerCase()) || "en"
-        - var ccURL = `https://creativecommons.org/licenses/${ccLicense}/4.0/deed.${ccLanguage}`
-        div.sidebar-cc
-          a(href=ccURL target="_blank" rel="noopener"
-              data-popover=_p("prompt.creative_commons") data-popover-pos="up")
-            img(src=url_for(`/${theme.images}/cc-${ccLicense}.svg`) alt=_p("creative_commons"))
-
-    if theme.reading_progress.enable && is_post()
-      div.sidebar-progress
-        div.sidebar-progress-read
-          span= _p("sidebar.read_info")
-          span.sidebar-progress-number
-        div.sidebar-progress-line

layout/_components/sticky-top.pug

-div(data-popover=_p("post.sticky") data-popover-pos="up").sticky-top
-  i(class=`fa fa-${theme.stick_top.icon}`)

layout/_layout.pug

+doctype html
+html(lang=config.language)
+  head
+    != partial('./_partials/head/head.pug', null, { cache: theme.cache })
+  body
+    div#container.container
+      header#header.header
+        div.header-inner
+          != partial('./_partials/header/header.pug', null, { cache: theme.cache })
+
+      main#main.main
+        div.main-inner
+          div#content.content
+            div.content-inner(class=`${is_home() ? 'home' : ''}`)
+              block content
+
+          aside#sidebar.sidebar
+            div.sidebar-inner
+              != partial('./_partials/sidebar/sidebar.pug', null, { cache: theme.cache })
+
+      footer#footer.footer
+        div.footer-inner
+          != partial('./_partials/footer/footer.pug', null, { cache: theme.cache })
+
+    //-   if theme.back2top.enable
+    //-     include ../_components/back2top.pug
+
+    //- include ../_components/search/index.pug
+
+    //- include ../_scripts/vendors.pug
+    //- include ../_third-party/search/index.pug
+
+    //- if theme.pjax && theme.pjax.enable
+    //-   include ../_third-party/pjax.pug
+
+    //-   div#pjax-reload
+    //-     include ../_third-party/math/index.pug
+    //-     include ../_third-party/quicklink.pug
+    //- else
+    //-   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

layout/_mixins/multi-menu.pug → layout/_mixins/menu-item.pug

-mixin multiMenu(menu)
+mixin menuItem(menu)
   each value, name in (menu || {})
     if name && value
-      - var item = value.split("||")
-      - var menuPath = _.trim(_.get(item, "[0]"))
-      - var menuIcon = _.trim(_.get(item, "[1]"))
+      - var item = value.split('||')
+      - var menuPath = _.trim(_.get(item, '[0]'))
+      - var menuIcon = _.trim(_.get(item, '[1]'))
       - var isSubMenu = false
+      - var fa_prefix = theme.fa_prefix || 'fa'
+
       if menuPath.toLowerCase() === 'javascript:;'
         - isSubMenu = true
-      div.menu-item
-        a(href=menuPath ? menuPath : "/").menu-item-inner
+
+      div.header-nav-menu-item
+        a(href=menuPath ? menuPath : "#").header-nav-menu-item__a
           if !theme.menu_settings.text_only && !!menuIcon
-            i(class=`fa fa-${menuIcon}`)
+            i(class=`${fa_prefix} fa-${menuIcon}`)
           if !theme.menu_settings.icon_only
-            != _p(`menu.${name}`)
+            != __(`menu.${name}`)
         if isSubMenu
           div.header-nav-submenu
-            +multiMenu(theme.submenu[name])
+            +menuItem(theme.submenu[name])

layout/_mixins/posts-sort.pug

-mixin articleSort(posts)
-  section.article-sort
+mixin postSort(posts)
+  section.archive-post
     - var year, tmpYear
     - posts.each(function (post) {
       if post.date
@@ -7,17 +7,17 @@ mixin articleSort(posts)
 
       if tmpYear !== year
         - year = tmpYear
-        time.article-sort-item.year= year
+        time.archive-post-item.year= year
 
-      post.article-sort-item
+      post.archive-post-item
         if post.date
-          time.article-sort-item__time= full_date(post.date, "MM-DD")
-          h2.article-sort-item__title
+          time.archive-post-item__time= full_date(post.date, "MM-DD")
+          h2.archive-post-item-title
             if post.link
-              a(href=url_for(post.link) target="_blank" rel="noopener")= post.title || post.link
+              a.archive-post-item-title__a(href=url_for(post.link) target="_blank" rel="noopener")= post.title || post.link
             else
-              a(href=url_for(post.path))= post.title || _p("post.untitled")
+              a.archive-post-item-title__a(href=url_for(post.path))= post.title || _p("post.untitled")
 
         if post.top
-          include ../_components/sticky-top.pug
+          include ../_partials/widgets/sticky-top.pug
     - })

layout/_partials/footer/footer.pug

+-
+  var footer = theme.footer
+  var nowYear = new Date().getFullYear()
+  var startYear = copyright ? footer.copyright.since || nowYear : nowYear
+  var endYear = copyright ? footer.copyright.end || nowYear : nowYear
+  var fa_prefix = theme.fa_prefix || 'fa'
+
+- var footerCopyright = footer.copyright.enable
+- var footerBeian = footer.beian.enable
+
+if footerCopyright || footerBeian
+  div
+    if footerCopyright
+      span!= `© ${startYear}` + (startYear != endYear ? `-${endYear}` : "")
+      if footer.icon.enable
+        span(class=`${fa_prefix} fa-${footer.icon.name} footer-icon`)
+      span= footer.copyright.text || config.author + "."
+    if footerCopyright && footerBeian
+      span= " | "
+    if footerBeian
+      span!= footer.beian.icp
+
+- var footerPowered = footer.powered.enable
+- var footerTheme = footer.theme.enable
+
+if footerPowered || footerTheme
+  div
+    if footerPowered
+      span
+        - var HEXO_URL = "http://hexo.io/";
+        != _p("footer.powered", link_to(HEXO_URL, "hexo", { external: true }))
+      if footer.powered.version
+        span= " v" + hexo_env("version") + "."
+    if footerPowered && footerTheme
+      span= " | "
+    if footerTheme
+      span= __("footer.theme") + " - "
+        - var STUN_URL = "https://github.com/liuyib/hexo-theme-stun/";
+        != link_to(STUN_URL, "stun", { external: true })
+      if footer.theme.version
+        span= " v" + stun_env("version") + "."
+
+//- if theme.busuanzi.enable
+//-   include ../_components/analytics/busuanzi.pug
+
+if footer.custom.enable
+  div
+    span!= footer.custom.text

layout/_common/head.pug → layout/_partials/head/head.pug

 -
-  var pageTitle = page.title || config.subtitle || ""
-
-  if (page.type === "tags") pageTitle = _p("title.tags")
-  if (page.type === "categories") pageTitle = _p("title.categories")
-  if (is_archive()) pageTitle = _p("title.archives")
-  if (is_tag()) pageTitle = _p("title.tags") + ": " + page.tag
-  if (is_category()) pageTitle = _p("title.categories") + ": " + page.category
-  if (is_month()) pageTitle += ": " + page.year + "/" + page.month
-  if (is_year()) pageTitle += ": " + page.year
-
-  pageTitle ? pageTitle += " | " + config.title : pageTitle = config.title
-
-  var pageDescription = page.description || page.title || config.description || ""
-  var pageKeywords = [config.author, config.title, config.keywords].filter(i => !!i).join(", ")
-  var pageAuthor = config.email ? `${config.author}: ${config.email}` : config.author
-  var pageCopyright = config.copyright || config.author
+  var title = __('title') !== 'title' ? __('title') : config.title
+  var subtitle = __('subtitle') !== 'subtitle' ? __('subtitle') : config.subtitle
+  var author = __('author') !== 'author' ? __('author') : config.author
+  var description = __('description') !== 'description' ? __('description') : config.description
+  var keywords = config.author + ', ' + config.title
+  var title_suffix = ' | ' + title
+
+  if (is_home()) title = title + (theme.index_subtitle ? subtitle : '')
+  else if (is_archive()) title = __('title.archive') + title_suffix
+  else if (is_category()) title = __('title.category') + ': ' + page.category + title_suffix
+  else if (is_tag()) title = __('title.tag') + ': ' + page.tag + title_suffix
+  else if (is_post()) title = page.title + title_suffix
+  else if (is_page())
+    if (page.type === 'tags') title = __('title.tag') + title_suffix
+    else if (page.type === 'categories') title = __('title.category') + title_suffix
+    else if (page.type === 'about') title = __('title.about') + title_suffix
+    else title = page.title + title_suffix
+  else title = page.title + title_suffix
 
 meta(charset="UTF-8")
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
 meta(name="viewport" content="width=device-width, initial-scale=1")
-meta(name="keywords" content=pageKeywords)
-meta(name="author" content=pageAuthor)
-meta(name="description" content=pageDescription)
-meta(name="copyright" content=pageCopyright)
-title= pageTitle
-
 meta(name="format-detection" content="telephone=no")
 meta(name="apple-mobile-web-app-capable" content="yes")
 meta(name="apple-mobile-web-app-status-bar-style" content="black")
-
-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.manifest
-    link(rel="manifest" href=`${url_for(theme.pwa.manifest)}?v=${stun_env("version")}`)
+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.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.favicon.small
   link(rel="icon" href=`${url_for(theme.favicon.small)}?v=${stun_env("version")}` type="image/png" sizes="16x16")
@@ -63,33 +62,33 @@ if theme.feed && theme.feed.rss
 link(rel="dns-prefetch" href="https://cdn.jsdelivr.net")
 
 - var fontawesome_css = "https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
-- if (theme.cdn.fontawesome_css) fontawesome_css = theme.cdn.fontawesome_css
+- 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.fontawesome) fancybox_css = theme.cdn.fontawesome
-  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/header/header.pug

+include ../../_mixins/menu-item.pug
+
+- var fa_prefix = theme.fa_prefix || 'fa'
+
+nav.header-nav
+  div.header-nav-inner
+    div.header-nav-btn(class=`${fa_prefix} fa-bars`)
+
+    div.header-nav-menu
+      +menuItem(theme.menu)
+
+    if theme.algolia_search.enable || theme.local_search.enable
+      div.header-nav-search
+        if !theme.menu_settings.text_only
+          i(class=`${fa_prefix} fa-search`)
+        if !theme.menu_settings.icon_only
+          span!= __("nav.search")
+
+div.header-info
+  div.header-info-inner
+    div.header-info-title= config.title
+    div.header-info-subtitle= config.subtitle

layout/_components/recent-posts.pug → layout/_partials/post/recent-posts.pug

 section#recent-posts.recent-posts
-  include ../_mixins/post-header.pug
-  include ../_mixins/gallery.pug
+  //- include ../_mixins/post-header.pug
+  //- include ../_mixins/gallery.pug
 
   - var postLists = theme.post_list.paginate.home ? page.posts : site.posts
   - postLists.each(function (post) {
     article(class=`${post.link ? "post-link" : ""}`).post
-      +postHeader(post)
+      //- +postHeader(post)
 
       div.post-body
         if theme.post_list.cover_image.home && post.top_image
           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 fa_prefix = theme.fa_prefix || 'fa'
+
+if isShowToc
+  div.sidebar-nav
+    span.sidebar-nav-toc.current= __("sidebar.catalog")
+    span.sidebar-nav-ov= __("sidebar.overview")
+
+section.sidebar-toc(class=`${isShowToc ? "" : "hide"}`)
+  if page.content
+    - var tocMaxDepth = page.toc_max_depth || theme.toc.max_depth || 6
+    div!= toc(page.content, {list_number: theme.toc.number, max_depth: tocMaxDepth})
+
+<!-- ov = overview -->
+section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`)
+  if theme.author.enable
+    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
+
+  if theme.social_setting.enable
+    div.sidebar-ov-social
+      for value, name in (theme.social || {})
+        if name && value
+          - var item = value.split("||")
+          - var socialPath = _.trim(_.get(item, "[0]"))
+          - var socialIcon = _.trim(_.get(item, "[1]"))
+          span.sidebar-ov-social-item
+            a.sidebar-ov-social-item__a(href=socialPath target="_blank" rel="noopener" data-popover=__(`social.${name}`)
+              data-popover-pos=`${theme.social_setting.icon_only ? "up" : "none"}`)
+
+              if socialIcon && socialIcon.match("origin:")
+                span.sidebar-ov-social-item__a--logo!= socialIcon.split("origin:")[1]
+              else
+                i.sidebar-ov-social-item__a--icon(class=`${fa_prefix} fa-${socialIcon ? socialIcon : "question-circle-o"}`)
+
+              if !theme.social_setting.icon_only
+                span= name
+
+  if theme.feed.enable
+    div.sidebar-ov-feed
+      - var feedEmail = theme.feed.email
+      if feedEmail
+        span.sidebar-ov-feed-email
+          a.sidebar-ov-feed-email__a(href=feedEmail target="_blank" rel="noopener")
+            i.sidebar-ov-feed-email__a--icon(class=`${fa_prefix} fa-envelope`)
+            span= "Email "
+            span= __("sidebar.subscribe")
+
+      - var feedRSS = theme.feed.rss
+      if feedRSS
+        span.sidebar-ov-feed-rss
+          a.sidebar-ov-feed-rss__a(href=url_for(feedRSS) target="_blank" rel="noopener")
+            i.sidebar-ov-feed-rss__a--icon(class=`${fa_prefix} fa-rss`)
+            span= "RSS "
+            span= __("sidebar.subscribe")
+
+  if theme.menu
+    div.sidebar-ov-state
+      if theme.menu.archives
+        - var menuArchives = _.trim(_.get(theme.menu.archives.split("||"), "[0]"))
+        a.sidebar-ov-state__a.posts(href=menuArchives)
+          div.sidebar-ov-state__a--count= site.posts.length
+          div.sidebar-ov-state__a--name= __("sidebar.archives")
+      if theme.menu.categories
+        - var menuCategories = _.trim(_.get(theme.menu.categories.split("||"), "[0]"))
+        a.sidebar-ov-state__a.categories(href=menuCategories)
+          div.sidebar-ov-state__a--count= site.categories.length
+          div.sidebar-ov-state__a--name= __("sidebar.categories")
+      if theme.menu.tags
+        - var menuTags = _.trim(_.get(theme.menu.tags.split("||"), "[0]"))
+        a.sidebar-ov-state__a.tags(href=menuTags)
+          div.sidebar-ov-state__a--count= site.tags.length
+          div.sidebar-ov-state__a--name= __("sidebar.tags")
+
+  if theme.creative_commons.enable && theme.creative_commons.sidebar
+    - var themeCC = theme.creative_commons
+    - var ccLicense = themeCC.license && themeCC.license.toLowerCase()
+    - var ccLanguage = (themeCC.language && themeCC.language.toLowerCase()) || "en"
+    - var ccURL = `https://creativecommons.org/licenses/${ccLicense}/4.0/deed.${ccLanguage}`
+    div.sidebar-ov-cc
+      a(href=ccURL target="_blank" rel="noopener"
+        data-popover=__("prompt.creative_commons") data-popover-pos="up")
+        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
+      span= __("sidebar.read_info") + " "
+      span.sidebar-progress-number
+    div.sidebar-progress-line

layout/_partials/widgets/loading-bar.pug

+div.loading-bar
+  div.progress

layout/_partials/widgets/sticky-top.pug

+div(data-popover=__("post.sticky") data-popover-pos="up").sticky-top
+  i(class=`${theme.fa_prefix || 'fa'} fa-${theme.stick_top.icon}`).sticky-top__i

layout/archive.pug

-extends ./_common/layout.pug
+extends ./_layout.pug
 
-block content
-  include ./_mixins/posts-sort.pug
+include ./_mixins/posts-sort.pug
 
-  div.content
-    div.archive-inner
-      if (site.posts.length === 0)
-        div.article-sort-title= _p("page.articles-empty")
-      else
-        div.article-sort-title= _p("page.articles-total", site.posts.length)
+block content
+  div.archive
+    div.archive-total= site.posts.length === 0 ? __("page.articles-empty") : _p("page.articles-total", site.posts.length)
 
-      //- != console.log(page.posts)
-      if theme.post_list.paginate.archives
-        +articleSort(page.posts)
-      else
-        +articleSort(site.posts)
+    +postSort(theme.post_list.paginate.archives ? page.posts : site.posts)
 
-    if theme.post_list.paginate.archives
-      include ./_components/pagination.pug
+  //- if theme.post_list.paginate.archives
+  //-   include ./_components/pagination.pug

layout/category.pug

-extends ./_common/layout.pug
+extends ./_layout.pug
 
-block content
-  include ./_mixins/posts-sort.pug
+include ./_mixins/posts-sort.pug
 
-  div.content
-    div.category-inner
-      div.article-sort-title= _p("page.categories") + " - " + page.category
-      +articleSort(page.posts)
+block content
+  div.category
+    div.article-sort-title= __("page.categories") + " - " + page.category
+    +postSort(page.posts)
 
-    include ./_components/pagination.pug
+    //- include ./_components/pagination.pug

layout/index.pug

-extends ./_common/layout.pug
+extends ./_layout.pug
 
 block content
-  div.content.home-content.code-highlight
-    if theme.post_list.paginate.home
-      include ./_components/recent-posts.pug
-      include ./_components/pagination.pug
-    else
-      include ./_components/recent-posts.pug
+  if theme.post_list.paginate.home
+    include ./_partials/post/recent-posts.pug
+  //-   include ./_components/pagination.pug
+  else
+    include ./_partials/post/recent-posts.pug

layout/_common/main.pug → layout/main.pug

@@ -8,7 +8,7 @@ main#main
     else
       block content
 
-    if page.comments
-      include ../_components/comments.pug
+    //- if page.comments
+    //-   include ../_components/comments.pug
 
     div.clearfix

layout/page.pug

-extends ./_common/layout.pug
+extends ./_layout.pug
 
 block content
-  include ./_mixins/gallery.pug
+  //- include ./_mixins/gallery.pug
 
-  if (page.title === "tags")
-    div.content.tag-cloud
-      if page.photos && page.photos.length
-        +gallery(page)
-
-      div.tag-cloud-title= _p("page.tags") + " - "
-        span.tag-cloud-num= site.tags.length
+  if (page.type === "tags")
+    div.tagcloud
+      div.tagcloud-title= _p("page.tags") + " - "
+        span= site.tags.length
       - var min_font = theme.tag_cloud ? theme.tag_cloud.min_size : 14
       - var max_font = theme.tag_cloud ? theme.tag_cloud.max_size : 24
       - var start_color = theme.tag_cloud ? theme.tag_cloud.start_color : "#a4d8fa"
       - var end_color = theme.tag_cloud ? theme.tag_cloud.end_color : "#1b9ef3"
-      div.tag-cloud-item!= tagcloud({min_font: min_font, max_font: max_font, amount: theme.tag_cloud.max_amount, color: true, start_color, end_color})
-  else if (page.title === "categories")
-    div.content.category
-      if page.photos && page.photos.length
-        +gallery(page)
-
+      div.tagcloud-item!= tagcloud({min_font: min_font, max_font: max_font, amount: theme.tag_cloud.max_amount, color: true, start_color, end_color})
+  else if (page.type === "categories")
+    div.category
       div.category-title= _p("page.categories") + " - "
-        span.category-num= site.categories.length
+        span= site.categories.length
       != list_categories()
-  else if (page.title === "about")
-    div.content.headings.code-highlight
+  else if (page.type === "about")
+    div.headings.code-highlight
       if page.photos && page.photos.length
-        +gallery(page)
+        //- +gallery(page)
 
       != page.content
   else
-    div.content.headings.code-highlight
+    div.headings.code-highlight
       if page.photos && page.photos.length
-        +gallery(page)
+        //- +gallery(page)
 
       != page.content

layout/post.pug

-extends ./_common/layout.pug
+extends ./_layout.pug
 
 block content
   include ./_mixins/post-header.pug

layout/tag.pug

-extends ./_common/layout.pug
+extends ./_layout.pug
 
 block content
   include ./_mixins/posts-sort.pug

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

+.footer-inner {
+  padding: 1rem;
+  font-size: $font-size-footer;
+  text-align: center;
+  color: $footer-text-color;
+  background-color: $footer-bg-color;
+
+  if (hexo-config('footer.bg_image.enable')) {
+    background: url(hexo-config('footer.bg_image.url')) no-repeat center center;
+    background-size: cover;
+  }
+
+  a {
+    color: $footer-link-color;
+    transition-property: color;
+    transition-ease();
+
+    &:hover {
+      color: $footer-link-hover-color;
+    }
+  }
+
+  .footer-icon {
+    margin: 0 .2rem;
+    font-size: .9em;
+    color: convert(hexo-config('footer.icon.color') || '#ff0000');
+
+    if (hexo-config('footer.icon.animation')) {
+      animation: footer-heart-beat 1.2s infinite;
+    }
+  }
+}

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

+
+.header {
+  width: 100%;
+}
+
+.header-inner {
+  width: 100%;
+  font-size: $font-size-header;
+  background-color: $header-nav-bg-color;
+
+  if (hexo-config('header.height') && match('%', hexo-config('header.height'))) {
+    height: unit(convert(hexo-config('header.height')), 'vh');
+  } else {
+    height: convert(hexo-config('header.height') || '80vh');
+  }
+
+  if (hexo-config('page.top_image')) {
+    background: url(hexo-config('page.top_image')) no-repeat center center;
+    background-size: cover;
+  } else if (hexo-config('header.bg_image.enable')) {
+    background: url(hexo-config('header.bg_image.url')) no-repeat center center;
+    background-size: cover;
+  }
+}
+
+if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height'))) {
+  header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh');
+} else {
+  header-nav-height = convert(hexo-config('header.nav_height') || '50px');
+}
+
+.header-nav {
+  position: fixed;
+  top: 0;
+  z-index: $z-index1;
+  width: 100%;
+  height: header-nav-height;
+  transition-property: transform, background-color;
+  transition-ease();
+  will-change: transform;
+
+  &.fixed {
+    background-color: $header-nav-bg-color;
+  }
+
+  &.slider-down {
+    transform: translateY(0);
+  }
+
+  &.slider-up {
+    transform: translateY(-100%);
+  }
+}
+
+.header-nav-inner {
+  position: relative;
+  margin: 0 auto;
+  width: $main-width;
+  height: 100%;
+
+  i {
+    margin-right: .3rem;
+  }
+}
+
+.header-nav-btn {
+  display: none;
+  color: $header-nav-link-color;
+}
+
+.header-nav-menu {
+  height: 100%;
+  line-height: header-nav-height;
+  transition-property: opacity;
+  transition-ease();
+
+  &.show {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &-item {
+    float: left;
+    position: relative;
+    margin: 0 1rem 0 0;
+    text-align: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin: 0;
+    }
+
+    &__a {
+      display: block;
+      padding: 0 .5rem;
+      color: $header-nav-link-color;
+      transition-property: color;
+      transition-ease();
+    }
+  }
+}
+
+.header-nav-submenu {
+  display: none;
+  position: absolute;
+  right: -.4rem;
+  left: -.4rem;
+  border-radius: 3px;
+  background-color: $header-nav-bg-color;
+
+  .header-nav-menu-item {
+    margin: 0;
+    width: 100%;
+    font-size: $font-size-header;
+    line-height: 1;
+    text-align: center;
+    transition-property: background-color;
+    transition-ease();
+    word-wrap();
+
+    &__a {
+      padding: .4rem;
+      line-height: 1.8em;
+    }
+  }
+}
+
+.header-nav-search {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  line-height: header-nav-height;
+  color: $header-nav-link-color;
+  transition-property: color;
+  transition-ease-in-out();
+  cursor: pointer;
+
+  &:hover {
+    color: $header-nav-link-hover-color;
+
+    i,
+    span {
+      color: $header-nav-link-hover-color;
+    }
+  }
+}
+
+.header-info {
+  position: relative;
+  height: 100%;
+
+  if (hexo-config('header.mask.enable')) {
+    background-color: alpha(#000, hexo-config('header.mask.opacity'));
+  }
+}
+
+.header-info-inner {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  padding: 0 .5rem;
+  text-align: center;
+  transform: translateY(-50%);
+}
+
+.header-info-title {
+  margin-bottom: .5rem;
+  font-size: 4rem;
+  font-weight: $font-weight-bolder;
+  line-height: 1.6em;
+  color: $white-light;
+}
+
+.header-info-subtitle {
+  font-size: 1.2rem;
+  font-weight: $font-weight-normal;
+  color: $white-light;
+}

source/css/_common/components/index.styl

+@import './header/index.styl';
+@import './footer/index.styl';
+@import './sidebar/index.styl';
+
+@import './pages/page.styl';
+
+@import './widgets/index.styl';

source/css/_common/main.styl → source/css/_common/components/pages/main.styl

+
 setUlStyle(content, hoverColor)
   &::before
     content: content
@@ -14,51 +15,6 @@ setUlStyle(content, hoverColor)
     &::before
       color: hoverColor
 
-#container
-  overflow: hidden
-  min-height: 100vh
-
-#main
-  margin: 1.5rem 0
-
-.main-inner
-  margin: 0 auto
-  width: calc(100% - 2rem)
-
-.headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-    position: relative
-    font-weight: $font-weight-bolder
-    line-height: $line-height-h
-    color: lighten($h-color, 15%)
-    cursor: pointer
-
-    if ($icon-h-link)
-      &:not(.post-title)::after
-        content: $icon-h-link
-        height: 100%
-        line-height: $line-height-h
-        color: $h-link-logo-color
-        opacity: 0
-        transition: opacity .1s ease
-        @extend $font-face-awesome
-
-    &:hover
-      &::after
-        opacity: 1
-
-  for size in 1 .. 6
-    h{size}
-      font-size: $h-font-size[size - 1]
-
-      &::after
-        margin-left: .8rem - .1 * size
-
 .content
   border-radius: 5px
   padding: 1.5rem 2rem

source/css/_common/components/pages/page.styl

+.archive {
+  position: relative;
+  margin-left: 1rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: $font-size-main;
+    bottom: $font-size-main;
+    left: 0;
+    border-left: .3rem solid $archive-timeline-line-color;
+    transform: translateX(-50%);
+  }
+
+  &-total {
+    position: relative;
+    margin-bottom: 1.5rem;
+    padding-left: 1.5rem;
+    font-size: 1.2em;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      z-index: $z-index0;
+      border: .2rem solid $archive-timeline-dot-color;
+      border-radius: 50%;
+      width: .9rem;
+      height: .9rem;
+      background-color: $white;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &-post-item {
+    display: block;
+    position: relative;
+    margin-bottom: .8rem;
+    padding-left: 1.5rem;
+    width: 100%;
+    align-items: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      z-index: $z-index0;
+      border: .15rem solid $archive-timeline-dot-color;
+      border-radius: 50%;
+      width: .6rem;
+      height: .6rem;
+      background-color: $white;
+      transition-property: border-color;
+      transition-ease();
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      &::before {
+        border-color: $archive-timeline-dot-hover-color;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.year {
+      font-weight: $font-weight-bolder;
+    }
+
+    &__time {
+      display: inline-block;
+      padding-right: 1rem;
+      width: 3rem;
+      vertical-align: middle;
+      color: $archive-timeline-time-color;
+      transform: translateY(3%);
+    }
+
+    &-title {
+      display: inline-block;
+      margin: 0;
+      width: calc(100% - 4.5rem);
+      font-size: $font-size-main + 2px;
+      font-weight: normal;
+      vertical-align: middle;
+
+      &__a {
+        color: $font-color;
+        transition-property: color;
+        transition-ease();
+
+        &:hover {
+          color: $blue-light;
+        }
+      }
+    }
+  }
+}
+
+.tagcloud,
+.category {
+  &-title {
+    font-size: $font-size-base + 10px;
+    text-align: center;
+    cursor: default;
+  }
+}
+
+.tagcloud {
+  text-align: center;
+
+  &-item a {
+    margin: 0 .4rem;
+    transition-property: color;
+    transition-ease();
+
+    &:hover {
+      color: $tag-hover-color !important;
+    }
+  }
+}
+
+.category {
+  &-list-item a {
+    color: $category-link-color;
+
+    &:hover {
+      color: $category-link-hover-color;
+    }
+  }
+
+  &-list {
+    margin-top: 0 !important;
+
+    &-item {
+      &::before {
+        color: $category-list-dot-color;
+      }
+
+      &:hover {
+        &::before {
+          color: $category-list-dot-hover-color;
+        }
+      }
+    }
+
+    &-link {
+      transition-property: color;
+      transition-ease();
+    }
+
+    &-count {
+      margin-left: .3em;
+      font-size: $font-size-base - 1px;
+      color: $category-post-count-color;
+
+      &::before {
+        content: '(';
+      }
+
+      &::after {
+        content: ')';
+      }
+    }
+  }
+}

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);
+  }
+
+  .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;
+    }
+  }
+
+  .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;
+  }
+
+  if (!hexo-config('toc.expand_all')) {
+    .toc .toc-child {
+      display: none;
+    }
+
+    .toc .active > .toc-child {
+      display: block;
+    }
+
+    .toc .current > .toc-child {
+      display: block;
+    }
+  }
+
+  .active,
+  .current {
+    & > a {
+      color: $orange-dark;
+      transition: color .3s;
+    }
+  }
+
+  ol,
+  li {
+    list-style: none;
+  }
+
+  ol {
+    margin: 0;
+    padding-left: 1em;
+  }
+}
+
+.sidebar-ov {
+  & > div {
+    if (hexo-config('sidebar.horizon_line')) {
+      &:not(:last-child) {
+        border-bottom: 1px dashed $sidebar-horizon-line-color;
+      }
+    }
+  }
+
+  &-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;
+      }
+
+      &:hover {
+        animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out;
+      }
+    }
+
+    &__p {
+      margin: .5rem 0 0;
+      font-weight: $font-weight-bold;
+    }
+  }
+
+  &-social {
+    padding: .5rem 0;
+    text-align: center;
+
+    &-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: background-color;
+        transition-ease();
+
+        &:hover {
+          background-color: $sidebar-social-hover-color;
+        }
+
+        &__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;
+
+    &-icon {
+      margin-right: .3em;
+    }
+
+    &-email,
+    &-rss {
+      display: inline-block;
+      width: 50%;
+
+      &__a {
+        transition-property: color;
+        transition-ease();
+
+        &--icon {
+          margin-right: .2rem;
+        }
+      }
+    }
+
+    &-email__a {
+      color: $sidebar-feed-email-color;
+
+      &:hover {
+        color: darken($sidebar-feed-email-color, 20%);
+      }
+    }
+
+    &-rss__a {
+      color: $sidebar-feed-rss-color;
+
+      &:hover {
+        color: darken($sidebar-feed-rss-color, 20%);
+      }
+    }
+  }
+
+  &-state {
+    padding: .5rem 0;
+    text-align: center;
+
+    &__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;
+      }
+
+      &.posts {
+        color: $sidebar-state-post-color;
+
+        &:hover {
+          color: darken($sidebar-state-post-color, 30%);
+        }
+      }
+
+      &.categories {
+        color: $sidebar-state-category-color;
+
+        &:hover {
+          color: darken($sidebar-state-category-color, 30%);
+        }
+      }
+
+      &.tags {
+        color: $sidebar-state-tag-color;
+
+        &:hover {
+          color: darken($sidebar-state-tag-color, 30%);
+        }
+      }
+
+      &--count {
+        font-weight: $font-weight-bold;
+        color: $black-dark;
+      }
+    }
+  }
+
+  &-cc {
+    padding-top: .5rem;
+    text-align: center;
+  }
+}
+
+.sidebar-progress {
+  overflow: hidden;
+  margin-top: .5em;
+  text-align: center;
+
+  &-read {
+    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%);
+  }
+}

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 './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 './loading-bar.styl'
+// @import './recent-posts.styl'
+// @import './pagination.styl'
+// @import './comments.styl'
+@import './sticky-top.styl'
+// @import './copy.styl'
+// @import './analytics/index.styl'
+// @import './search/index.styl'
+// @import './tag-plugin/index.styl'

source/css/_common/components/widgets/other.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;
+  left: 0;
+  z-index: $z-index2;
+  width: 100%;
+  height: 100%;
+  background-color: convert(hexo-config('zoom_image.mask_color') || '#fff');
+  opacity: 0;
+  will-change: opacity;
+}
+
+// Zoom in image without fancybox.
+.zoom-image {
+  cursor: zoom-in;
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.show {
+    clearImgStyle();
+    position: absolute;
+    z-index: $z-index2;
+    margin: 0;
+    box-sizing: content-box;
+    cursor: zoom-out;
+    will-change: transform;
+  }
+}

source/css/_common/components/widgets/sticky-top.styl

+.sticky-top {
+  position: absolute;
+  top: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  text-align: center;
+
+  if (hexo-config('stick_top.position') == 'left') {
+    left: 0;
+  } else if (hexo-config('stick_top.position') == 'right') {
+    right: 0;
+  }
+
+  stick-top-rotate = convert(hexo-config('stick_top.rotate' || '0deg'));
+
+  &__i {
+    color: convert(hexo-config('stick_top.color' || '#999'));
+    transform: scale(1.2) rotate(stick-top-rotate);
+  }
+
+  &[data-popover][data-popover-pos='up']:hover::before {
+    transform: translate(-50%, -100%);
+  }
+}
+
+.archive {
+  .sticky-top {
+    top: 50%;
+    right: 0;
+    left: auto;
+    transform: translate(0, -50%);
+  }
+}

source/css/_common/footer.styl

-#footer
-  background-color: $gray-dark
-  background-size: cover
-
-  if (hexo-config('footer.bg_image.enable'))
-    background: url(hexo-config('footer.bg_image.url') || ' ') no-repeat center center
-
-  a
-    clearAStyle()
-    color: $footer-link-color
-
-    &:hover
-      color: $footer-link-hover-color
-
-.footer-inner
-  padding: 1rem
-  font-size: $font-footer-base
-  text-align: center
-  color: $footer-text-color
-
-  .footer-separator
-    margin: 0 .3rem
-
-  .heart-beat
-    font-size: .9em
-    animation: footer-heart-beat 1.2s infinite

source/css/_common/header.styl

-if (hexo-config('header.height') && match('%', hexo-config('header.height')))
-  $header-height = unit(convert(hexo-config('header.height')), 'vh')
-else
-  $header-height = convert(hexo-config('header.height') || '80vh')
-
-#header
-  position: relative
-  height: $header-height
-  font-size: $font-header-base
-  background-color: $gray-dark
-  background-size: cover
-
-  if (hexo-config('page.top_image'))
-    background: url(hexo-config('page.top_image') || ' ') no-repeat center center
-
-  if (hexo-config('header.bg_image.enable'))
-    background: url(hexo-config('header.bg_image.url') || ' ') no-repeat center center
-
-if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height')))
-  $header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh')
-else
-  $header-nav-height = convert(hexo-config('header.nav_height') || '50px')
-
-.header-nav
-  position: fixed
-  top: 0
-  z-index: $z-index1
-  width: 100%
-  height: $header-nav-height
-  transition: transform .3s, background-color .3s
-  will-change: transform
-
-  &.fixed
-    background-color: $header-nav-bg-color
-
-  &.slider-down
-    transform: translateY(0)
-
-  &.slider-up
-    transform: translateY(-100%)
-
-$header-nav-link-color
-  color: $header-nav-link-color
-
-  &:hover
-    color: $header-nav-link-hover-color
-
-    &::before,
-    &::after
-      color: $header-nav-link-hover-color
-
-.header-nav-inner
-  position: relative
-  margin: 0 auto
-  padding: 0 1rem
-  height: 100%
-
-  .header-nav-search
-    @extend $header-nav-link-color
-
-  i
-    margin-right: .3rem
-
-$header-nav-item
-  padding: 0 .5rem
-  height: 100%
-  line-height: $header-nav-height
-
-$header-menu-item-inner
-  clearAStyle()
-  display: block
-  text-decoration: none
-  @extend $header-nav-link-color
-
-.header-nav-menu
-  display: inline-block
-  height: 100%
-  transition: opacity .3s
-
-  &-icon
-    display: none
-    color: $header-nav-link-color
-    @extend $header-nav-item
-
-  & > .menu-item
-    float: left
-    position: relative
-    margin: 0 1rem 0 0
-
-    &:last-child
-      margin: 0
-
-    & > .menu-item-inner
-      text-align: center
-      @extend $header-menu-item-inner
-      @extend $header-nav-item
-
-  &.show
-    visibility: visible
-    opacity: 1
-
-.header-nav-submenu
-  display: none
-  position: absolute
-  right: -.4rem
-  left: -.4rem
-  border-radius: 3px
-  background-color: $header-nav-bg-color
-
-  .menu-item
-    width: 100%
-    font-size: $font-header-base - 2px
-    line-height: 1
-    text-align: center
-    word-break: break-all
-
-    &-inner
-      @extend $header-menu-item-inner
-      padding: .4rem .6rem
-      line-height: 1.8em
-
-.header-nav-search
-  position: absolute
-  right: 0
-  transition: color .2s ease
-  @extend $header-nav-item
-
-  &:hover
-    cursor: pointer
-
-.header-info
-  position: relative
-  height: 100%
-  text-align: center
-
-  if (hexo-config('header.mask.enable'))
-    background-color: alpha(#000, hexo-config('header.mask.opacity'))
-
-.header-info-inner
-  display: inline-block
-  position: absolute
-  top: 50%
-  left: 0
-  padding: 0 .5rem
-  width: 100%
-  transform: translateY(-50%)
-
-.header-info-title
-  margin-bottom: .5rem
-  font-size: 4rem
-  font-weight: $font-weight-bolder
-  line-height: 4rem
-  color: #f9f9f9
-  transition: font-size .3s
-
-.header-info-subtitle
-  font-size: 1.1rem
-  font-weight: $font-weight-normal
-  color: #f9f9f9
-  transition: font-size .3s

source/css/_common/index.styl

-@import './sidebar.styl' if (hexo-config('sidebar.enable'))
-@import './header.styl'
-@import './main.styl'
-@import './footer.styl'
-@import './post.styl'
-@import './page.styl'
-@import './responsive.styl'
+@import './scaffolding/index.styl';
+@import './outline/index.styl';
+@import './components/index.styl';
+
+@import './responsive.styl';

source/css/_common/outline/index.styl

+@import './macro.styl';
+@import './render.styl';

source/css/_common/outline/macro.styl

+.container {
+  position: relative;
+}
+
+.main {
+  margin: 2rem auto;
+}
+
+.main-inner {
+  overflow: hidden;
+  margin: 0 auto;
+  width: $main-width;
+}
+
+.sidebar {
+  float: convert(hexo-config('sidebar.position'));
+  width: convert(hexo-config('sidebar.width') || '$sidebar-width');
+}
+
+if (hexo-config('sidebar.position') == 'left') {
+  .content {
+    float: right;
+  }
+} else if (hexo-config('sidebar.position') == 'right') {
+  .content {
+    float: left;
+  }
+}
+
+.content-inner {
+  border-radius: 5px;
+  padding: 1rem 2rem;
+  width: $content-width;
+  height: 100%;
+  background-color: $white;
+
+  &.home {
+    padding: 0;
+    background-color: transparent;
+  }
+}

source/css/_common/outline/render.styl

+.content-render {
+
+}

source/css/_common/page.styl

-.archive-inner,
-.category-inner,
-.tag-inner
-  position: relative
-  margin-left: 2rem
-
-  &::before
-    content: ''
-    position: absolute
-    top: $font-main-base
-    bottom: $font-main-base
-    left: 0
-    border-left: .2rem solid $archives-left-line-color
-    transform: translate(-50%, 0)
-
-.article-sort-title
-  position: relative
-  margin-bottom: 1.3rem
-  padding-left: 1.4rem
-
-  &::before
-    content: ''
-    position: absolute
-    top: 50%
-    left: 0
-    z-index: $z-index0
-    border: .25rem solid $archives-left-dot-color
-    border-radius: 50%
-    width: 1rem
-    height: 1rem
-    line-height: 1.2rem
-    background-color: $white
-    transform: translate(-50%, -50%)
-
-.tag-cloud,
-.category
-  a
-    clearAStyle()
-
-  &-title
-    font-size: $font-size-base + 10px
-    text-align: center
-    cursor: default
-
-.tag-cloud
-  text-align: center
-
-  a
-    margin: 0 .4rem
-
-    &:hover
-      color: $tags-hover-color !important
-
-.category
-  a
-    color: $categories-link-color
-
-    &:hover
-      color: $categories-link-hover-color
-
-  &-list
-    margin-top: 0 !important
-
-    &-item
-      &::before
-        color: $categories-list-dot-color
-
-      &:hover
-        &::before
-          color: $categories-list-dot-hover-color
-
-    &-count
-      padding-left: .3em
-      font-size: $font-size-base
-      color: $categories-post-count-color
-
-      &::before
-        content: '('
-
-      &::after
-        content: ')'
-
-// 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
-  left: 0
-  z-index: $z-index2
-  width: 100%
-  height: 100%
-  background-color: convert(hexo-config('zoom_image.mask_color') || '#fff')
-  opacity: 0
-  will-change: opacity
-
-// Zoom in image without fancybox.
-.zoom-image
-  cursor: zoom-in
-
-  &.hide
-    visibility: hidden
-
-  &.show
-    clearImgStyle()
-    position: absolute
-    z-index: $z-index2
-    margin: 0
-    box-sizing: content-box
-    cursor: zoom-out
-    will-change: transform

source/css/_common/responsive.styl

-// $main-width: A calc value.
-// -----------------------------------------
-@media screen and (min-width: $main-responsive-width)
-  #header
-    width: 100%
-
-  .header-nav-inner
-    width: $main-width
-
-  .main-inner
-    width: $main-width
-
-// $md-width: 992px - 0.02px
-// -----------------------------------------
-@media screen and (min-width: $md-width)
-  .header-nav-menu
-    visibility: visible
-    opacity: 1
-
-@media screen and (max-width: $md-width)
-  #header
-    height: 340px
-    background-attachment: local
-
-  #footer
-    background-attachment: local
-
-  #main
-    margin: 1rem 0
-
-  #sidebar
-    display: none
-
-  .main-inner
-    width: 100%
-
-  .content
-    padding: .8rem
-    width: 100%
-
-  #recent-posts article.post
-    margin: 0 0 1rem
-    padding: .8rem 1rem
-
-  .header-nav-menu
-    visibility: hidden
-    border-radius: 3px
-    height: auto
-    background-color: $header-nav-bg-color
-    opacity: 0
-    transform: translate(-1.5rem, 2.5rem)
-
-    .menu-item
-      float: none
-      margin: 0
-
-    a
-      padding: 0 1rem
-      color: $white-light !important
-      user-select: none
-
-      &:hover
-        color: $white-light
-        background-color: $blue-lighter
-
-  .header-nav-menu-icon
-    display: block
-    float: left
-
-  .header-nav-submenu
-    top: 0
-    right: 0
-    left: 100%
-    width: 100%
-
-  .friends-plugin
-    .friends-item
-      width: calc(50% - 10px)
-
-// sm-width: 768px - 0.02px
-// -----------------------------------------
-@media screen and (max-width: $sm-width)
-  .header-info-inner
-    .header-info-title
-      font-size: 3.25rem
-
-    .header-info-subtitle
-      font-size: 1rem
-
-  div.search-popup
-    top: 0
-    left: 0
-    margin: 0
-    border-radius: 0
-    width: 100%
-    height: 100vh
-    max-height: 100vh
-
-  div.search-results
-    max-height: calc(100vh - 6rem)
-
-// $xs-width: 576px - 0.02px
-// -----------------------------------------
-@media screen and (min-width: $xs-width)
-  .content
-    font-size: $font-size-large
-
-  .sidebar-inner
-    font-size: $font-size-large
-
-  .footer-inner
-    font-size: $font-size-large
-
-@media screen and (max-width: $xs-width)
-  #header
-    height: 240px
-
-  #main
-    margin: .8rem 0
-
-  .content
-    padding: .8rem .6rem
-    font-size: $font-size-base
+// // $main-width: A calc value.
+// // -----------------------------------------
+// @media screen and (min-width: $main-width)
+//   #header
+//     width: 100%
+
+//   .header-nav-inner
+//     width: $main-width
+
+//   .main-inner
+//     width: $main-width
+
+// // $md-width: 992px - 0.02px
+// // -----------------------------------------
+// @media screen and (min-width: $md-width)
+//   .header-nav-menu
+//     visibility: visible
+//     opacity: 1
+
+// @media screen and (max-width: $md-width)
+//   #header
+//     height: 340px
+//     background-attachment: local
+
+//   #footer
+//     background-attachment: local
+
+//   #main
+//     margin: 1rem 0
+
+//   #sidebar
+//     display: none
+
+//   .main-inner
+//     width: 100%
+
+//   .content
+//     padding: .8rem
+//     width: 100%
+
+//   #recent-posts article.post
+//     margin: 0 0 1rem
+//     padding: .8rem 1rem
+
+//   .header-nav-menu
+//     visibility: hidden
+//     border-radius: 3px
+//     height: auto
+//     background-color: $header-nav-bg-color
+//     opacity: 0
+//     transform: translate(-1.5rem, 2.5rem)
+
+//     .menu-item
+//       float: none
+//       margin: 0
+
+//     a
+//       padding: 0 1rem
+//       color: $white-light !important
+//       user-select: none
+
+//       &:hover
+//         color: $white-light
+//         background-color: $blue-lighter
+
+//   .header-nav-btn
+//     display: block
+//     float: left
+
+//   .header-nav-submenu
+//     top: 0
+//     right: 0
+//     left: 100%
+//     width: 100%
+
+//   .friends-plugin
+//     .friends-item
+//       width: calc(50% - 10px)
+
+// // sm-width: 768px - 0.02px
+// // -----------------------------------------
+// @media screen and (max-width: $sm-width)
+//   .header-info-inner
+//     .header-info-title
+//       font-size: 3.25rem
+
+//     .header-info-subtitle
+//       font-size: 1rem
+
+//   div.search-popup
+//     top: 0
+//     left: 0
+//     margin: 0
+//     border-radius: 0
+//     width: 100%
+//     height: 100vh
+//     max-height: 100vh
+
+//   div.search-results
+//     max-height: calc(100vh - 6rem)
+
+// // $xs-width: 576px - 0.02px
+// // -----------------------------------------
+// @media screen and (min-width: $xs-width)
+//   .content
+//     font-size: $font-size-large
+
+//   .sidebar-inner
+//     font-size: $font-size-large
+
+//   .footer-inner
+//     font-size: $font-size-large
+
+// @media screen and (max-width: $xs-width)
+//   #header
+//     height: 240px
+
+//   #main
+//     margin: .8rem 0
+
+//   .content
+//     padding: .8rem .6rem
+//     font-size: $font-size-base
 
-  .home-content
-    padding: 0
+//   .home-content
+//     padding: 0
 
-  #recent-posts article.post
-    margin: 0 0 .8rem
-    padding: .8rem
-
-  .header-info-inner
-    .header-info-title
-      font-size: 1.8rem
-
-    .header-info-subtitle
-      font-size: $font-size-base
-
-  .header-nav-search
-    span
-      display: none
-
-  .algolia-hit-item
-    margin: 0
-
-  .post-header
-    font-size: $font-size-base
-
-    .post-title
-      font-size: 1.2rem
+//   #recent-posts article.post
+//     margin: 0 0 .8rem
+//     padding: .8rem
+
+//   .header-info-inner
+//     .header-info-title
+//       font-size: 1.8rem
+
+//     .header-info-subtitle
+//       font-size: $font-size-base
+
+//   .header-nav-search
+//     span
+//       display: none
+
+//   .algolia-hit-item
+//     margin: 0
+
+//   .post-header
+//     font-size: $font-size-base
+
+//     .post-title
+//       font-size: 1.2rem
 
-    .post-meta
-      &-create,
-      &-read,
-      &-word
-        :first-child
-          display: none
+//     .post-meta
+//       &-create,
+//       &-read,
+//       &-word
+//         :first-child
+//           display: none
 
-      .dot
-        margin: 0 .3rem
+//       .dot
+//         margin: 0 .3rem
 
-  .archive-inner
-    margin-left: .5rem
+//   .archive-inner
+//     margin-left: .5rem
 
-    .article-sort-title
-      margin-bottom: .8rem
+//     .article-sort-title
+//       margin-bottom: .8rem
 
-    .article-sort-item
-      margin-bottom: .5rem
+//     .article-sort-item
+//       margin-bottom: .5rem
 
-  .gallery-image
-    width: 100%
+//   .gallery-image
+//     width: 100%
 
-  div.search-popup
-    padding: .8rem .6rem 1rem
+//   div.search-popup
+//     padding: .8rem .6rem 1rem
 
-  div.search-results
-    & > ul
-      padding-left: 1rem
+//   div.search-results
+//     & > ul
+//       padding-left: 1rem
 
-  .friends-plugin
-    .friends-item
-      padding: .5rem
-      width: 100%
+//   .friends-plugin
+//     .friends-item
+//       padding: .5rem
+//       width: 100%

source/css/_common/scaffolding/animation.styl

+// avatar animation
+// ----------------------------------------
+if (hexo-config('author.enable')) {
+  // shake
+  @keyframes avatar-shake {
+    0% {
+      transform: scale(1);
+    }
+
+    10%,
+    20% {
+      transform: scale(.9) rotate(3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+      transform: scale(1.1) rotate(3deg);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  // trun
+  @keyframes avatar-turn {
+    100% {
+      transform: rotate(1turn);
+    }
+  }
+}
+
+// footer heart beat animation
+// ----------------------------------------
+if (hexo-config('footer.icon.enable')) {
+  @keyframes footer-heart-beat {
+    0% {
+      transform: scale(1);
+    }
+
+    15% {
+      transform: scale(1.2);
+    }
+
+    30% {
+      transform: scale(1);
+    }
+
+    45% {
+      transform: scale(1.2);
+    }
+  }
+}

source/css/_common/scaffolding/base.styl

+::selection {
+  color: $selection-color;
+  background-color: $selection-bg;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: $font-size-rem;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $font-color;
+  background-color: $body-bg-color;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0;
+  font-family: $font-family-heading;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-heading;
+}
+
+for n in 1 .. 6 {
+  h{n} {
+    font-size: $font-size-heading-base - $font-size-heading-step * n;
+  }
+}
+
+p {
+  margin: 0 0 1rem;
+}
+
+a {
+  text-decoration: none;
+  color: $link-color;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+img,
+video,
+iframe {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 100%;
+}
+
+hr {
+  margin: 1rem 0;
+  border: 2px dashed $hr-color;
+  height: 0;
+}
+
+blockquote {
+  margin: 0;
+  border-left: 5px solid $quote-left-color;
+  padding: .5rem 1rem;
+  background-color: $quote-bg-color;
+
+  & cite::before {
+    content: '--';
+    padding: 0 .25rem;
+  }
+}
+
+code {
+  border-radius: 3px;
+  padding: 0 .3em;
+  font-family: $font-family-code;
+  font-size: .95em;
+  word-wrap: break-word;
+  color: $code-color;
+  background-color: $code-bg-color;
+}
+
+dt {
+  font-weight: $font-weight-bolder;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin: 0 0 1rem;
+  width: 100%;
+}
+
+table > tbody > tr {
+  &:nth-of-type(odd) {
+    background-color: $table-row-odd-bg-color;
+  }
+
+  &:hover {
+    background-color: $table-row-hover-bg-color;
+  }
+}
+
+th,
+td {
+  border: 1px solid $table-border-color;
+}

source/css/_common/scaffolding/index.styl

+@import './normalize.styl';
+@import './base.styl';
+@import './utils.styl';
+@import './animation.styl';

source/css/_common/scaffolding/normalize.styl

+/* 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;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  margin: .67em 0;
+  font-size: 2em;
+}
+
+/* Grouping content
+========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  overflow: visible; /* 2 */
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 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 {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  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 {
+  margin: 0; /* 2 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  overflow: visible; /* 1 */
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  text-transform: none; /* 1 */
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+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 {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+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: .35em .75em .625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  display: table; /* 1 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 3 */
+  max-width: 100%; /* 1 */
+  white-space: normal; /* 1 */
+  color: inherit; /* 2 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[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 {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
+}
+
+/* Interactive
+========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}

source/css/_common/scaffolding/utils.styl

+.clearfix {
+  clearfix();
+}
+
+// UI components
+// ----------------------------------------
+popover-bg-color = alpha(#000, .7);
+
+// "Popover" component
+[data-popover] {
+  position: relative;
+}
+
+[data-popover]::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: $z-index1;
+  font-family: sans-serif, Arial;
+  font-size: $font-size-base;
+  font-weight: normal;
+  font-style: normal;
+  white-space: nowrap;
+  color: #fff;
+  background-color: popover-bg-color;
+  opacity: 0;
+  text-shadow: none;
+  transition: opacity .2s, transform .2s;
+  transform: translate(-50%, -70%);
+  pointer-events: none;
+}
+
+[data-popover]::before {
+  content: attr(data-popover);
+  border-radius: 4px;
+  padding: .2rem .6rem;
+}
+
+[data-popover][data-popover-pos='up']:hover::before {
+  opacity: 1;
+  transform: translate(-50%, -115%);
+}
+
+// "Alert" component
+.stun-message {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  z-index: $z-index2;
+  transform: translateX(-50%);
+}
+
+.stun-alert {
+  position: relative;
+  border-radius: 3px;
+  padding: 8px 12px;
+  font-size: $font-size-large;
+  line-height: 1rem;
+  color: $black-light;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
+
+  &-success {
+    color: $alert-success;
+
+    & ~ i {
+      color: $alert-success;
+    }
+  }
+
+  &-info {
+    color: $alert-info;
+
+    & ~ i {
+      color: $alert-info;
+    }
+  }
+
+  &-warning {
+    color: $alert-warning;
+
+    & ~ i {
+      color: $alert-warning;
+    }
+  }
+
+  &-error {
+    color: $alert-error;
+
+    & ~ i {
+      color: $alert-error;
+    }
+  }
+
+  &-description {
+    margin-left: .5rem;
+  }
+}
+
+// Animation class
+// ----------------------------------------
+.anime-close {
+  &::before,
+  &::after {
+    transition: transform .25s;
+    transform: rotate(-45deg);
+  }
+
+  &::after {
+    transform: rotate(-135deg);
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      transform: rotate(0);
+    }
+  }
+}

source/css/_common/sidebar.styl

-$sidebar-width = convert(hexo-config('sidebar.width') || '300px')
-
-#sidebar
-  float: convert(hexo-config('sidebar.position') || 'right')
-  width: $sidebar-width
-
-.sidebar-inner
-  border-radius: 5px
-  padding: 1rem
-  width: $sidebar-width
-  font-size: $font-sidebar-base
-  background-color: $white
-  transform: translateZ(0)
-
-  &.sticky
-    position: fixed
-    top: convert(hexo-config('sidebar.offsetTop') || '30px')
-    z-index: $z-index0
-
-  .hide
-    display: none
-
-.sidebar-nav
-  padding-bottom: 1em
-  text-align: center
-
-  &-toc,
-  &-overview
-    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
-
-  .current
-    border-color: $sidebar-nav-text-hover-color
-    color: $sidebar-nav-text-hover-color
-
-if (hexo-config('toc.wrap'))
-  $toc-word-break
-    white-space: normal
-    word-break: break-all
-else
-  $toc-word-break
-    white-space: nowrap
-    word-break: normal
-
-.sidebar-toc
-  overflow: auto
-  position: relative
-  max-height: 70vh
-  @extend $toc-word-break
-
-  if (!hexo-config('toc.expand_all'))
-    .toc .toc-child
-      display: none
-
-    .toc .active > .toc-child
-      display: block
-
-    .toc .current > .toc-child
-      display: block
-
-  .active,
-  .current
-    & > a
-      color: $orange-dark
-      transition: color .3s
-
-  ol,
-  li
-    list-style: none
-
-  ol
-    margin: 0
-    padding-left: 1em
-
-if (hexo-config('author.avatar.rounded'))
-  $avatar-rounded = 50%
-else
-  $avatar-rounded = 0
-
-$avatar-opacity = hexo-config('author.avatar.opacity') || 1
-$avatar-animation = 'avatar-' + convert(hexo-config('author.avatar.animation') || 'turn')
-
-.sidebar-overview
-  .sidebar-author
-    width: 100%
-    text-align: center
-
-    &-avatar
-      clearImgStyle()
-      border-radius: $avatar-rounded
-      width: 150px
-      height: 150px
-      opacity: $avatar-opacity
-
-      &:hover
-        animation: $avatar-animation .8s both ease-out
-
-    &-motto
-      margin: 0
-      font-weight: $font-weight-bold
-
-  .sidebar-social,
-  .sidebar-feed,
-  .sidebar-state,
-  .sidebar-cc
-    a
-      clearAStyle()
-
-    if (hexo-config('sidebar.horizon_line'))
-      &:not(:last-child)
-        border-bottom: 1px dashed #e6e6e6
-
-  .sidebar-social
-    padding: .5rem 0
-    text-align: center
-
-    &-item
-      display: inline-block
-      margin: .2rem
-      border-radius: 1px
-      text-align: center
-      transition: background-color .3s
-
-      a
-        display: inline-block
-
-      i
-        display: inline
-
-      if (hexo-config('social_setting.icon_only'))
-        border-radius: 50%
-        line-height: 1.5rem
-        background-color: $sidebar-social-color
-
-        &:hover
-          background-color: $sidebar-social-hover-color
-
-        a
-          width: 1.5rem
-          height: 1.5rem
-
-        i,
-        span
-          color: #fff
-      else
-        background-color: #fff
-
-        a
-          padding: 0 .2rem
-
-        i,
-        span
-          margin: 0 .2rem
-          color: #999
-
-        i
-          width: 1.2rem
-
-        &:hover
-          background-color: $sidebar-social-color
-
-          i,
-          span
-            color: #fff
-
-  .sidebar-feed
-    padding: .5rem 0
-    text-align: center
-
-    &-icon
-      margin-right: .3em
-
-    &-email,
-    &-rss
-      display: inline-block
-      width: 50%
-
-    &-email > a
-      color: $sidebar-feed-email-color
-
-      &:hover
-        color: darken($sidebar-feed-email-color, 20%)
-
-    &-rss > a
-      color: $sidebar-feed-rss-color
-
-      &:hover
-        color: darken($sidebar-feed-rss-color, 20%)
-
-  .sidebar-state
-    padding: .5rem 0
-    text-align: center
-
-    &-item
-      display: inline-block
-      border-right: 1px solid #eee
-      width: 33.3%
-      line-height: 1.6em
-      text-align: center
-
-      &:last-child
-        margin: 0
-        border-width: 0
-        padding: 0
-
-      &-count
-        font-weight: $font-weight-bold
-        color: $black-dark
-
-      a
-        display: block
-
-    &-posts > a
-      color: $sidebar-state-post-color
-
-      &:hover
-        color: darken($sidebar-state-post-color, 30%)
-
-    &-categories > a
-      color: $sidebar-state-category-color
-
-      &:hover
-        color: darken($sidebar-state-category-color, 30%)
-
-    &-tags > a
-      color: $sidebar-state-tag-color
-
-      &:hover
-        color: darken($sidebar-state-tag-color, 30%)
-
-  .sidebar-cc
-    padding-top: .5rem
-    text-align: center
-
-    img
-      clearImgStyle()
-
-.sidebar-progress
-  overflow: hidden
-  margin-top: .5em
-  text-align: center
-
-  &-read
-    margin-bottom: .3em
-
-    span
-      margin: 0 .1em
-
-  &-line
-    width: 100%
-    height: convert(hexo-config('reading_progress.height') || '1px')
-    background-color: convert(hexo-config('reading_progress.color') || '$blue-light')
-    transition: transform .3s
-    transform: translateX(-100%)

source/css/_components/index.styl

-@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 './loading-bar.styl'
-@import './recent-posts.styl'
-@import './pagination.styl'
-@import './comments.styl'
-@import './sticky-top.styl'
-@import './copy.styl'
-@import './analytics/index.styl'
-@import './search/index.styl'
-@import './tag-plugin/index.styl'

source/css/_components/sticky-top.styl

-$stick-top-rotate = convert(hexo-config('stick_top.rotate' || '0deg'))
-
-.sticky-top
-  position: absolute
-  top: 0
-  width: 1.5rem
-  height: 1.5rem
-  line-height: 1.5rem
-  text-align: center
-
-  if (hexo-config('stick_top.position') == 'left')
-    left: 0
-  else
-    right: 0
-
-  i
-    color: convert(hexo-config('stick_top.color' || '#999'))
-    transform: scale(1.2) rotate($stick-top-rotate)
-
-  &[data-popover][data-popover-pos='up']:hover::before
-    transform: translate(-50%, -100%)
-
-.archive-inner,
-.category-inner,
-.tag-inner
-  .sticky-top
-    top: 50%
-    transform: translate(0, -50%)

source/css/_global/animation.styl

-// avatar animation
-// ----------------------------------------
-if (hexo-config('author.enable'))
-  // shake
-  @keyframes avatar-shake
-    0%
-      transform: scale(1)
-
-    10%,
-    20%
-      transform: scale(.9) rotate(3deg)
-
-    30%,
-    50%,
-    70%,
-    90%
-      transform: scale(1.1) rotate(-3deg)
-
-    40%,
-    60%,
-    80%
-      transform: scale(1.1) rotate(3deg)
-
-    100%
-      transform: scale(1)
-
-  // trun
-  @keyframes avatar-turn
-    100%
-      transform: rotate(1turn)
-
-// footer heart beat animation
-// ----------------------------------------
-if (hexo-config('footer.icon.enable'))
-  @keyframes footer-heart-beat
-    0%
-      transform: scale(1)
-
-    15%
-      transform: scale(1.2)
-
-    30%
-      transform: scale(1)
-
-    45%
-      transform: scale(1.2)

source/css/_global/base.styl

-::selection
-  color: $selection-color
-  background: $selection-bg
-
-*,
-*::before,
-*::after
-  box-sizing: inherit
-
-html
-  box-sizing: border-box
-  font-size: $font-size-rem
-  line-height: 100%
-
-body
-  position: relative
-  margin: 0
-  font-family: $font-family
-  font-size: $font-size-base
-  line-height: $line-height-base
-  color: $font-color
-  background-color: $body-bg-color
-
-a
-  border-bottom: 1px solid $link-bottom-color
-  text-decoration: none
-  color: $link-color
-  transition: .2s color ease, .2s border-bottom ease
-  cursor: pointer
-
-  &:hover
-    border-bottom: 1px solid $link-bottom-hover-color
-    color: $link-hover-color
-
-img
-  border-radius: 3px
-
-  if ($img-border-width != 0)
-    border: $img-border-width solid $img-border-color
-    padding: .3rem
-
-input[type='checkbox']
-  width: 1em
-  height: 1em
-  font-size: 1em
-  vertical-align: middle
-
-hr
-  position: relative
-  margin: 1rem 0
-  border: 2px dashed $hr-color
-  width: $icon-hr is defined ? calc(100% - 1.5rem) : 100%
-  height: 0
-
-  &::after
-    content: $icon-hr
-    display: block
-    position: absolute
-    top: 50%
-    right: -1.5rem
-    width: 1.5rem
-    font-size: 24px
-    color: $hr-icon-color
-    transform: translateY(-50% - 4px)
-    @extend $font-face-awesome
-
-blockquote
-  border-left: 5px solid $quote-left-color
-  padding: .5rem 1rem
-  background-color: $quote-bg-color
-
-code
-  border-radius: 3px
-  padding: 0 .3em
-  font-family: $code-font-family
-  font-size: .94em
-  word-wrap: break-word
-  color: $code-color
-  background-color: $code-bg-color
-
-table
-  border-spacing: 0
-  border-collapse: collapse
-  min-width: 100%
-
-  th,
-  td
-    border: 1px solid #eee

source/css/_global/index.styl

-@import './base.styl'
-@import './animation.styl'
-@import './utils.styl'

source/css/_global/utils.styl

-// Clear global style
-// ----------------------------------------
-clearAStyle()
-  border-bottom: 0
-
-  &:hover
-    border-bottom: 0
-
-clearImgStyle()
-  border-width: 0
-  border-radius: 0
-  padding: 0
-
-// Clear float
-// ----------------------------------------
-.clearfix::after
-  content: ''
-  display: table
-  clear: both
-
-// UI components
-// ----------------------------------------
-$popover-bg-color = alpha(#000, .7)
-
-// "Popover" component
-[data-popover]
-  position: relative
-
-[data-popover]::before
-  position: absolute
-  top: 0
-  left: 50%
-  z-index: $z-index1
-  font-family: sans-serif, Arial
-  font-size: $font-size-base
-  font-weight: normal
-  font-style: normal
-  white-space: nowrap
-  color: #fff
-  background-color: $popover-bg-color
-  opacity: 0
-  text-shadow: none
-  transition: opacity .2s, transform .2s
-  transform: translate(-50%, -70%)
-  pointer-events: none
-
-[data-popover]::before
-  content: attr(data-popover)
-  border-radius: 4px
-  padding: .2rem .6rem
-
-[data-popover][data-popover-pos='up']:hover::before
-  opacity: 1
-  transform: translate(-50%, -115%)
-
-// "Alert" component
-.stun-message
-  position: fixed
-  top: 1rem
-  left: 50%
-  z-index: $z-index2
-  transform: translateX(-50%)
-
-.stun-alert
-  position: relative
-  border-radius: 3px
-  padding: 8px 12px
-  font-size: $font-size-large
-  line-height: 1rem
-  color: $black-light
-  background-color: #fff
-  box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
-
-  &-success
-    color: $alert-success
-
-    & ~ i
-      color: $alert-success
-
-  &-info
-    color: $alert-info
-
-    & ~ i
-      color: $alert-info
-
-  &-warning
-    color: $alert-warning
-
-    & ~ i
-      color: $alert-warning
-
-  &-error
-    color: $alert-error
-
-    & ~ i
-      color: $alert-error
-
-  &-description
-    margin-left: .5rem
-
-// Animation class
-// ----------------------------------------
-.anime-close
-  &::before,
-  &::after
-    transition: transform .25s
-    transform: rotate(-45deg)
-
-  &::after
-    transform: rotate(-135deg)
-
-  &:hover
-    &::before,
-    &::after
-      transform: rotate(0)
\ No newline at end of file

source/css/_mixins/index.styl

-@import './post-sort.styl'
-@import './post-header.styl'
+transition-ease() {
+  transition-delay: 0s;
+  transition-timing-function: ease;
+  transition-duration: .2s;
+}
+
+transition-ease-in() {
+  transition-delay: 0s;
+  transition-timing-function: ease-in;
+  transition-duration: .2s;
+}
+
+transition-ease-out() {
+  transition-delay: 0s;
+  transition-timing-function: ease-out;
+  transition-duration: .2s;
+}
+
+transition-ease-in-out() {
+  transition-delay: 0s;
+  transition-timing-function: ease-in-out;
+  transition-duration: .2s;
+}
+
+// < 576px
+mobile-small() {
+  @media (max-width: $xs-width) {
+    {block};
+  }
+}
+
+// < 768px
+mobile() {
+  @media (max-width: $sm-width) {
+    {block};
+  }
+}
+
+// < 992px
+tablet-mobile() {
+  @media (max-width: $md-width) {
+    {block};
+  }
+}
+
+// > 768px && < 992px
+tablet() {
+  @media (min-width: $sm-width) and (max-width: $md-width) {
+    {block};
+  }
+}
+
+// > 992px
+desktop() {
+  @media (min-width: $md-width) {
+    {block};
+  }
+}
+
+// > 1200px
+desktop-large() {
+  @media (min-width: $lg-width) {
+    {block};
+  }
+}
+
+clearfix() {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+word-wrap() {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+disable-user-select() {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+a-decoration() {
+  border-bottom: 1px solid $link-bottom-color;
+
+  &:hover {
+    border-bottom-color: $link-bottom-hover-color;
+  }
+}

source/css/_mixins/post-sort.styl

-.article-sort-item
-  display: inline-block
-  position: relative
-  margin-bottom: .8rem
-  padding-left: 1.4rem
-  width: 100%
-  align-items: center
-
-  h2
-    margin: 0
-    font-weight: $font-weight-normal
-    line-height: $line-height-h
-
-  &:last-child
-    margin-bottom: 0
-
-  &:not(.year):hover
-    &::before
-      border-color: $archives-left-dot-hover-color
-
-  &::before
-    content: ''
-    position: absolute
-    top: 50%
-    left: 0
-    z-index: $z-index0
-    border: .15rem solid $archives-left-dot-color
-    border-radius: 50%
-    width: .6rem
-    height: .6rem
-    background-color: $white
-    transition: border-color .2s ease
-    transform: translate(-50%, -50%)
-
-  &.year
-    display: block
-    position: relative
-    font-size: $font-main-base
-    font-weight: $font-weight-bolder
-
-  &__time
-    display: inline-block
-    margin-right: 1rem
-    font-size: $font-main-base
-    vertical-align: middle
-    color: $archives-right-time-color
-    transform: translate(0, 8%)
-
-  &__title
-    display: inline-block
-    max-width: 80%
-    font-size: 1em
-    vertical-align: middle
-
-    a
-      clearAStyle()
-      text-decoration: none
-      color: $font-color
-      cursor: pointer
-
-      &:hover
-        color: $blue-light !important

source/css/_third-party/normalize.min.css

-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
\ No newline at end of file

source/css/var.styl → source/css/_variables/index.styl

-// ==========================================
 // Global variables
 // ==========================================
-
-// Define global color
+// Global color
 $black-light   = #666
 $black-dark    = #333
 $gray-light    = #c2c2c2
@@ -17,210 +15,207 @@ $white         = #fff
 $white-light   = #f4f5f5
 $white-dark    = #e3e4e4
 
+// -------------------------------------------
+// z-index list
+// -------------------------------------------
+$z-index-2 = -2
+$z-index-1 = -1
+$z-index0  = 1000
+$z-index1  = 1001
+$z-index2  = 1002
+
+// -------------------------------------------
+// Layout
+// -------------------------------------------
+// Subtract 0.02px to prevent bugs when certain device sizes
+//   are exactly equal to critical dimensions
+$xs-width = 576px - 0.02px
+$sm-width = 768px - 0.02px
+$md-width = 992px - 0.02px
+$lg-width = 1200px - 0.02px
+
+// Width
+$sidebar-width         = 260px
+$side-main-gap         = 20px
+$content-width         = $md-width
+$main-aside-gap        = 40px
+$main-width            = $sidebar-width + $content-width + $side-main-gap
+
+// -------------------------------------------
+// Font, line-height
+// -------------------------------------------
+// Line height
+$line-height-base       = 2    // global line height
+$line-height-heading    = 1.5  // <h1~6> line height
+$line-height-codeblock  = 1.7  // can`t less 1.3
+
+// Font size
+$font-size-rem          = 20px // <html>
+$font-size-base         = 14px // <body>
+$font-size-header       = $font-size-base + 4px
+$font-size-sidebar      = $font-size-base
+$font-size-main         = $font-size-base
+$font-size-footer       = $font-size-base
+$font-size-heading-base = 1.875em
+$font-size-heading-step = .125em
+
+// Font family
+$font-family-chinese    = 'PingFang SC', 'Microsoft YaHei'
+$font-family-base       = $font-family-chinese, sans-serif, Arial
+$font-family-heading    = $font-family-base
+$font-family-code       = 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace
+$font-family-icons      = 'FontAwesome'
+
+// Font weight
+$font-weight-light      = 300
+$font-weight-normal     = 400
+$font-weight-bold       = 600
+$font-weight-bolder     = 700
+
 // Element color
 // -------------------------------------------
-// Selection (:selection)
+// Selection ( ::selection )
 $selection-bg                  = #8be0e1
 $selection-color               = #fff
 
 // Text
-$font-color                    = $black-dark
+$font-color                    = #333
 
-// Body (<body>)
-$body-bg-color                 = $white-light
+// Body ( <body> )
+$body-bg-color                 = darken(#f4f5f5, 5%)
 
-// Link (<a>)
+// Link ( <a> )
 $link-color                    = #058ed2
 $link-hover-color              = #11a3eb
 $link-bottom-color             = #d9ecfb
 $link-bottom-hover-color       = #7ebef1
 
-// Heading (<h1~6>)
-$h-link-logo-color             = $blue-light
-$h-link-logo-hover-color       = #f47466
-$h-color                       = #222;
-$h-font-size-base              = 16px
-$h-font-size = 2em 1.5em 1.125em 1em 0.875em 0.75em
+// Heading ( <h1~6> )
+$heading-color                 = #222
+$heading-logo-color            = $blue-light
 
-// Horizon line (<hr>)
+// Horizon line ( <hr> )
 $hr-color                      = #b8dcfd
-$hr-icon-color                 = #b8dcfd
 
-// Unordered list (<ul>)
+// Unordered list ( <ul> )
 $ul-list-color                 = $blue-light
 $ul-list-hover-color           = $orange-dark
 
-// Blockquote
+// Blockquote ( <blockquote> )
 $quote-bg-color                = #f6f6f6
 $quote-left-color              = #cbcbcb
 
-// Code
+// Code ( <code> )
 $code-bg-color                 = #f9f2f4
 $code-color                    = #c7254e
 
-// Img    
-$img-border-width              = 1px
+// Images ( <img> )
 $img-border-color              = #dadefb
 
-// Module`s color
+// Module color
 // -------------------------------------------
 // Header
-$header-nav-bg-color             = alpha(#2d2e30, .6)
-$header-nav-text-color           = $white-light
-$header-nav-text-hover-color     = $blue-light
-$header-nav-link-color           = $white-light
-$header-nav-link-hover-color     = $blue-light
+$header-nav-bg-color               = alpha(#2d2e30, .7)
+$header-nav-text-color             = $white-light
+$header-nav-text-hover-color       = $blue-light
+$header-nav-link-color             = $white-light
+$header-nav-link-hover-color       = $blue-light
 
 // Footer
-$footer-text-color               = #eee
-$footer-bg-color                 = #333
-$footer-link-color               = #c20808
-$footer-link-hover-color         = #ed0b0b
+$footer-bg-color                   = alpha(#2d2e30, .7)
+$footer-text-color                 = #eee
+$footer-link-color                 = #c20808
+$footer-link-hover-color           = #ed0b0b
 
 // Home page
-$home-post-read-more-color       = #73c8ff
-$home-post-read-more-hover-color = $blue-light
+$home-readmore-bg-color            = #73c8ff
+$home-readmore-bg-hover-color      = $blue-light
 
-// Archives page
-$archives-left-line-color        = #c8edff
-$archives-left-dot-color         = #6ec5ff
-$archives-left-dot-hover-color   = $orange-dark
-$archives-right-time-color       = #99a9bf
+// Archive page
+$archive-timeline-line-color       = #c8edff
+$archive-timeline-dot-color        = #6ec5ff
+$archive-timeline-dot-hover-color  = $orange-dark
+$archive-timeline-time-color       = #99a9bf
 
-// Categories page
-$categories-list-dot-color       = $blue-light
-$categories-list-dot-hover-color = $orange-dark
-$categories-post-count-color     = #99a9bf
-$categories-link-color           = $font-color
-$categories-link-hover-color     = $blue-light
+// Category page
+$category-list-dot-color           = $blue-light
+$category-list-dot-hover-color     = $orange-dark
+$category-post-count-color         = #99a9bf
+$category-link-color               = $font-color
+$category-link-hover-color         = $blue-light
 
-// Tags page
-$tags-hover-color                = $orange-dark
+// Tag page
+$tag-hover-color                   = $orange-dark
 
 // Sidebar
-$sidebar-nav-text-color          = $font-color
-$sidebar-nav-text-hover-color    = $orange-dark
-$sidebar-social-color            = #a0daff
-$sidebar-social-hover-color      = #64c2fe
-$sidebar-feed-email-color        = #54bcff
-$sidebar-feed-rss-color          = #ff8956
-$sidebar-state-post-color        = #54bcff
-$sidebar-state-category-color    = #5c5c5c
-$sidebar-state-tag-color         = #ff8956
+$sidebar-nav-text-color            = $font-color
+$sidebar-nav-text-hover-color      = $orange-dark
+$sidebar-horizon-line-color        = #e1e1e1
+$sidebar-social-color              = #a0daff
+$sidebar-social-hover-color        = darken(#a0daff, 20%)
+$sidebar-feed-email-color          = #54bcff
+$sidebar-feed-rss-color            = #ff8956
+$sidebar-state-post-color          = #54bcff
+$sidebar-state-category-color      = #5c5c5c
+$sidebar-state-tag-color           = #ff8956
 
 // Post
-$post-info-title-color           = #444
-$post-info-create-color          = #666
-$post-info-update-color          = $blue-light
-$post-info-word-count-color      = #666
-$post-info-reading-time-color    = $blue-light
-$post-info-reading-count-color   = $orange-dark
-$post-tags-icon-color            = $blue-light
+$post-info-title-color             = #444
+$post-info-create-color            = #666
+$post-info-update-color            = $blue-light
+$post-info-word-count-color        = #666
+$post-info-reading-time-color      = $blue-light
+$post-info-reading-count-color     = $orange-dark
+$post-tags-icon-color              = $blue-light
 
 // Pagination
-$pagination-item-color           = #49b1f5
-$pagination-item-bg-color        = #fff
-$pagination-item-hover-color     = #fff
-$pagination-item-hover-bg-color  = #49b1f5
-$pagination-item-active-color    = #f4f5f5
-$pagination-item-active-bg-color = #49b1f5
-$pagination-arrow-color          = #49b1f5
-$pagination-arrow-hover-color    = $orange-dark
+$pagination-item-color             = $blue-light
+$pagination-item-bg-color          = #fff
+$pagination-item-hover-color       = #fff
+$pagination-item-hover-bg-color    = $blue-light
+$pagination-item-active-color      = #f4f5f5
+$pagination-item-active-bg-color   = $blue-light
+$pagination-arrow-color            = $blue-light
+$pagination-arrow-hover-color      = $orange-dark
 
 // Reward
-$reward-btn-color                = #ff6868
-$reward-btn-hover-color          = #e45c5c
-$reward-alipay-color             = #1caceb
-$reward-wechat-color             = #3cb034
+$reward-btn-color                  = #ff6868
+$reward-btn-hover-color            = #e45c5c
+$reward-alipay-color               = #1caceb
+$reward-wechat-color               = #3cb034
 
 // Notification
-$alert-success                   = #52c41a
-$alert-info                      = #1890ff
-$alert-warning                   = #faad14
-$alert-error                     = #f5222d
-
-// -------------------------------------------
-// Font, line-height
-// -------------------------------------------
-// Line height
-$line-height-base       = 2    // global line height
-$line-height-h          = 1.5  // <h1~6> line height
-$line-height-code-block = 1.7  // can`t less 1.3
-
-// Font size
-$font-size-rem          = 20px // <html>
-$font-size-base         = 14px // <body>
-$font-size-small        = $font-size-base - 2px;
-$font-size-smaller      = $font-size-base - 4px;
-$font-size-large        = $font-size-base + 2px;
-$font-size-larger       = $font-size-base + 4px;
-
-// If you don`t want to bother, comment it and default value will be enable
-$font-header-base       = 20px
-$font-footer-base       = 14px
-$font-main-base         = 14px
-$font-sidebar-base      = 14px
-
-// Font family
-$font-family            = PingFang SC, Microsoft YaHei, Lato, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Helvetica Neue, Helvetica, Arial
-$code-font-family       = 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace
-
-// Font weight
-$font-weight-light      = 300
-$font-weight-normal     = 400
-$font-weight-bold       = 600
-$font-weight-bolder     = 700
+$alert-success                     = #52c41a
+$alert-info                        = #1890ff
+$alert-warning                     = #faad14
+$alert-error                       = #f5222d
 
 // -------------------------------------------
-// Icon content define
+// Icon font
 // -------------------------------------------
-// All icon elements will inherit these attributes.
-$font-face-awesome
-  font: normal normal normal 14px/1 FontAwesome;
+$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-h-link             = '\f0c1'
+$icon-heading-link        = '\f0c1'
 
-$icon-ul-list-1          = '\f111'
-$icon-ul-list-2          = '\f10c'
-$icon-ul-list-3          = '\f0c8'
+$icon-ul-list-dot         = '\f111'
+$icon-ul-list-dot-empty   = '\f10c'
+$icon-ul-list-square      = '\f0c8'
 
-$icon-hr                 = '\f0fb'
+$icon-hr                  = '\f0fb'
 
-$note-default            = '\f0a9'
-$note-success            = '\f058'
-$note-warning            = '\f06a'
-$note-danger             = '\f056'
+$note-default             = '\f0a9'
+$note-success             = '\f058'
+$note-warning             = '\f06a'
+$note-danger              = '\f056'
 
 // -------------------------------------------
-// z-index list
-// -------------------------------------------
-$z-index-2 = -2
-$z-index-1 = -1
-$z-index0 = 1000
-$z-index1 = 1001
-$z-index2 = 1002
-
-// -------------------------------------------
-// Responsive layout
-// -------------------------------------------
-// Subtract 0.02px to prevent bugs when certain device sizes
-//   are exactly equal to critical dimensions
-$xs-width = 576px - 0.02px
-$sm-width = 768px - 0.02px
-$md-width = 992px - 0.02px
-$lg-width = 1200px - 0.02px
-
-// -------------------------------------------
-// Layout
+// Table
 // -------------------------------------------
-// Width
-$sidebar-width         = 300px
-$side-main-gap         = 20px
-$content-width         = $md-width
-$main-aside-gap        = $font-size-rem * 2
-$main-width            = $sidebar-width + $content-width + $side-main-gap
-$main-responsive-width = $main-width
+$table-border-color       = #eee
+$table-row-odd-bg-color   = #f8f8f8
+$table-row-hover-bg-color = #f5f5f5

source/css/index.styl

-// Third party.
-// -------------------------------------------
-@import 'nib'
-@import './_third-party/normalize.min.css'
-// Project.
-// -------------------------------------------
-@import './var.styl'
-@import './_global'
-@import './_common'
-@import './_highlight'
-@import './_mixins'
-@import './_components'
-// Custom styles by user.
-// -------------------------------------------
-@import './_custom'
+// 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

@@ -6,7 +6,7 @@ $(document).ready(function () {
     $menu.removeClass('show');
   });
 
-  $('.header-nav-menu-icon').on('click', function (e) {
+  $('.header-nav-btn').on('click', function (e) {
     e.stopPropagation();
     $menu.toggleClass('show');
   });