Overlay body scrollbar in all browsers (#246)

* Apply viewport width to mixin `main-container`
next-theme · Apr 13, 2021 · b02a186 · b02a186
1 parent 4f9e3cf
commit b02a186
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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() {