From b02a186765e096ec5b98c73f05f332cd2eb185c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=91?= <1395348685z@gmail.com>
Date: Tue, 13 Apr 2021 15:31:35 +0800
Subject: [PATCH] Overlay body scrollbar in all browsers (#246)

* Apply viewport width to mixin `main-container`
---
 source/css/_common/scaffolding/base.styl | 4 ++++
 source/css/_mixins.styl                  | 9 +++++----
 source/css/_schemes/Pisces/_layout.styl  | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index 6c90faf..8f11379 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -14,6 +14,10 @@ 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;
 }
diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
index 229d5b5..3f9478f 100644
--- a/source/css/_mixins.styl
+++ b/source/css/_mixins.styl
@@ -108,15 +108,16 @@ font-family-icons($icon = '') {
 }
 
 main-container() {
-  margin: 0 auto;
-  width: $content-desktop;
+  --width: $content-desktop;
+  margin: 0 calc((100vw - var(--width)) / 2);
+  width: var(--width);
 
   +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 1d40564..54dc927 100644
--- a/source/css/_schemes/Pisces/_layout.styl
+++ b/source/css/_schemes/Pisces/_layout.styl
@@ -2,6 +2,7 @@
   background: var(--content-bg-color);
   border-radius: $border-radius-inner;
   box-shadow: $box-shadow-inner;
+  margin: 0 auto;
   width: $sidebar-desktop;
 
   +tablet-mobile() {