refactor: Change modules font size & layout width

source/css/_layout/footer.styl

 #footer
-  font-size: 1rem
+  font-size: $font-footer-base is defined ? $font-footer-base : 1rem
   background-color: $footer-bg-color
   background-image: url($footer-bg-img)
   background-attachment: fixed
@@ -30,7 +30,6 @@
 
     p
       margin: 5px 0
-      font-size: $font-size-large
       line-height: 1.5em
 
   .footer-separator

source/css/_layout/header.styl

@@ -4,7 +4,7 @@
   margin: 0 0 3rem
   width: 100%
   height: $header-height
-  font-size: 1rem
+  font-size: $font-header-base is defined ? $font-header-base : 1rem
   background-image: url($header-bg-img)
   background-repeat: no-repeat
   background-attachment: fixed

source/css/_layout/main.styl

@@ -18,6 +18,7 @@ headingLeft(fontsize)
 .content
   float: left
   width: $main-desktop
+  font-size: $font-main-base
 
   .post-header,
   .post-excerpt,
@@ -65,6 +66,7 @@ headingLeft(fontsize)
 .sidebar
   float: right
   width: $main-side-desktop
+  font-size: $font-sidebar-base is defined ? $font-sidebar-base : $font-size-large
 
   .sidebar-inner
     border-radius: 5px
@@ -76,11 +78,6 @@ headingLeft(fontsize)
       position: fixed
       top: 30px
 
-  // .site-panel
-  // transition: opacity .5s
-  .show
-    display: block
-
   .hide
     display: none
 
@@ -120,7 +117,6 @@ headingLeft(fontsize)
 
       &-description
         margin-bottom: 0
-        font-size: 1.2em
         font-weight: $font-weight-bold
         text-align: center
 
@@ -175,7 +171,6 @@ headingLeft(fontsize)
       display: flex
       margin-top: .5rem
       padding-bottom: .5rem
-      font-size: 1.2em
       text-align: center
       justify-content: center
 

source/css/_layout/page.styl

@@ -19,6 +19,7 @@ setUlStyle(content, hoverColor)
   border-radius: 5px
   padding: 2rem
   width: $main-desktop
+  font-size: $font-main-base is defined ? $font-main-base : $font-size-large
   background-color: $white
 
   h1,
@@ -184,31 +185,32 @@ setUlStyle(content, hoverColor)
   &::before
     content: ''
     position: absolute
-    top: .2rem
-    left: -.1rem
+    top: $font-main-base is defined ? ($font-main-base) : 1rem
+    bottom: $font-main-base is defined ? ($font-main-base) : 1rem
+    left: 0
     border-left: .2rem solid $archives-left-line-color
-    height: calc(100% - 1rem)
+    transform: translate(-50%, 0)
 
 .article-sort-title
   position: relative
   margin-bottom: 1.3rem
   padding-left: 1.4rem
-  font-size: 1.2rem
-  line-height: 1
+  font-size: $font-main-base is defined ? ($font-main-base * 1.4) : 1.2rem
 
   &::before
     content: ''
     position: absolute
-    top: .1rem
-    left: -.6rem
+    top: 50%
+    left: 0
     z-index: $z-index-2
     border: .25rem solid $archives-left-dot-color
     border-radius: 50%
-    width: 1.2rem
-    height: 1.2rem
+    width: 1rem
+    height: 1rem
     line-height: 1.2rem
     background-color: $white
     transition: all .2s ease
+    transform: translate(-50%, -50%)
 
 .article-sort-item
   position: relative
@@ -230,29 +232,31 @@ setUlStyle(content, hoverColor)
   &::before
     content: ''
     position: absolute
-    top: calc(50% - .4rem)
-    left: -.4rem
+    top: 50%
+    left: 0
     z-index: $z-index-2
-    border: .2rem solid $archives-left-dot-color
+    border: .15rem solid $archives-left-dot-color
     border-radius: 50%
-    width: .8rem
-    height: .8rem
+    width: .6rem
+    height: .6rem
     background-color: $white
     transition: all .2s ease
+    transform: translate(-50%, -50%)
 
   &.year
     display: block
     position: relative
-    font-size: 1rem
+    font-size: $font-main-base is defined ? ($font-main-base * 1.2) : 1.2rem
     font-weight: $font-weight-bolder
 
   &__time
     margin-right: 1rem
+    font-size: $font-main-base is defined ? ($font-main-base * .9) : .8rem
     color: $archives-right-time-color
 
   &__title > a
     border-bottom: 0
-    font-size: .9rem
+    font-size: $font-main-base is defined ? ($font-main-base * 1.2) : 1rem
     text-decoration: none
     color: $font-color
     cursor: pointer
@@ -269,7 +273,7 @@ setUlStyle(content, hoverColor)
 
   &-title
     padding: 0 0 1.8rem
-    font-size: 1.8rem
+    font-size: $font-main-base is defined ? ($font-main-base * 2) : 1.5rem
     text-align: center
     cursor: default
 
@@ -277,11 +281,11 @@ setUlStyle(content, hoverColor)
   text-align: center
 
   a
-   &:hover
-    color: $tags-hover-color !important
+    &:hover
+      color: $tags-hover-color !important
 
 .category
-  font-size: 1.2em
+  font-size: $font-main-base is defined ? ($font-main-base * 1.2) : 1.2em
 
   a
     color: $categories-link-color
@@ -292,14 +296,14 @@ setUlStyle(content, hoverColor)
   .category-list-item
     &::before
       color: $categories-list-dot-color
-    
+
     &:hover
       &::before
         color: $categories-list-dot-hover-color
 
   .category-list-count
     padding-left: .3em
-    font-size: .8em
+    font-size: $font-main-base is defined ? ($font-main-base * .8) : .8em
     color: $categories-post-count-color
 
     &::before

source/css/_layout/post.styl

@@ -5,7 +5,7 @@
   .post-title
     margin: 0
     padding-left: 0
-    font-size: 2rem
+    font-size: $font-post-title is defined ? $font-post-title : 2rem
     color: $post-info-title-color
     cursor: default
 

source/css/var.styl

@@ -182,18 +182,25 @@ $icon-right-arrow        = '\e816'
 // Font, line-height
 // -------------------------------------------
 // Line height
-$line-height-base       = 2    // 基础行高
-$line-height-h          = 1.5
-$line-height-code-block = 1.7  // 不能小于 1.3
+$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
-$font-size-base         = 14px // 基础字体大小
+$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       = 20px
+$font-main-base         = 16px
+$font-post-title        = 40px // article title
+$font-sidebar-base      = 16px
+
 // 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
@@ -217,8 +224,7 @@ $z-index-5 = 1004
 // -------------------------------------------
 // Layout
 // -------------------------------------------
-
 // Width
-$content-desktop   = 1110px
-$main-desktop      = 772px
+$content-desktop   = 1340px
+$main-desktop      = 992px
 $main-side-desktop = 315px