refactor: Remove flex layout & change UI and some config item

_config.yml

@@ -186,10 +186,6 @@ social_setting:
   enable: false
   # Only show by icon.
   icon_only: true
-  # Available values are equal to "justify-content" attribute in CSS.
-  # e.g. flex-start | center | flex-end | space-between, etc.
-  # For details, please see: https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content/
-  text_align: center
 
 # Table Of Contents in the Sidebar.
 toc:
@@ -324,13 +320,6 @@ code_word_wrap: false
 # If you empty it, images will show by default.
 img_horizonal_align: 
 
-# Vertical alignment of text and images.
-# values:
-# - top
-# - middle
-# - bottom
-text_vertical_align_with_img: bottom
-
 # Reward
 reward:
   enable: false
@@ -471,7 +460,7 @@ algolia_search:
 canvas_ribbon:
   enable: false
   # The width of the ribbon.
-  size: 300
+  size: 120
   # The transparency of the ribbon.
   alpha: 0.6
   # The display level of the ribbon.

layout/_common/header.pug

@@ -32,5 +32,5 @@ header#header(
   
   div.header-info
     div.header-info-inner
-      div.site-info-title= config.title
-      div.site-info-subtitle= config.subtitle
+      div.header-info-title= config.title
+      div.header-info-subtitle= config.subtitle

layout/_common/main.pug

@@ -10,3 +10,5 @@ main#main
     
     if page.comments
       include ../_components/comments.pug
+    
+    div.clearfix

layout/_common/sidebar.pug

@@ -29,7 +29,8 @@ aside#sidebar
               - 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="up")
+                    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]
@@ -64,17 +65,17 @@ aside#sidebar
         - var menuTags       = _.trim(_.get(theme.menu.tags.split('||'), '[0]'))
         div.sidebar-state
           if theme.menu.archives
-            div.sidebar-state-item.sidebar-state-posts
+            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.articles")
           if theme.menu.categories
-            div.sidebar-state-item.sidebar-state-categories
+            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
-            div.sidebar-state-item.sidebar-state-tags
+            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")

layout/_components/comments.pug

 if theme.gitment && theme.gitment.enable
   div#comments.comments.content
     if theme.gitment.lazy
-      div#gitment-button(onclick="showGitment()")
-        != _p("comment.gitment.button")
+      div#gitment-button
+        div.gitment-button-inner!= _p("comment.gitment.button")
       div#gitment-container(style="display: none")
     else
       div#gitment-container

layout/_components/copyright.pug

@@ -4,7 +4,7 @@
   var ccLanguage = (themeCC.language && themeCC.language.toLowerCase()) || "en"
   var ccURL = `https://creativecommons.org/licenses/${ccLicense}/4.0/deed.${ccLanguage}`
 
-div.post-footer-copyright
+div.post-copyright
   div.copyright-author
     span.copyright-name!= _p("post.copyright.author") + ":"
     span.copyright-value

layout/_components/recent-posts.pug

-section#recent-posts
+section#recent-posts.recent-posts
   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-item
+    article(class=`${post.link ? 'post-link' : ''}`).post
       +postHeader(post)
-
-      if post.top
-        include ./sticky-top.pug
-      
-      if theme.post_list.cover_image.home && post.top_image
-        img(src=post.top_image)
-      
-      if post.photos && post.photos.length
-        +gallery(post)
       
-      if theme.auto_excerpt && theme.auto_excerpt.enable
-        - const content = strip_html(post.content)
-        - var excerpt = content.substring(0, theme.auto_excerpt.length)
-        - content.length > theme.auto_excerpt.length ? excerpt += '......' : ''
-        div!= excerpt
-      else if post.excerpt
-        div.post-excerpt!= post.excerpt
-      else
-        div.post-excerpt!= post.content
+      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)
+        
+        if theme.auto_excerpt && theme.auto_excerpt.enable
+          - const content = strip_html(post.content)
+          - var excerpt = content.substring(0, theme.auto_excerpt.length)
+          - content.length > theme.auto_excerpt.length ? excerpt += '......' : ''
+          div!= excerpt
+        else if post.excerpt
+          div.post-excerpt!= post.excerpt
+        else
+          div.post-excerpt!= post.content
 
-      if !post.link
-        div.post-btn
-          a(href=url_for(post.path))= _p("post.read_more") + " »"
+        if !post.link
+          div.post-btn
+            a(href=url_for(post.path))= _p("post.read_more") + " »"
   - })

