Custom sidebar width & content width for all schemes.

_config.yml

@@ -223,6 +223,12 @@ sidebar:
   position: left
   #position: right
 
+  # 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
@@ -361,15 +367,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

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; }
+  }
 }

source/css/_mixins/base.styl

@@ -53,6 +53,12 @@ desktop() {
 }
 
 desktop-large() {
+  @media (min-width: 1200px) {
+    {block}
+  }
+}
+
+desktop-largest() {
   @media (min-width: 1600px) {
     {block}
   }

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.
 // =================================================

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; }

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.
 // --------------------------------------------------

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
 

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

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;