refactor: Optimize the display of ui

layout/_layout.pug

@@ -19,17 +19,17 @@ html(lang=config.language)
 
       main#main.main
         div.main-inner
-          div#content.content
-            div.content-inner(class=`${is_home() ? 'content-home' : ''}`)
+          div#content-wrap.content-wrap
+            div.content(class=`${is_home() ? 'content-home' : ''}`)
               block content
 
+            if page.comments
+              include ./_partials/widgets/comments.pug
+
           aside#sidebar.sidebar
             div.sidebar-inner
               != partial('./_partials/sidebar/sidebar.pug', null, { cache: theme.cache })
 
-          if page.comments
-            include ./_partials/widgets/comments.pug
-
           div.clearfix
 
       footer#footer.footer

layout/_third-party/pjax.pug

@@ -46,6 +46,8 @@ script.
 
     // 重置页面 Y 方向上的滚动偏移量
     document.addEventListener('pjax:send', function () {
+      $('.header-nav-menu').removeClass('show');
+
       $('html').velocity('scroll', {
         duration: 500,
         offset: $('#header').height(),

layout/page.pug

@@ -17,13 +17,8 @@ block content
       div.category-total= __("page.categories") + " - "
         span= site.categories.length
       != list_categories()
-  else if (page.type === "about")
-    div.about
-      if page.photos && page.photos.length
-        +gallery(page)
-      != page.content
   else
-    div.custom
+    div.custom-page
       if page.photos && page.photos.length
         +gallery(page)
       != page.content

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

 .archive {
-  position: relative;
-  margin: 0 0 0 1rem;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: $font-size-main;
-    bottom: $font-size-main;
-    left: 0;
-    border-left: .3rem dashed $post-timeline-line-color;
-    transform: translateX(-50%);
-  }
+  margin-left: 1rem;
 
   &-total {
     position: relative;
-    margin-bottom: 1.5rem;
-    padding-left: 1.5rem;
-    font-size: 1.2em;
+    padding: 0 0 1.5rem 1.5rem;
+    font-size: calc(1em + 2px);
 
     &::before {
       content: '';
       position: absolute;
-      top: 50%;
+      top: 1em;
       left: 0;
       z-index: $z-index0;
       border: .2rem solid $post-timeline-dot-color;
@@ -32,6 +20,16 @@
       transform: translate(-50%, -50%);
     }
 
+    &::after {
+      content: '';
+      position: absolute;
+      top: 1em;
+      bottom: 0;
+      left: 0;
+      border-left: .3rem dashed $post-timeline-line-color;
+      transform: translateX(-50%);
+    }
+
     &:hover {
       &::before {
         border-color: $post-timeline-dot-hover-color;
@@ -40,10 +38,16 @@
   }
 }
 
+.custom-page {
+  width: 100%;
+}
+
 .tagcloud,
 .category {
+  width: 100%;
+
   &-total {
-    font-size: $font-size-base + 10px;
+    font-size: calc(1em + 10px);
     text-align: center;
     cursor: default;
   }

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

@@ -5,7 +5,7 @@
   &__item {
     display: block;
     float: left;
-    padding: .5rem;
+    padding: .5rem 1rem;
     width: 50%;
     height: 100px;
     transition: background-color .3s;

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

@@ -3,10 +3,8 @@
 .post-list {
   .post {
     margin: 0 0 1.5rem;
-    border-radius: 5px;
-    padding: 1.5rem 2rem;
     width: 100%;
-    background-color: $white;
+    layout-card();
 
     &-body {
       &-more {

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

 if (hexo-config('gitalk.enable') || hexo-config('valine.enable') || hexo-config('livere.enable') || hexo-config('disqus.enable')) {
   .comments {
     margin: 1.5rem 0 0;
-    width: $content-width;
+    width: 100%;
     layout-card();
 
     if (hexo-config('sidebar.position') == 'left') {

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

@@ -2,10 +2,10 @@
   margin-top: 1.5em;
   border-radius: 5px;
   text-align: center;
-  background-color: $white;
 
   &-inner {
     padding: .8em 0;
+    background-color: $white;
   }
 
   .space,

source/css/_common/outline/macro.styl

@@ -39,7 +39,7 @@ if (hexo-config('sidebar.enable')) {
   }
 }
 
-.content {
+.content-wrap {
   width: 'calc(100% - %s)' % ($sidebar-width + $main-sidebar-gap);
 
   if (hexo-config('sidebar.position') == 'left') {
@@ -47,51 +47,50 @@ if (hexo-config('sidebar.enable')) {
   } else if (hexo-config('sidebar.position') == 'right') {
     float: left;
   }
+}
 
-  &-inner {
-    width: 100%;
-    height: 100%;
-    layout-card();
+.content {
+  width: 100%;
+  layout-card();
 
-    img {
-      border: 1px solid $img-border-color;
-      border-radius: 3px;
-      padding: .2rem;
-    }
+  img {
+    border: 1px solid $img-border-color;
+    border-radius: 3px;
+    padding: .2rem;
+  }
 
-    .post-body {
-      if (hexo-config('heading_line')) {
-        h1,
-        h2 {
-          border-bottom: 1px solid $heading-line-color;
-          padding-bottom: .3em;
-        }
+  .post-body {
+    if (hexo-config('heading_line')) {
+      h1,
+      h2 {
+        border-bottom: 1px solid $heading-line-color;
+        padding-bottom: .3em;
       }
     }
+  }
 
-    .table-container {
-      overflow: auto;
-      margin-bottom: 1rem;
-    }
+  .table-container {
+    overflow: auto;
+    margin-bottom: 1rem;
+  }
 
-    .heading-link {
-      color: $heading-color;
-      cursor: pointer;
+  .heading-link {
+    color: $heading-color;
+    cursor: pointer;
+
+    &::after {
+      content: $icon-heading-link;
+      margin-left: .3em;
+      color: $heading-logo-color;
+      opacity: 0;
+      transition-property: opacity;
+      transition-ease();
+      fontawesome-base();
+    }
 
+    &:hover {
       &::after {
-        content: $icon-heading-link;
-        margin-left: .3em;
-        color: $heading-logo-color;
-        opacity: 0;
-        transition-property: opacity;
-        transition-ease();
-        fontawesome-base();
-      }
-
-      &:hover {
-        &::after {
-          opacity: 1;
-        }
+        opacity: 1;
       }
     }
   }

source/css/_common/responsive.styl

@@ -28,7 +28,7 @@
     margin: 1rem 0;
   }
 
-  .content {
+  .content-wrap {
     width: 100%;
   }
 
@@ -129,13 +129,24 @@
     width: 100%;
   }
 
-  .content-inner {
+  .content,
+  .comments {
     padding: .6rem .8rem;
     font-size: $font-size-base;
   }
 
   .archive {
     margin-left: .5rem;
+
+    &-total {
+      padding-left: 1rem;
+    }
+  }
+
+  .post-timeline {
+    &-item {
+      padding-left: 1rem;
+    }
   }
 
   .header-nav-search {
@@ -160,7 +171,7 @@
   }
 
   .friends-plugin {
-    .friends-item {
+    &__item {
       margin: 0;
       padding: .5rem 1rem;
       width: 100%;

source/css/_common/scaffolding/base.styl

@@ -32,7 +32,7 @@ h5,
 h6 {
   padding: 0;
   font-family: $font-family-heading;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-bolder;
   line-height: $line-height-heading;
 }
 
@@ -58,6 +58,10 @@ a {
   }
 }
 
+ul {
+  padding-left: 1.5em;
+}
+
 img,
 video,
 iframe {

source/js/scroll.js

@@ -89,7 +89,7 @@ $(document).ready(function () {
 
   Stun.utils.pjaxReloadScroll = function () {
     // Click the heading.
-    $('#content')
+    $('#content-wrap')
       .find('h1,h2,h3,h4,h5,h6')
       .on('click', function () {
         scrollHeadingToTop('#' + $(this).attr('id'));

source/js/sidebar.js

@@ -103,7 +103,7 @@ $(document).ready(function () {
 
   // Update the reading progress lines of post.
   function readProgress () {
-    var $post = $('#content');
+    var $post = $('#content-wrap');
     var scrollH = ($post[0] &&
       $post[0].getBoundingClientRect().top * -1) || 0;
 
@@ -138,7 +138,7 @@ $(document).ready(function () {
     var $navOv = $('.sidebar-nav-ov');
     var $tocWrap = $('.sidebar-toc');
     var $overview = $('.sidebar-ov');
-  
+
     $navToc.on('click', function () {
       if ($(this).hasClass('current')) return;
 

source/js/utils.js

@@ -304,7 +304,7 @@ Stun.utils = Stun.$u = {
   },
   // Click to zoom in image, without fancybox.
   registerClickToZoomImage: function () {
-    $('#content img').not(':hidden').each(function () {
+    $('#content-wrap img').not(':hidden').each(function () {
       $(this).addClass('zoom-image');
     });