refactor: Optimize responsive layout

refactor: Update

README.md

@@ -76,12 +76,12 @@ $ git pull
 
 ## 问题
 
-如果使用时出现问题，首先请仔细阅读[文档](https://liuyib.github.io/hexo-theme-stun/zh-CN/)，或者查看[常见问题](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md)。当以上的方法都无法解决你的问题时，再去提 `issue` :hugs:。
+如果遇到问题，首先请仔细阅读[文档](https://liuyib.github.io/hexo-theme-stun/zh-CN/)，或者查看[常见问题](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md)。当以上的方法都无法帮助你时，再去提出 `issue`:hugs:。
 
 ## 浏览器支持
 
 | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235410.png" alt="IE" width="32px" height="32px" /></br> IE | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_64x64.png" alt="Edge" width="32px" height="32px" /></br> Edge | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235406.png" alt="Firefox" width="32px" height="32px" /></br> Firefox | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235407.png" alt="Chrome" width="32px" height="32px" /></br> Chrome | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235409.png" alt="Safari" width="32px" height="32px" /></br> Safari | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235411.png" alt="Opera" width="32px" height="32px" /></br> Opera |
-| --- | --- | --- | --- | --- | --- |
+| :---: | :---: | :---: |:---: | :---: | :---: |
 | Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ |
 
 ## 开源协议

README_en_US.md

@@ -74,12 +74,12 @@ Please see: [https://liuyib.github.io/hexo-theme-stun/](https://liuyib.github.io
 
 ## Question
 
-If you have problems with your use, please read [documentation](https://liuyib.github.io/hexo-theme-stun/zh-CN/) firstly, or check [FAQ](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md). When the above methods can't solve your problem, then mention `issue` :hugs:.
+If you have problems, please read [documentation](https://liuyib.github.io/hexo-theme-stun/zh-CN/) firstly, or check [FAQ](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md). You can open an `issue` when the above methods can't help you :hugs:.
 
 ## Browser Support
 
 | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235410.png" alt="IE" width="32px" height="32px" /></br> IE | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_64x64.png" alt="Edge" width="32px" height="32px" /></br> Edge | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235406.png" alt="Firefox" width="32px" height="32px" /></br> Firefox | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235407.png" alt="Chrome" width="32px" height="32px" /></br> Chrome | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235409.png" alt="Safari" width="32px" height="32px" /></br> Safari | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235411.png" alt="Opera" width="32px" height="32px" /></br> Opera |
-| --- | --- | --- | --- | --- | --- |
+| :---: | :---: | :---: |:---: | :---: | :---: |
 | Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ |
 
 ## License

source/css/_common/header.styl

@@ -7,7 +7,6 @@ if (hexo-config('header.height'))
 #header
   display: flex
   position: relative
-  margin: 0 0 3rem
   height: $header-height
   font-size: $font-header-base
   background-color: $gray-dark

source/css/_common/main.styl

@@ -20,22 +20,12 @@ setUlStyle(content, hoverColor)
   flex-direction: column
 
 #main
-  margin-bottom: 3rem
+  margin: 1.5rem 0
   flex: 1 auto
 
 .main-inner
   margin: 0 auto
-
-$content-position
-  margin: 0 auto
-
-if (hexo-config('sidebar.enable'))
-  if (hexo-config('sidebar.position') == 'left')
-    $content-position
-      float: right
-  else
-    $content-position
-      float: left
+  width: calc(100% - 2rem)
 
 .headings
   h1,
@@ -73,12 +63,21 @@ if (hexo-config('sidebar.enable'))
         margin-left: .8rem - .1 * size
 
 .content
-  @extend $content-position
   border-radius: 5px
   padding: 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
+      float: left
+  else
+    margin: 0 auto
+    width: calc(100% - 200px)
+
   & > :first-child
     margin-top: 0
 

source/css/_common/responsive.styl

-// $content-desktop: 1340px
+// $main-width: A calc value.
 // -----------------------------------------
-@media screen and (min-width: $content-desktop)
+@media screen and (min-width: $main-responsive-width)
   #header
     width: 100%
 
   .header-nav-inner
-    width: $content-desktop
+    width: $main-width
 
   .main-inner
-    width: $content-desktop
+    width: $main-width
 
-@media screen and (max-width: $content-desktop)
-  .header-nav-inner
-    width: 100%
-
-  #sidebar
-    display: none
-
-  .content
-    float: none
-    margin: 0 auto
-
-  .comments
-    margin: 1.5rem auto 0
-
-// $md-width: 992px
+// $md-width: 992px - 0.02px
 // -----------------------------------------
-@media screen and (min-width: $md-width)
-  .content,
-  .comments
-    width: $main-desktop
-
 @media screen and (max-width: $md-width)
   #header,
   #footer
     background-attachment: local
 
   #header
-    height: 50vh
+    height: 340px
 
-  #header,
   #main
-    margin-bottom: 2rem
+    margin: 1rem 0
+
+  #sidebar
+    display: none
+
+  .main-inner
+    width: 100%
 
   .content
-    padding: 1.2rem
+    padding: 0 .8rem
     width: 100%
 
-// sm-width: 768px
+  #recent-posts article.post-item
+    margin: 0 0 1rem
+    padding: .8rem 1rem
+
+// sm-width: 768px - 0.02px
 // -----------------------------------------
 @media screen and (min-width: $sm-width)
   .header-nav-inner
@@ -83,7 +73,7 @@
 
   .header-info-inner
     .site-info-title
-      font-size: 3rem
+      font-size: 3.25rem
 
     .site-info-subtitle
       font-size: 1rem
@@ -93,15 +83,21 @@
     margin: 0 1rem
     width: calc(100% - 2rem)
 
-// $xs-width: 576px
+// $xs-width: 576px - 0.02px
 // -----------------------------------------
 @media screen and (max-width: $xs-width)
   #header
     height: 240px
 
-  #header,
   #main
-    margin-bottom: 1.5rem
+    margin: .8rem 0
+
+  .content
+    padding: 0 .6rem
+
+  #recent-posts article.post-item
+    margin: 0 0 .8rem
+    padding: .6rem .8rem
 
   .header-info-inner
     .site-info-title
@@ -120,9 +116,6 @@
     .algolia-hit-item
       margin: 0
 
-  .content
-    padding: 1rem
-
   .post-header
     .post-title
       font-size: 1.25rem
@@ -140,14 +133,6 @@
   .reward-qr
     flex-direction: column
 
-  #recent-posts
-    article.post-item
-      margin: 0 0 1.5rem
-      padding: 1rem 1.2rem
-
-  .content
-    padding: 1.2rem
-
   .archive-inner
     margin-left: .5rem
 

source/css/_components/recent-posts.styl

@@ -7,7 +7,7 @@
 
   .post-item
     position: relative
-    margin: 0 0 2rem
+    margin: 0 0 1.5rem
     border-radius: 5px
     padding: 1.5rem 2rem
     width: 100%

source/css/var.styl

@@ -201,15 +201,6 @@ $z-index1 = 1001
 $z-index2 = 1002
 $z-index3 = 1003
 
-// -------------------------------------------
-// Layout
-// -------------------------------------------
-// Width
-$main-sidebar-gap  = 30px
-$main-desktop      = 992px
-$content-desktop   = $main-desktop + convert(
-  hexo-config('sidebar.width') || '300px') + $main-sidebar-gap
-
 // -------------------------------------------
 // Responsive layout
 // -------------------------------------------
@@ -219,3 +210,14 @@ $xs-width = 576px - 0.02px
 $sm-width = 768px - 0.02px
 $md-width = 992px - 0.02px
 $lg-width = 1200px - 0.02px
+
+// -------------------------------------------
+// Layout
+// -------------------------------------------
+// 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 + $main-aside-gap

source/js/utils.js

@@ -184,7 +184,7 @@ Stun.utils = Stun.$u = {
   galleryWaterFall: function () {
     var colWidth = parseInt(CONFIG.waterfall_col_width);
     var colGap = parseInt(CONFIG.waterfall_gap.x);
-    
+
     $('.post-gallery').masonry({
       itemSelector: '.post-g-img',
       columnWidth: colWidth,