diff --git a/_config.yml b/_config.yml index cf87e8b..19f710e 100644 --- a/_config.yml +++ b/_config.yml @@ -352,6 +352,13 @@ mobile_layout_economy: false # Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep). android_chrome_color: "#222" +# Override browsers' default behavior. +body_scrollbar: + # Place the scrollbar over the content. + overlay: false + # Present the scrollbar even if the content is not overflowing. + stable: false + codeblock: # Code Highlight theme # All available themes: https://theme-next.js.org/highlight/ diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl index 8f11379..17e5d5c 100644 --- a/source/css/_common/scaffolding/base.styl +++ b/source/css/_common/scaffolding/base.styl @@ -14,12 +14,20 @@ body { font-size: $font-size-base; line-height: $line-height-base; min-height: 100%; - overflow-x: hidden; - @supports (overflow-x: clip) { - overflow-x: clip; - } position: relative; transition: padding $transition-ease; + + if (hexo-config('body_scrollbar.overlay')) { + overflow-x: hidden; + @supports (overflow-x: clip) { + overflow-x: clip; + } + width: 100vw; + } + + if (hexo-config('body_scrollbar.stable')) { + overflow-y: scroll; + } } h1, h2, h3, h4, h5, h6 { diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index 3f9478f..229d5b5 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -108,16 +108,15 @@ font-family-icons($icon = '') { } main-container() { - --width: $content-desktop; - margin: 0 calc((100vw - var(--width)) / 2); - width: var(--width); + margin: 0 auto; + width: $content-desktop; +desktop-large() { - --width: $content-desktop-large; + width: $content-desktop-large; } +desktop-largest() { - --width: $content-desktop-largest; + width: $content-desktop-largest; } } diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index 54dc927..1d40564 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -2,7 +2,6 @@ background: var(--content-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; - margin: 0 auto; width: $sidebar-desktop; +tablet-mobile() {