Revert #293

10 files changed, 22 insertions, 77 deletions

diff --git a/layouts/partials/script.html b/layouts/partials/script.html
index d403493..1437b59 100644
--- a/layouts/partials/script.html
+++ b/layouts/partials/script.html
@@ -17,20 +17,6 @@
     <script src="{{ . | absURL }}"></script>
   {{ end }}
 {{ end }}
-<script lang="javascript">
-window.onload = updateMinWidth;
-window.onresize = updateMinWidth;
-document.getElementById("sidebar").addEventListener("transitionend", updateMinWidth);
-function updateMinWidth() {
-  var sidebar = document.getElementById("sidebar");
-  var main = document.getElementById("main");
-  main.style.minWidth = "";
-  var w1 = getComputedStyle(main).getPropertyValue("min-width");
-  var w2 = getComputedStyle(sidebar).getPropertyValue("width");
-  var w3 = getComputedStyle(sidebar).getPropertyValue("left");
-  main.style.minWidth = `calc(${w1} - ${w2} - ${w3})`;
-}
-</script>
 {{ if eq .Site.Params.syntaxHighlighter "highlight.js" }}
 <script>
 $(document).ready(function() {
diff --git a/src/scss/layouts/_bottom-bar.scss b/src/scss/layouts/_bottom-bar.scss
index 3a67466..d765623 100755
--- a/src/scss/layouts/_bottom-bar.scss
+++ b/src/scss/layouts/_bottom-bar.scss
@@ -11,11 +11,6 @@
     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} {
@@ -121,4 +116,4 @@
             @include bottom-bar-pushed-md;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss
index bfb3176..6008759 100755
--- a/src/scss/layouts/_header.scss
+++ b/src/scss/layouts/_header.scss
@@ -18,11 +18,6 @@
     -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
@@ -72,9 +67,8 @@
         }
     }
     // 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 {
-        margin-top: -#{map-get($header, height)};
+        @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz');
     }
 
     // Push the header from the size of the large sidebar
@@ -122,4 +116,4 @@
     #header {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/layouts/_main.scss b/src/scss/layouts/_main.scss
index 3fb4486..e310cf3 100755
--- a/src/scss/layouts/_main.scss
+++ b/src/scss/layouts/_main.scss
@@ -5,11 +5,6 @@
     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
@@ -129,4 +124,4 @@
             @include main-pushed-md;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss
index 5407ac4..3c60521 100755
--- a/src/scss/utils/_variables.scss
+++ b/src/scss/utils/_variables.scss
@@ -219,7 +219,6 @@ $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 91c7cbb..4552f3b 100755
--- a/src/scss/utils/mixins/_bottom-bar.scss
+++ b/src/scss/utils/mixins/_bottom-bar.scss
@@ -27,26 +27,20 @@
 
 /// 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 {
-        margin-left: #{map-get($sidebar, md-screen-width)};
-        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
 /// 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 {
-        margin-left: #{map-get($sidebar, lg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 /// 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 {
-        margin-left: #{map-get($sidebar, xlg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss
index b9aecce..4b0cd2f 100755
--- a/src/scss/utils/mixins/_header.scss
+++ b/src/scss/utils/mixins/_header.scss
@@ -1,22 +1,19 @@
 /// Mixin helper to push header from medium sidebar size
 @mixin header-pushed-md {
     &.pushed {
-        margin-left: #{map-get($sidebar, md-screen-width)};
-        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
 /// Mixin helper to push header from large sidebar size
 @mixin header-pushed-lg {
     &.pushed {
-        margin-left: #{map-get($sidebar, lg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 /// Mixin helper to push header from extra large sidebar size
 @mixin header-pushed-xlg {
     &.pushed {
-        margin-left: #{map-get($sidebar, xlg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/utils/mixins/_main.scss b/src/scss/utils/mixins/_main.scss
index 226da6f..a74364c 100755
--- a/src/scss/utils/mixins/_main.scss
+++ b/src/scss/utils/mixins/_main.scss
@@ -28,27 +28,21 @@
 
 /// 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 {
-        margin-left: #{map-get($sidebar, md-screen-width)};
-        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
 /// 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 {
-        margin-left: #{map-get($sidebar, lg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
 /// 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 {
-        margin-left: #{map-get($sidebar, xlg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss
index 33d0d7d..b2af42d 100755
--- a/src/scss/utils/mixins/_post-header-cover.scss
+++ b/src/scss/utils/mixins/_post-header-cover.scss
@@ -27,27 +27,21 @@
 
 /// 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 {
-        margin-left: #{map-get($sidebar, md-screen-width)};
-        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
 /// 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 {
-        margin-left: #{map-get($sidebar, lg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
 /// 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 {
-        margin-left: #{map-get($sidebar, xlg-screen-width)};
-        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss
index ef6e5cb..d5ca2ec 100755
--- a/src/scss/utils/mixins/_sidebar.scss
+++ b/src/scss/utils/mixins/_sidebar.scss
@@ -41,9 +41,8 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
-    @include prefix(transition, 'margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        margin-left: #{map-get($sidebar, md-screen-width)};
+        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
@@ -104,9 +103,8 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
-    @include prefix(transition, 'margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        margin-left: #{map-get($sidebar, lg-screen-width)};
+        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }
 
@@ -196,8 +194,7 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
-    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
 }