Custom sidebar width & content width for all schemes. (theme-next#339)

* Custom sidebar width & content width for all schemes. 1. [BR]: Removed `max_content_width` setting (which was only for Gemini scheme). 2. [BR]: renamed `sidebar_width` to `sidebar.width` option (moved from global to section to section under `sidebar`). 3. Added `desktop-largest()` condition and setted to >1600px. Old `desktop-large()` now redefined to >1200px. Added new `$content-desktop-largest` variable. 4. Replaced `$main-desktop` & `$main-desktop-large` variables with standard `$content-desktop` & `$content-desktop-large` for Pisces/Gemini schemes. 5. Moved `$sidebar-desktop` variable from global `base.styl` variables file to `Pisces.styl` (because it's only for Pisces/Gemini). 6. Moved layout global styles variables from `Gemini.styl` to `Pisces.styl`.
Jona-lee · Oct 10, 2018 · 0116f8f · 0116f8f
1 parent 1c0d65d
commit 0116f8f
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 39 deletions.
diff --git a/_config.yml b/_config.yml
@@ -224,6 +224,12 @@ sidebar:
   # position: left
   position: left
 
+  # Manual define the sidebar width.
+  # If commented, will be default for:
+  # Muse | Mist: 320
+  # Pisces | Gemini: 240
+  #width: 300
+
   # Sidebar Display, available value (only for Muse | Mist):
   #  - post    expand on posts automatically. Default.
   #  - always  expand for all pages automatically
@@ -366,15 +372,6 @@ highlight_theme: normal
 # Enable "cheers" for archive page.
 cheers_enabled: true
 
-# Manual define the max content width
-# !!Only available for Gemini Scheme currently
-# Leave it empty for the default 75% (suggest not less than 1000px)
-#max_content_width: 1000px
-
-# Manual define the sidebar width
-# !!Only available for Gemini Scheme currently
-# Leave it empty for the default 240
-sidebar_width:
 
 # ---------------------------------------------------------------
 # Font Settings

diff --git a/source/css/_common/outline/outline.styl b/source/css/_common/outline/outline.styl
@@ -23,6 +23,9 @@ html, body { height: 100%; }
   +desktop-large() {
     .container & { width: $content-desktop-large; }
   }
+  +desktop-largest() {
+    .container & { width: $content-desktop-largest; }
+  }
 }
 
 // Main Section
@@ -35,6 +38,9 @@ html, body { height: 100%; }
   +desktop-large() {
     .container & { width: $content-desktop-large; }
   }
+  +desktop-largest() {
+    .container & { width: $content-desktop-largest; }
+  }
 }
 
 
@@ -55,4 +61,7 @@ html, body { height: 100%; }
   +desktop-large() {
     .container & { width: $content-desktop-large; }
   }
+  +desktop-largest() {
+    .container & { width: $content-desktop-largest; }
+  }
 }
diff --git a/source/css/_mixins/base.styl b/source/css/_mixins/base.styl
@@ -53,6 +53,12 @@ desktop() {
 }
 
 desktop-large() {
+  @media (min-width: 1200px) {
+    {block}
+  }
+}
+
+desktop-largest() {
   @media (min-width: 1600px) {
     {block}
   }

diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl
@@ -23,17 +23,6 @@
 hexo-config('sidebar.offset') is a 'unit' ? (sboffset = unit(hexo-config('sidebar.offset'), px)) : (sboffset = 0)
 use_seo = hexo-config('seo');
 
-// Maximum content width.
-// =================================================
-$max-content-width = hexo-config('max_content_width')
-if $max-content-width {
-  .header,
-  .container .main-inner,
-  .footer-inner {
-    max-width: unquote($max-content-width);
-  }
-}
-
 // =================================================
 // Desktop layout styles.
 // =================================================

diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
@@ -1,8 +1,14 @@
 .header {
   position: relative;
   margin: 0 auto;
-  width: $main-desktop;
+  width: $content-desktop;
 
+  +desktop-large() {
+    width: $content-desktop-large;
+  }
+  +desktop-largest() {
+    width: $content-desktop-largest;
+  }
   +tablet() {
     width: auto;
   }
@@ -47,7 +53,6 @@
 }
 
 .container .main-inner {
-  width: $main-desktop;
 
   +tablet() {
     width: auto;
@@ -61,7 +66,7 @@
   float: right;
   box-sizing: border-box;
   padding: $content-desktop-padding;
-  width: $content-desktop;
+  width: $content-wrap;
   background: white;
   min-height: 700px;
   box-shadow: $box-shadow-inner;
@@ -98,9 +103,7 @@
 
 .sidebar-toggle { display: none; }
 
-
 .footer-inner {
-  width: $main-desktop;
   padding-left: 260px;
 
   +tablet() {
@@ -115,8 +118,6 @@
   }
 }
 
-
-
 .sidebar-position-right {
   .header-inner { right: 0; }
   .content-wrap { float: left; }

diff --git a/source/css/_variables/Gemini.styl b/source/css/_variables/Gemini.styl
@@ -6,10 +6,6 @@
 // Settings for some of the most global styles.
 // --------------------------------------------------
 $body-bg-color                    = #eee
-$main-desktop                     = 75%
-$sidebar-width                    = hexo-config('sidebar_width') is a 'unit' ? hexo-config('sidebar_width') : 240
-$sidebar-desktop                  = unit($sidebar-width, 'px')
-$content-desktop                  = 'calc(100% - %s)' % unit($sidebar-width + 12, 'px')
 
 // Borders.
 // --------------------------------------------------

diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl
@@ -5,6 +5,15 @@
 // --------------------------------------------------
 $body-bg-color                = #f5f7f9
 
+$sidebar-offset               = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit'
+$sidebar-width                = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240
+$sidebar-desktop              = unit($sidebar-width, 'px')
+$content-wrap                 = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px')
+
+$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px')
+$content-desktop-large        = 1160px
+$content-desktop-largest      = 73%
+
 
 // Borders
 // --------------------------------------------------
@@ -21,8 +30,6 @@ $subtitle-color                   = $gray-lighter
 
 // Sidebar
 // --------------------------------------------------
-$sidebar-offset             = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit'
-
 $sidebar-nav-hover-color          = $orange
 $sidebar-highlight                = $orange
 

diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
@@ -191,18 +191,15 @@ $pagination-active-border       = $grey-light
 // Layout sizes
 // --------------------------------------------------
 
-$main-desktop                   = 960px
-$main-desktop-large             = 1200px
 
 $content-desktop                = 700px
-$content-desktop-large          = 900px
+$content-desktop-large          = 800px
+$content-desktop-largest        = 900px
 
 $content-desktop-padding        = 40px
 $content-tablet-padding         = 10px
 $content-mobile-padding         = 8px
 
-$sidebar-desktop                = 240px
-
 $footer-height                  = 50px
 
 $gap-between-main-and-footer    = 100px

diff --git a/source/js/src/motion.js b/source/js/src/motion.js
@@ -77,7 +77,7 @@ $(document).ready(function() {
   sidebarToggleLines.push(sidebarToggleLine2nd);
   sidebarToggleLines.push(sidebarToggleLine3rd);
 
-  var SIDEBAR_WIDTH = '320px';
+  var SIDEBAR_WIDTH = CONFIG.sidebar.width ? CONFIG.sidebar.width : '320px';
   var SIDEBAR_DISPLAY_DURATION = 200;
   var xPos, yPos;