Revamp sidebar translation

Use `transform: translate3d` as much as possible instead of `width` for better performance (really visibile on slow device like phone)

1 files changed, 18 insertions, 1 deletions

diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss
index b0a34bb..92a377d 100755
--- a/src/scss/components/_post.scss
+++ b/src/scss/components/_post.scss
@@ -3,6 +3,7 @@
     width:          100%;
     display:        inline-block;
     vertical-align: top;
+    @include sidebar-slide-animation;
 
     .post-header {
         .post-title {
@@ -69,6 +70,22 @@
     }
 }
 
+@media #{$large-only} {
+    .post {
+        &.pushed {
+            @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+        }
+    }
+}
+
+@media #{$xlarge-and-up} {
+    .post {
+        &.pushed {
+            @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+        }
+    }
+}
+
 // Increase font size of the post's title on large screen (only for single post view)
 @media #{$large-and-up} {
     .post {
@@ -85,4 +102,4 @@
     .post-content {
         font-size: 1.7rem;
     }
-}
\ No newline at end of file
+}