Fix content out of the container when open sidebar

fixes #278

9 files changed, 57 insertions, 16 deletions

diff --git a/src/scss/layouts/_bottom-bar.scss b/src/scss/layouts/_bottom-bar.scss
index b4d5119..3a67466 100755
--- a/src/scss/layouts/_bottom-bar.scss
+++ b/src/scss/layouts/_bottom-bar.scss
@@ -11,6 +11,11 @@
     z-index:            map-get($z-indexes, c-post-bottom-bar);
     transition:         transform .25s ease-in-out;
     -webkit-transition: -webkit-transform .25s ease-in-out;
+
+    min-width: $main-width - 15px * 2;
+    @media only screen and (max-width: $main-width - 15px * 2) {
+        min-width: calc(100% - 15px * 2);
+    }
 }
 
 @media #{$small-and-down} {
diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss
index 4760154..bfb3176 100755
--- a/src/scss/layouts/_header.scss
+++ b/src/scss/layouts/_header.scss
@@ -18,6 +18,11 @@
     -webkit-backface-visibility: hidden;
     -webkit-perspective:         1000;
 
+    min-width: $main-width;
+    @media only screen and (max-width: $main-width) {
+        min-width: 100%;
+    }
+
     #btn-open-sidebar {
         position: absolute;
         // vertical center
@@ -67,8 +72,9 @@
         }
     }
     // Class used to swipe to the top the header on small screen when the user scroll down
+    @include prefix(transition, 'margin-top 0.5s, margin-left 0.5s, width 0.5s', 'webkit' 'moz');
     &.header-up {
-        @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz');
+        margin-top: -#{map-get($header, height)};
     }
 
     // Push the header from the size of the large sidebar
diff --git a/src/scss/layouts/_main.scss b/src/scss/layouts/_main.scss
index 782ae58..3fb4486 100755
--- a/src/scss/layouts/_main.scss
+++ b/src/scss/layouts/_main.scss
@@ -5,6 +5,11 @@
     transition:         transform .25s ease-in-out;
     -webkit-transition: -webkit-transform .25s ease-in-out;
 
+    min-width: $main-width;
+    @media only screen and (max-width: $main-width) {
+        min-width: 100%;
+    }
+
     &.hasCover {
         // Set `padding-top` to `50px` when there is a cover image on page and
         // if there is a cover caption or
diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss
index 3c60521..5407ac4 100755
--- a/src/scss/utils/_variables.scss
+++ b/src/scss/utils/_variables.scss
@@ -219,6 +219,7 @@ $main-content: (
     'max-width':          750px,
     'padding-right-left': 20px,
 );
+$main-width: map-get($main-content, max-width) + map-get($main-content, padding-right-left) * 2;
 
 // Mardown
 // These variables are use to have headings smaller than general headings title
diff --git a/src/scss/utils/mixins/_bottom-bar.scss b/src/scss/utils/mixins/_bottom-bar.scss
index 32f7131..91c7cbb 100755
--- a/src/scss/utils/mixins/_bottom-bar.scss
+++ b/src/scss/utils/mixins/_bottom-bar.scss
@@ -27,20 +27,26 @@
 
 /// Mixin helper to pushed bottom bar from medium sidebar size
 @mixin bottom-bar-pushed-md {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to pushed bottom bar from large sidebar size
 @mixin bottom-bar-pushed-lg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 /// Mixin helper to pushed bottom bar from extra large sidebar size
 @mixin bottom-bar-pushed-xlg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }
\ No newline at end of file
diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss
index 028275c..b9aecce 100755
--- a/src/scss/utils/mixins/_header.scss
+++ b/src/scss/utils/mixins/_header.scss
@@ -1,19 +1,22 @@
 /// Mixin helper to push header from medium sidebar size
 @mixin header-pushed-md {
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to push header from large sidebar size
 @mixin header-pushed-lg {
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 /// Mixin helper to push header from extra large sidebar size
 @mixin header-pushed-xlg {
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }
\ No newline at end of file
diff --git a/src/scss/utils/mixins/_main.scss b/src/scss/utils/mixins/_main.scss
index a74364c..226da6f 100755
--- a/src/scss/utils/mixins/_main.scss
+++ b/src/scss/utils/mixins/_main.scss
@@ -28,21 +28,27 @@
 
 /// Mixin helper to push `main` div from medium sidebar size
 @mixin main-pushed-md {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to push `main` div from large sidebar size
 @mixin main-pushed-lg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 
 /// Mixin helper to push `main` div from extra large sidebar size
 @mixin main-pushed-xlg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }
diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss
index fd805f9..33d0d7d 100755
--- a/src/scss/utils/mixins/_post-header-cover.scss
+++ b/src/scss/utils/mixins/_post-header-cover.scss
@@ -27,21 +27,27 @@
 
 /// Mixin helper to pushed post header cover from medium sidebar size
 @mixin post-header-cover-pushed-md {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to pushed post header cover from large sidebar size
 @mixin post-header-cover-pushed-lg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 
 /// Mixin helper to pushed post header cover from extra large sidebar size
 @mixin post-header-cover-pushed-xlg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }
\ No newline at end of file
diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss
index d5ca2ec..e68fd7a 100755
--- a/src/scss/utils/mixins/_sidebar.scss
+++ b/src/scss/utils/mixins/_sidebar.scss
@@ -41,8 +41,9 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
     }
 }
 
@@ -103,8 +104,9 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
     }
 }
 
@@ -194,7 +196,8 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
     }
 }