diff --git a/_config.yml b/_config.yml index 1939f0d4bc..4bdcd03e27 100644 --- 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 index 7337e18235..648c8933d4 100644 --- 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 index bd51319561..5e38e1a323 100644 --- 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 index 68e08ace92..11c77702b1 100644 --- 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 index a3a2b5223d..ea55b358ba 100644 --- 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 index 04e14ef756..095aad3a8a 100644 --- 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 index 6b3f60742f..3c2283dc17 100644 --- 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 index b532a0aad5..51208e50c5 100644 --- 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 index 037aae91d5..42509b3272 100644 --- 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;