layout/_mixins/post-header.pug

 mixin postHeader(post)
-  div.post-header
+  header.post-header
+    if post.top
+      include ../_components/sticky-top.pug
+  
     if is_post()
       h1.post-title= post.title || _p("post.untitled")
     else
       if post.link
-        a(href=url_for(post.link) target="_blank").post-title-wrapper
-          h1.post-title= post.title || post.link
+        h1.post-title
+          a(href=url_for(post.link) target="_blank"
+          ).post-title-link= post.title || post.link
       else
-        a(href=url_for(post.path)).post-title-wrapper
-          h1.post-title= post.title || _p("post.untitled")
+        h1.post-title
+          a(href=url_for(post.path)
+          ).post-title-link= post.title || _p("post.untitled")
     
     if !post.link
-      div.post-header-meta
+      div.post-meta
         if theme.post_meta.created.enable
-          span.post-header-meta-create
+          span.post-create
             i(class=`fa fa-${theme.post_meta.created.icon}`)
 
             if !theme.post_meta.icon_only
@@ -21,7 +26,7 @@ mixin postHeader(post)
             span= full_date(post.date, "YYYY-MM-DD")
         
         if theme.post_meta.updated.enable
-          span.post-header-meta-update
+          span.post-update
             i(class=`fa fa-${theme.post_meta.updated.icon}`)
 
             if !theme.post_meta.icon_only
@@ -29,7 +34,7 @@ mixin postHeader(post)
             span= full_date(post.updated, "YYYY-MM-DD")
         
         if theme.post_meta.word_count.enable
-          span.post-header-meta-word-count
+          span.post-word-count
             i(class=`fa fa-${theme.post_meta.word_count.icon}`)
 
             if !theme.post_meta.icon_only
@@ -38,7 +43,7 @@ mixin postHeader(post)
         
         if theme.post_meta.reading_time.enable
           - var postReadingTime = theme.post_meta.reading_time
-          span.post-header-meta-reading-time
+          span.post-reading-time
             i(class=`fa fa-${postReadingTime.icon}`)
             
             if !theme.post_meta.icon_only
@@ -57,7 +62,7 @@ mixin postHeader(post)
         //-   because will conflict by ID selector.
         if is_post()
           if theme.busuanzi.enable && theme.busuanzi.post_pv.enable
-            span.post-header-meta-reading-count
+            span.post-reading-count
               i(class=`fa fa-${theme.busuanzi.post_pv.icon}`)
               
               if !theme.post_meta.icon_only && !theme.busuanzi.post_pv.icon_only

layout/_third-party/comments/gitment.pug

@@ -23,6 +23,10 @@ script.
         document.getElementById("gitment-container").style.display = "block";
         renderGitment();
       }
+
+      document.getElementById('gitment-button').onclick = function () {
+        showGitment();
+      };
     } else {
       renderGitment();
     }

source/css/_common/header.styl

-$header-height = convert(hexo-config('header.height') || '80vh')
-
-if (hexo-config('header.height'))
-  if (match('%', hexo-config('header.height')))
-    $header-height = unit(convert(hexo-config('header.height')), 'vh')
+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
-  display: flex
   position: relative
   height: $header-height
   font-size: $font-header-base
@@ -15,7 +13,6 @@ if (hexo-config('header.height'))
   background-position: center
   background-size: cover
   transition: height .5s
-  flex-direction: column
 
 $header-nav-color
   .header-nav-menu a,
@@ -29,11 +26,10 @@ $header-nav-color
       &::after
         color: $header-nav-link-hover-color
 
-$header-nav-height = convert(hexo-config('header.nav_height') || '50px')
-
-if (hexo-config('header.nav_height'))
-  if (match('%', hexo-config('header.nav_height')))
-    $header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh')
+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
@@ -72,7 +68,7 @@ $header-nav-item
   line-height: $header-nav-height
 
 .header-nav-menu
-  float: left
+  display: inline-block
   height: 100%
   transition: opacity .5s
 
@@ -85,6 +81,9 @@ $header-nav-item
     float: left
     margin: 0 1rem 0 0
 
+    &:last-child
+      margin: 0
+
   a
     clearAStyle()
     display: block
@@ -105,29 +104,32 @@ $header-nav-item
     cursor: pointer
 
 .header-info
-  display: flex
+  position: relative
+  height: 100%
   text-align: center
