feat: Set more configuration items for the layout

liuyib · Feb 1, 2020 · 3a9ad3f · 3a9ad3f
1 parent 18b74c5
commit 3a9ad3f
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 91 deletions.
diff --git a/_config.yml b/_config.yml
@@ -110,8 +110,15 @@ layout:
   sidebar: 300px
   # The width between the content and the sidebar.
   content_sidebar_gap: 30px
-  # The width between the main of website and the sides of page.
-  main_side_gap: 20px
+  # The padding property of the main tag.
+  # You can set it the same way you set the padding property of CSS.
+  main_padding:
+    # Screen width in: [768px, Infinity)
+    default: 20px
+    # Screen width in: [576px, 768px)
+    tablet: 15px
+    # Screen width in: [0px, 576px)
+    mobile: 10px
 
 header:
   enable: true

diff --git a/source/css/_common/components/header/index.styl b/source/css/_common/components/header/index.styl
@@ -61,7 +61,10 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
     &-inner {
       position: relative;
       margin: 0 auto;
-      width: 'calc(100% - %s)' % ($main-side-gap * 2);
+      padding: convert(hexo-config('layout.main_padding.default') || '20px');
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      width: 100%;
       height: 100%;
 
       i {

diff --git a/source/css/_common/outline/macro.styl b/source/css/_common/outline/macro.styl
@@ -56,14 +56,14 @@ if (hexo-config('body.bg_image.enable')) {
 }
 
 .main {
-  margin: 1.5rem auto;
   width: 100%;
   flex: 1 0 auto;
 }
 
 .main-inner {
   margin: 0 auto;
-  width: 'calc(100% - %s)' % ($main-side-gap * 2);
+  padding: convert(hexo-config('layout.main_padding.default') || '20px');
+  width: 100%;
   font-size: $font-size-main;
 }
 

diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl
@@ -1,6 +1,6 @@
 // $main-width: A calc value.
 // -----------------------------------------
-@media (min-width: $main-width + $main-side-gap * 2) {
+@media (min-width: $main-width) {
   if (hexo-config('sidebar.enable')) {
     .header-nav-inner {
       width: $main-width;
@@ -21,23 +21,72 @@
     }
   }
 
-  .header-nav-menu {
-    display: inline-block !important;
-    opacity: 1 !important;
-  }
+  .header {
+    &-nav {
+      &-menu {
+        display: inline-block !important;
+        opacity: 1 !important;
+      }
 
-  .header-nav-submenu {
-    border-radius: 3px;
+      &-submenu {
+        border-radius: 3px;
+      }
+    }
   }
 }
 
+// $md-width: 992px - 0.02px
+// -----------------------------------------
 @media (max-width: $md-width) {
-  .header-inner {
-    height: 340px;
-  }
+  .header {
+    &-inner {
+      height: 17rem;
+    }
 
-  .main {
-    margin: 1rem 0;
+    &-nav {
+      &-btn {
+        display: block;
+        float: left;
+      }
+
+      &-menu {
+        overflow: hidden;
+        position: absolute;
+        top: header-nav-height;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        background-color: $header-nav-bg-color;
+
+        &-item {
+          float: none;
+          overflow: hidden;
+          margin: 0;
+
+          &__a {
+            padding-right: 1.5rem;
+            padding-left: 1.5rem;
+            text-align: left;
+            color: #f4f5f5;
+          }
+        }
+      }
+
+      &-submenu {
+        display: block;
+        position: initial;
+        width: 100%;
+
+        &-item {
+          &__a {
+            padding-right: 1rem;
+            padding-left: 3rem;
+            text-align: left;
+          }
+        }
+      }
+    }
   }
 
   .content-wrap {
@@ -54,96 +103,87 @@
     margin: 0 0 1rem;
     padding: 1rem;
   }
+}
 
-  .header-nav-btn {
-    display: block;
-    float: left;
-  }
-
-  .header-nav-menu {
-    overflow: hidden;
-    position: absolute;
-    top: header-nav-height;
-    right: 0;
-    left: 0;
-    width: auto;
-    height: auto;
-    background-color: $header-nav-bg-color;
-
-    &-item {
-      float: none;
-      overflow: hidden;
-      margin: 0;
-
-      &__a {
-        padding-right: 1.5rem;
-        padding-left: 1.5rem;
-        text-align: left;
-        color: #f4f5f5;
+// sm-width: 768px - 0.02px
+// -----------------------------------------
+@media (max-width: $sm-width) {
+  .header {
+    &-nav {
+      &-inner {
+        padding: convert(hexo-config('layout.main_padding.tablet') || '15px');
       }
     }
-  }
 
-  .header-nav-submenu {
-    display: block;
-    position: initial;
-    width: 100%;
+    &-info {
+      &-title {
+        font-size: 3rem;
+      }
 
-    &-item {
-      &__a {
-        padding-right: 1rem;
-        padding-left: 3rem;
-        text-align: left;
+      &-subtitle {
+        font-size: .9rem;
       }
     }
   }
-}
 
-// sm-width: 768px - 0.02px
-// -----------------------------------------
-@media (max-width: $sm-width) {
-  .header-info-title {
-    font-size: 3rem;
-  }
-
-  .header-info-subtitle {
-    font-size: .9rem;
+  .main-inner {
+    padding: convert(hexo-config('layout.main_padding.tablet') || '15px');
   }
 
   if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
-    .search-popup {
-      top: 0;
-      left: 0;
-      margin: 0;
-      border-radius: 0;
-      width: 100%;
-      height: 100vh;
-      max-height: 100vh;
-    }
+    .search {
+      &-popup {
+        top: 0;
+        left: 0;
+        margin: 0;
+        border-radius: 0;
+        width: 100%;
+        height: 100vh;
+        max-height: 100vh;
+      }
 
-    .search-results {
-      max-height: 'calc(100vh - %s)' % search-results-height;
+      &-results {
+        max-height: 'calc(100vh - %s)' % search-results-height;
+      }
     }
   }
 }
 
 // xs-width: 576px - 0.02px
 // -----------------------------------------
 @media (max-width: $xs-width) {
-  .header-inner {
-    height: 260px;
-  }
+  .header {
+    &-inner {
+      height: 13rem;
+    }
 
-  .header-info-title {
-    font-size: 1.8rem;
-  }
+    &-nav {
+      &-inner {
+        padding: convert(hexo-config('layout.main_padding.mobile') || '10px');
+      }
+
+      if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
+        &-search {
+          span {
+            display: none;
+          }
+        }
+      }
+    }
 
-  .header-info-subtitle {
-    font-size: $font-size-base;
+    &-info {
+      &-title {
+        font-size: 2rem;
+      }
+
+      &-subtitle {
+        font-size: $font-size-base;
+      }
+    }
   }
 
   .main-inner {
-    width: 100%;
+    padding: convert(hexo-config('layout.main_padding.mobile') || '10px');
   }
 
   .content,
@@ -166,14 +206,6 @@
     }
   }
 
-  if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
-    .header-nav-search {
-      span {
-        display: none;
-      }
-    }
-  }
-
   .post-list .post {
     margin: 0 0 .8rem;
     padding: .8rem;

diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl
@@ -32,7 +32,6 @@ $lg-width = 1200px - 0.02px
 $content-width          = convert(hexo-config('layout.content') || '$sm-width')
 $sidebar-width          = convert(hexo-config('layout.sidebar') || '300px')
 $content-sidebar-gap    = convert(hexo-config('layout.content_sidebar_gap') || '30px')
-$main-side-gap          = convert(hexo-config('layout.main_side_gap') || '20px')
 if (hexo-config('sidebar.enable')) {
   $main-width           = $content-width + $sidebar-width + $content-sidebar-gap
 } else {