refactor: Optimize responsive layout

refactor: Update

refactor: Optimize responsive layout
refactor: Update
04030666 · EvanOne(文一) · 94e4d34a · 04030666 · 04030666 · 04030666
8 changed file
--- a/README.md
+++ b/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+ |

 ## 开源协议

--- a/README_en_US.md
+++ b/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

--- a/source/css/_common/header.styl
+++ b/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

--- a/source/css/_common/main.styl
+++ b/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


--- a/source/css/_common/responsive.styl
+++ b/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


--- a/source/css/_components/recent-posts.styl
+++ b/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%

--- a/source/css/var.styl
+++ b/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
--- a/source/js/utils.js
+++ b/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,