-  flex: 1
-  flex-direction: column
 
   if (hexo-config('header.mask.enable'))
     background-color: alpha(#000, hexo-config('header.mask.opacity'))
 
 .header-info-inner
-  display: flex
+  display: inline-block
+  position: absolute
+  top: 50%
+  left: 0
+  padding: 0 .5rem
   width: 100%
-  height: 100%
-  flex-direction: column
-  justify-content: center
-
-  .site-info-title
-    font-size: 4rem
-    font-weight: $font-weight-bolder
-    color: #f9f9f9
-    transition: font-size .3s
-
-  .site-info-subtitle
-    font-size: 1.2rem
-    font-weight: $font-weight-normal
-    color: #f9f9f9
-    transition: font-size .3s
+  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/main.styl

@@ -15,13 +15,10 @@ setUlStyle(content, hoverColor)
       color: hoverColor
 
 #container
-  display: flex
   min-height: 100vh
-  flex-direction: column
 
 #main
   margin: 1.5rem 0
-  flex: 1 auto
 
 .main-inner
   margin: 0 auto
@@ -64,12 +61,13 @@ setUlStyle(content, hoverColor)
 
 .content
   border-radius: 5px
-  padding: 2rem
+  padding: 1.5rem 2rem
   font-size: $font-main-base
   background-color: $white
 
   if (hexo-config('sidebar.enable'))
     width: calc(100% - 320px)
+
     if (hexo-config('sidebar.position') == 'left')
       float: right
     else
@@ -78,15 +76,13 @@ setUlStyle(content, hoverColor)
     margin: 0 auto
     width: calc(100% - 200px)
 
-  & > :first-child
-    margin-top: 0
-
-  & > :last-child
-    margin-bottom: 0
+  a
+    word-wrap: break-word
+    word-break: break-word
 
   img
     max-width: 100%
-    vertical-align: convert(hexo-config('text_vertical_align_with_img') || 'bottom')
+    vertical-align: bottom
 
   ul,
   ol
@@ -143,16 +139,9 @@ setUlStyle(content, hoverColor)
       &::before
         content: '--'
         padding: 0 .2em
-
-  table
-    border-spacing: 0
-    border-collapse: collapse
-    margin: 0 auto 1rem
-    min-width: 100%
-
-    th,
-    td
-      border: 1px solid #eee
+  
+  iframe
+    max-width: 100%
 
 .home-content
   @extend .headings

source/css/_common/post.styl

-$img_horizonal_align
-  margin: auto
-
-if (hexo-config('img_horizonal_align') == 'left')
-  $img_horizonal_align
-    margin: 0 auto 0 0
-else if (hexo-config('img_horizonal_align') == 'right')
-  $img_horizonal_align
-    margin: 0 0 0 auto
-
 .post-body,
 #recent-posts
   if (hexo-config('img_horizonal_align'))
     img
       display: block
-      @extend $img_horizonal_align
+
+      if (hexo-config('img_horizonal_align') == 'left')
+        margin: 0 auto 0 0
+      else if (hexo-config('img_horizonal_align') == 'right')
+        margin: 0 0 0 auto
+      else
+        margin: auto
 
 .post-body
   #more
@@ -32,9 +28,6 @@ else if (hexo-config('img_horizonal_align') == 'right')
     span
       margin: 0 .1rem
 
-  &-copyright
-    position: relative
-
   &-tags
     margin-bottom: 1rem
 

source/css/_common/responsive.styl

@@ -12,6 +12,12 @@
 
 // $md-width: 992px - 0.02px
 // -----------------------------------------
+@media screen and (min-width: $md-width)
+  .header-nav-inner
+    .header-nav-menu
+      visibility: visible
+      opacity: 1
+
 @media screen and (max-width: $md-width)
   #header,
   #footer
@@ -30,29 +36,20 @@
     width: 100%
 
   .content
-    padding: 0 .8rem
+    padding: .8rem
     width: 100%
 
-  #recent-posts article.post-item
+  #recent-posts article.post
     margin: 0 0 1rem
     padding: .8rem 1rem
 
-// sm-width: 768px - 0.02px
-// -----------------------------------------
-@media screen and (min-width: $sm-width)
-  .header-nav-inner
-    .header-nav-menu
-      visibility: visible
-      opacity: 1
-
-@media screen and (max-width: $sm-width)
   .header-nav-menu
     visibility: hidden
     border-radius: 3px
-    width: 100%
     height: auto
     background-color: alpha($header-nav-bg-color, .7)
     opacity: 0
+    transform: translate(-1.5rem, 2.5rem)
 
     span
       float: none
@@ -71,11 +68,14 @@
     display: block
     float: left
 
+// sm-width: 768px - 0.02px
+// -----------------------------------------
+@media screen and (max-width: $sm-width)
   .header-info-inner
-    .site-info-title
+    .header-info-title
       font-size: 3.25rem
 
-    .site-info-subtitle
+    .header-info-subtitle
       font-size: 1rem
 
   div.algolia-popup
@@ -94,16 +94,17 @@
 
   .content
     padding: 0 .6rem
+    font-size: $font-size-base
 
-  #recent-posts article.post-item
+  #recent-posts article.post
     margin: 0 0 .8rem
     padding: .6rem .8rem
 
   .header-info-inner
-    .site-info-title
+    .header-info-title
       font-size: 2.5rem
 
-    .site-info-subtitle
+    .header-info-subtitle
       font-size: .8rem
 
   .header-nav-search
@@ -130,9 +131,6 @@
       .dot
         margin: 0 .3rem
 
-  .reward-qr
-    flex-direction: column
-
   .archive-inner
     margin-left: .5rem
 

source/css/_common/sidebar.styl

-$sidebar-float = convert(hexo-config('sidebar.position') || 'right')
 $sidebar-width = convert(hexo-config('sidebar.width') || '300px')
 
 #sidebar
-  float: $sidebar-float
+  float: convert(hexo-config('sidebar.position') || 'right')
   width: $sidebar-width
   font-size: $font-sidebar-base
 
-$sidebar-top = convert(hexo-config('sidebar.offsetTop') || '30px')
-
 .sidebar-inner
   border-radius: 5px
   padding: 1rem
@@ -16,7 +13,7 @@ $sidebar-top = convert(hexo-config('sidebar.offsetTop') || '30px')
 
   &.sticky
     position: fixed
-    top: $sidebar-top
+    top: convert(hexo-config('sidebar.offsetTop') || '30px')
     z-index: $z-index0
 
   .hide
@@ -80,24 +77,21 @@ else
     margin: 0
     padding-left: 1em
 
-$avatar-rounded = 0
-
 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')
-$text-align = convert(hexo-config('social_setting.text_align') || 'center')
 
 .sidebar-overview
   .sidebar-author
-    display: flex
     width: 100%
-    flex-direction: column
+    text-align: center
 
     &-avatar
       clearImgStyle()
-      margin: 0 auto
       border-radius: $avatar-rounded
       width: 150px
       height: 150px
@@ -107,9 +101,8 @@ $text-align = convert(hexo-config('social_setting.text_align') || 'center')
         animation: $avatar-animation .8s both ease-out
 
     &-motto
-      margin: .5rem 0 0
+      margin: 0
       font-weight: $font-weight-bold
-      text-align: center
 
   .sidebar-social,
   .sidebar-feed,
@@ -123,22 +116,18 @@ $text-align = convert(hexo-config('social_setting.text_align') || 'center')
         border-bottom: 1px dashed #e6e6e6
 
   .sidebar-social
-    display: flex
-    margin: 0 auto
     padding: .5rem 0
     text-align: center
-    flex-wrap: wrap
-    justify-content: $text-align
 
     &-item
+      display: inline-block
       margin: .2rem
       border-radius: 1px
       text-align: center
       transition: background-color .3s
-      flex: 0 0 auto
 
       a
-        display: block
+        display: inline-block
 
       i
         display: inline
@@ -180,20 +169,16 @@ $text-align = convert(hexo-config('social_setting.text_align') || 'center')
             color: #fff
 
   .sidebar-feed
-    display: flex
     padding: .5rem 0
     text-align: center
-    justify-content: center
 
     &-icon
       margin-right: .3em
 
     &-email,
     &-rss
-      margin: 0 auto
-
-      span
-        margin: 0 .15em
+      display: inline-block
+      width: 50%
 
     &-email > a
       color: $sidebar-feed-email-color
@@ -202,15 +187,12 @@ $text-align = convert(hexo-config('social_setting.text_align') || 'center')
       color: $sidebar-feed-rss-color
 
   .sidebar-state
-    display: flex
     padding: .5rem 0
-    flex-wrap: wrap
-    justify-content: center
 
     &-item
-      margin-right: .5rem
+      display: inline-block
       border-right: 1px solid #eee
-      padding-right: .5rem
+      width: 33.3%
       line-height: 1.6em
       text-align: center
 
@@ -233,23 +215,11 @@ $text-align = convert(hexo-config('social_setting.text_align') || 'center')
       color: $sidebar-state-tag-color
 
   .sidebar-cc
-    padding: .5rem 0
+    padding-top: .5rem
     text-align: center
 
     img
-      border-width: 0
-      padding: 0
-
-  & > :last-child
-    margin-bottom: 0
-    padding-bottom: 0
-
-  & > :first-child
-    margin-top: 0
-    padding-top: 0
-
-$reading_progress_color = convert(hexo-config('reading_progress.color') || '$blue-light')
-$reading_progress_height = convert(hexo-config('reading_progress.height') || '1px')
+      clearImgStyle()
 
 .sidebar-progress
   margin-top: .5em
@@ -263,5 +233,5 @@ $reading_progress_height = convert(hexo-config('reading_progress.height') || '1p
 
   &-line
     width: 0
-    height: $reading_progress_height
-    background-color: $reading_progress_color
+    height: convert(hexo-config('reading_progress.height') || '1px')
+    background-color: convert(hexo-config('reading_progress.color') || '$blue-light')

source/css/_components/comments.styl

 .comments
-  display: flex
   margin: 1.5rem 0 0
-  flex-direction: column
 
   a
-    text-decoration: none !important
-
-  // Gitment
-  #gitment-container
-    width: 100%
-
-  #gitment-button
-    margin: 0 auto
-    border-radius: 10px
-    padding: .2rem 1rem
-    text-align: center
-    color: $white
-    background-color: alpha($blue-light, .8)
-    transition: background-color .2s
-    cursor: pointer
-
-    &:hover
-      background-color: $blue-light
-
-  a.gitment-editor-avatar
     clearAStyle()
 
-  // Gitalk
-  #gitalk-container
-    width: 100%
+// Gitment
+#gitment-container
+  width: 100%
 
-    & > :first-child
-      margin: 0 auto
+#gitment-button
+  text-align: center
 
-  // Livere
-  #lv-container
-    width: 100%
+.gitment-button-inner
+  display: inline-block
+  border-radius: 10px
+  padding: .2rem 1rem
+  color: $white
+  background-color: alpha($blue-light, .8)
+  transition: background-color .2s
+  cursor: pointer
 
-  // Disqus
-  #disqus_thread
-    width: 100%
+  &:hover
+    background-color: $blue-light
+
+// Gitalk
+#gitalk-container
+  width: 100%
+
+  .gt-meta
+    margin-top: 0
+    padding-top: 0
+
+// Livere
+#lv-container
+  width: 100%
+
+// Disqus
+#disqus_thread
+  width: 100%

source/css/_components/copy.styl

@@ -7,12 +7,3 @@
   text-align: center
   color: $black-light
   cursor: pointer
-
-.highlight
-  figcaption.custom
-    padding: .1rem 0
-    min-height: 1.5rem
-
-    span
-      margin: 0 1rem 0 .6rem
-      color: alpha($highlight-header-color, .5)

source/css/_components/copyright.styl

-.post-footer-copyright
+.post-copyright
+  position: relative
   margin: 1.2rem 0
   border: 1px solid #e6e6e6
   border-radius: 2px

source/css/_components/external-link.styl

-$external-link-icon-color = convert(hexo-config('external_link.icon.color') || '#aaa')
-
 .external-link
   margin: 0 .1em 0 .2em
   font-size: .9em
-  color: $external-link-icon-color
+  color: convert(hexo-config('external_link.icon.color') || '#aaa')
 
 .footer-inner
   .external-link
     color: #fff
+
+.post-title-link
+  .external-link
+    font-size: .7em

source/css/_components/pagination.styl

@@ -4,11 +4,11 @@
   width: 100%
   font-size: 1.2em
 
-  .paginator-inner
-    border-radius: 5px
-    padding: .7em 0
-    text-align: center
-    background-color: $white
+.paginator-inner
+  border-radius: 5px
+  padding: .7em 0
+  text-align: center
+  background-color: $white
 
   a.page-number
     clearAStyle()
@@ -49,13 +49,11 @@
       color: $pagination-arrow-hover-color
 
   a.prev
-    margin-right: 1em
+    margin-right: .5em
 
   a.next
-    margin-left: 1em
+    margin-left: .5em
 
-// Paginator after post
-// -------------------------
 .post-paginator
   overflow: hidden
   border-top: 1px solid #e8e8e8

source/css/_components/recent-posts.styl

-.post-header
-  margin-bottom: 1.5rem
-
-.post-excerpt
-  margin-bottom: 2em
-
-.post-item
-  position: relative
+.post
   margin: 0 0 1.5rem
   border-radius: 5px
   padding: 1.5rem 2rem
   width: 100%
   background-color: $white
 
-  & > :first-child,
-  .post-excerpt > :first-child
-    margin-top: 0
-
-  & > :last-child,
-  .post-excerpt > :last-child
-    margin-bottom: 0
-
-.sticky-top
-  top: 1rem
+.post-excerpt
+  margin-bottom: 2em
 
 .post-btn
-  display: flex
+  text-align: center
 
   a
     clearAStyle()
     display: inline-block
-    margin: 0 auto
     border-radius: 5px
     padding: 0 .6em
-    text-align: center
     color: $white
     background-color: $home-post-read-more-color
     transition: background-color .2s ease
@@ -40,10 +23,3 @@
 
     &:hover
       background-color: $home-post-read-more-hover-color
-
-.post-link
-  .post-header
-    margin: 0 0 .5rem
-
-  .post-title-wrapper
-    margin: 0

source/css/_components/reward.styl

 #reward
-  display: flex
-  flex-direction: column
+  text-align: center
 
 .reward-button
-  margin: 1rem auto 1.5rem
+  display: inline-block
+  margin: 1rem 0 1.5rem
   border-radius: 10px
   padding: .2rem 1rem
   color: $white
   background-color: $reward-btn-color
   transition: background-color .2s
   cursor: pointer
-  justify-content: center
 
   &:hover
     background-color: $reward-btn-hover-color
@@ -19,13 +18,12 @@
   display: none
 
 .reward-qr
-  display: flex
+  overflow: hidden
 
   &-alipay,
   &-wechat
-    margin: 0 auto
-    text-align: center
-    justify-content: center
+    display: inline-block
+    margin: 0 2rem
 
     img
       width: 200px

source/css/_components/search/algolia.styl

@@ -24,12 +24,10 @@
   background-color: $white-light
 
 .algolia-input-wrapper
-  display: flex
   margin: 1rem 0
-  flex-direction: column
 
   .ais-search-box
-    margin: auto
+    max-width: 100%
 
   input
     border: 2px solid alpha($blue-light, .5)
@@ -42,9 +40,6 @@
     &:focus
       border-color: $blue-light
 
-  .ais-search-box
-    max-width: 100%
-
 .algolia-close
   position: absolute
   top: 0

source/css/_components/sticky-top.styl

-if (hexo-config('stick_top.position') == 'left')
-  $stick-top-position
-    left: 1.5rem
-else
-  $stick-top-position
-    right: 1.5rem
-
 $stick-top-rotate = convert(hexo-config('stick_top.rotate' || '0deg'))
-$stick-top-color = convert(hexo-config('stick_top.color' || '#999'))
 
 .sticky-top
   position: absolute
@@ -15,11 +7,22 @@ $stick-top-color = convert(hexo-config('stick_top.color' || '#999'))
   height: 1.5rem
   line-height: 1.5rem
   text-align: center
-  @extend $stick-top-position
+
+  if (hexo-config('stick_top.position') == 'left')
+    left: 0
+  else
+    right: 0
 
   i
-    color: $stick-top-color
+    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/base.styl

@@ -80,3 +80,12 @@ code
   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/utils.styl

@@ -9,6 +9,11 @@ clearImgStyle()
   border-radius: 0
   padding: 0
 
+.clearfix::after
+  content: ''
+  display: table
+  clear: both
+
 $popover-bg-color = alpha(#000, .7)
 
 [data-popover]

source/css/_highlight/highlight.styl

@@ -5,113 +5,87 @@ languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'co
 $wordWrap = hexo-config('code_word_wrap')
 
 for lang in languages
-  .code-highlight
-    figure.highlight{'.' + lang}
-      & figcaption:not(.custom)
-        padding: .1rem 0
-
-        span
-          &::before
-            content: lang
-            margin: 0 .6rem
-            color: alpha($highlight-header-color, .5)
-
-$codeblockStyle
+  .highlight{'.' + lang}
+    figcaption
+      span
+        &::before
+          content: lang
+          margin: 0 .6rem
+          color: alpha($highlight-header-color, .5)
+
+.highlight
   overflow: auto
-  margin: .5rem 0
+  position: relative
+  margin: .5rem 0 1rem
   min-width: 100%
   line-height: $line-height-code-block
   color: $highlight-color
   background-color: $highlight-background
 
-  if ($wordWrap)
-    white-space: pre-wrap
-    counter-reset: line
-
-.code-highlight
   pre,
   code
     font-family: $code-font-family
 
   pre
-    @extend $codeblockStyle
-    padding: .5rem
-
-    code
-      padding: 0
-      background: none
-      text-shadow: none
+    margin: 0
 
-  .highlight
-    @extend $codeblockStyle
-    position: relative
-    margin-bottom: 1rem
-    border-radius: 1px
+    if ($wordWrap)
+      white-space: pre-wrap
+      counter-reset: line
 
-    pre
-      margin: 0
-      border: none
-      padding: .1rem 0
+  td
+    border: 0
 
-    td
-      border: none
-      padding: 0
+  figcaption
+    overflow: hidden
+    padding: .1rem 0
+    width: 100%
+    color: $highlight-header-color
+    background-color: $highlight-header-bg-color
 
-    // Code block header
-    figcaption
-      display: block
-      overflow: hidden
-      width: 100%
+    span
+      float: left
       color: $highlight-header-color
-      background-color: $highlight-header-bg-color
 
-      span
-        float: left
-        color: $highlight-header-color
-
-      a
-        float: right
-        margin-right: 2rem
-        border-bottom: 0
-
-    // Code block body
-    table
-      border-spacing: 0
-      position: relative
-      margin: 0
-      border: none
-      width: 100%
-
-      // Code line numbers
-      .gutter
-        if ($wordWrap)
-          display: none
-
-        padding: 0 .6rem
-        width: 1rem
-        background-color: $highlight-gutter-bg-color
+    a
+      float: right
+      margin-right: 2rem
+      border-bottom: 0
 
-        pre
-          text-align: right
-          color: $highlight-gutter-color
-          background-color: inherit
+  figcaption.custom
+    padding: .1rem 0
+    min-height: 1.5rem
 
-      // Code content
-      .code
-        padding: 0 .5rem
+    span
+      margin: 0 1rem 0 .6rem
+      color: alpha($highlight-header-color, .5)
 
-    .line
-      height: $line-height
+  .gutter,
+  .code
+    padding: .4rem .5rem
 
-      if ($wordWrap)
-        &::before
-          content: counter(line)
-          display: inline-block
-          margin: 0 1rem 0 0
-          width: 1rem
-          text-align: right
-          color: $highlight-gutter-color
-          counter-increment: line
+  .gutter
+    width: 1rem
+    background-color: $highlight-gutter-bg-color
+
+    if ($wordWrap)
+      display: none
+
+    pre
+      text-align: right
+      color: $highlight-gutter-color
+      background-color: inherit
+
+  if ($wordWrap)
+    .line
+      &::before
+        content: counter(line)
+        display: inline-block
+        margin: 0 1rem 0 0
+        width: 1rem
+        text-align: right
+        color: $highlight-gutter-color
+        counter-increment: line
 
   pre
     .variable,

source/css/_mixins/post-header.styl

 .post-header
+  position: relative
   margin: 0 0 1.5rem
   text-align: center
 
-  .post-title-wrapper
-    display: inline-block
-    position: relative
-    margin: 0 0 1rem
-    border-width: 0
-    word-wrap: break-word
-    color: $post-info-title-color
-
-    .post-title
-      cursor: pointer
-
   .post-title
     display: inline-block
     margin: 0
-    font-size: $font-post-title
     cursor: auto
 
-    &::before
-      content: ''
-      visibility: hidden
-      position: absolute
-      bottom: 0
-      left: 0
-      width: 100%
-      height: 2px
-      background-color: #000
-      transition-timing-function: ease
-      transition-duration: .2s
-      transform: scaleX(0)
+    &-link
+      clearAStyle()
+      display: inline-block
+      position: relative
+      font-size: inherit
+      word-wrap: break-word
+      word-break: break-word
+      color: $post-info-title-color
+      cursor: pointer
+
+      &::before
+        content: ''
+        visibility: hidden
+        position: absolute
+        bottom: 0
+        left: 0
+        width: 100%
+        height: 2px
+        background-color: #000
+        transition-timing-function: ease
+        transition-duration: .2s
+        transform: scaleX(0)
+
+      &:hover::before
+        visibility: visible
+        transform: scaleX(1)
+
+.post-meta
+  i
+    margin-right: .2rem
 
-    &:hover::before
-      visibility: visible
-      transform: scaleX(1)
+  & > span
+    &:not(:first-child)::before
+      content: '•'
+      margin: 0 .3rem
+      color: #666
 
-  &-meta
-    *::before,
-    *::after
-      margin-right: .2rem
-      @extend $font-face
+.post-create
+  color: $post-info-create-color
 
-    & > span
-      &:not(:first-child)::before
-        content: '•'
-        margin: 0 .3rem
-        color: #666
+.post-update
+  color: $post-info-update-color
 
-    &-create
-      color: $post-info-create-color
+.post-word-count
+  color: $post-info-word-count-color
 
-    &-update
-      color: $post-info-update-color
+.post-reading-time
+  color: $post-info-reading-time-color
 
-    &-word-count
-      color: $post-info-word-count-color
+.post-reading-count
+  color: $post-info-reading-count-color
 
-    &-reading-time
-      color: $post-info-reading-time-color
+.leancloud_visitors
+  color: $post-info-reading-count-color
 
-    &-reading-count
-      color: $post-info-reading-count-color
+.post-link
+  .post-header
+    margin: 0 0 .5rem
 
-  .leancloud_visitors
-    color: $post-info-reading-count-color
+  .post-title-wrapper
+    margin: 0
 
-  .external-link
-    font-size: 1.5em
+  .post-excerpt
+    margin: 0

source/css/_mixins/post-sort.styl

 .article-sort-item
-  display: flex
+  display: inline-block
   position: relative
   margin-bottom: .8rem
   padding-left: 1.4rem
+  width: 100%
   align-items: center
 
   h2
@@ -38,13 +39,17 @@
     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%
+    vertical-align: middle
 
     a
       clearAStyle()

source/css/index.styl

@@ -6,9 +6,9 @@
 // -------------------------------------------
 @import './var.styl'
 @import './_global'
+@import './_common'
 @import './_highlight'
 @import './_mixins'
-@import './_common'
 @import './_components'
 // Custom styles by user.
 // -------------------------------------------

source/js/copy.js

@@ -24,7 +24,7 @@ $(document).ready(function () {
     '</div>'
   );
   var COPY_BUTTON_WRAPPER =
-    'figure.highlight figcaption, .post-footer-copyright';
+    'figure.highlight figcaption, .post-copyright';
 
   // Add a copy button to the selected elements.
   $(COPY_BUTTON_WRAPPER).append($copyIcon);

source/js/sidebar.js

@@ -55,10 +55,6 @@ $(document).ready(function () {
     $view.velocity('fadeIn');
   });
 
-  if ($('.content').height() < $('#sidebar').height()) {
-    $('#main').css('min-height', $('#main').height());
-  }
-
   // Automatically expand items in the article directory
   //   based on the scrolling of heading in the article.
   function autoSpreadToc () {

source/js/stun-boot.js

 $(document).ready(function () {
   CONFIG.shortcuts.switch_post && Stun.utils.registerSwitchPost();
   CONFIG.reward && Stun.utils.registerShowReward();
-  CONFIG.back2top && Stun.utils.back2Top();
+  CONFIG.back2top && Stun.utils.back2top();
   CONFIG.gallery_waterfall && Stun.utils.galleryWaterFall();
   CONFIG.external_link && Stun.utils.addIconToExternalLink();
 

source/js/utils.js

@@ -246,8 +246,8 @@ Stun.utils = Stun.$u = {
     $(CONTAINER).find('a[target="_blank"]').append($icon);
   },
   // Back the page to top.
-  back2Top: function () {
-    function runBack2Top () {
+  back2top: function () {
+    function back2topHandler () {
       var $top = $('#back-top');
       var scrollTop = $(window).scrollTop();
 
@@ -258,13 +258,8 @@ Stun.utils = Stun.$u = {
       }
     }
 
-    $(window).on('load', function () {
-      runBack2Top();
-    });
-
-    $(window).on('scroll', function () {
-      runBack2Top();
-    });
+    $(window).on('load', back2topHandler);
+    $(window).on('scroll', back2topHandler);
 
     $('#back-top').on('click', function () {
       $('body').velocity('stop').velocity('scroll');