New body scrollbar style option (#248)

* Revert "Overlay body scrollbar in all browsers (#246)"

This reverts commit b02a186765e096ec5b98c73f05f332cd2eb185c2.

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

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 {

source/css/_mixins.styl

@@ -108,16 +108,15 @@ font-family-icons($icon = '') {
 }
 
 main-container() {
-  --width: $content-desktop;
+  margin: 0 auto;
-  margin: 0 calc((100vw - var(--width)) / 2);
+  width: $content-desktop;
-  width: var(--width);
 
   +desktop-large() {
-    --width: $content-desktop-large;
+    width: $content-desktop-large;
   }
 
   +desktop-largest() {
-    --width: $content-desktop-largest;
+    width: $content-desktop-largest;
   }
 }
 

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() {