From b5c16f8937b77bd80307ba60c1ce3dff0bdf1cfc Mon Sep 17 00:00:00 2001
From: Vitaly Potyarkin <sio.wtf@gmail.com>
Date: Sat, 29 Sep 2018 11:02:52 +0300
Subject: [PATCH] Make menu animation the same for header and body (#38)

When menu sidebar was opened the main page body would slide to the left
while the header would stay in place. That would result in text alignment
inconsistency between header and the post body.

This commit adds the same sliding animation to the blog header.
Upstream theme for Ghost behaves similarly.

Screenshots: before [[1]], after [[2]]

[1]: https://i.imgur.com/dDaWoBW.png
[2]: https://i.imgur.com/SBhGsIW.png
---
 static/css/style.css | 42 +++++++++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index d794c54..8379c1e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -452,7 +452,7 @@ th {
         flex-direction: column;
         min-height: 100vh
     }
-    #wrapper {
+    #wrapper, #blog-header, #post-header {
         -ms-flex: 1;
         flex: 1
     }
@@ -844,6 +844,18 @@ img {
     padding: 6em 0
 }
 
+#post-header {
+    position: relative;
+    padding-top: 6em
+}
+
+#post-header.has-cover {
+    padding: 16em 0 2em;
+    background: #000;
+    overflow: hidden;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+}
+
 .blog-cover {
     position: absolute;
     width: 100%;
@@ -925,7 +937,7 @@ img {
     color: #fff
 }
 
-#wrapper {
+#wrapper, #blog-header, #post-header {
     position: relative;
     padding-right: 0;
     transition: all ease-out 0.25s
@@ -941,7 +953,9 @@ img {
     z-index: 350
 }
 
-.menu-active #wrapper {
+.menu-active #wrapper,
+.menu-active #blog-header,
+.menu-active #post-header {
     padding-right: 16em
 }
 
@@ -949,6 +963,10 @@ img {
     display: block
 }
 
+.menu-active #menu-button {
+    display: none;
+}
+
 .inner {
     max-width: 32em;
     margin: 0 auto;
@@ -1331,18 +1349,6 @@ img {
     background: #e5e4e1
 }
 
-#post-header {
-    position: relative;
-    padding-top: 6em
-}
-
-#post-header.has-cover {
-    padding: 16em 0 2em;
-    background: #000;
-    overflow: hidden;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
-}
-
 .post-cover {
     position: absolute;
     width: 100%;
@@ -1836,10 +1842,12 @@ img {
 .tag-weight-10 { font-size: 280%; }
 
 @media only screen and (max-width: 960px) {
-    #wrapper {
+    #wrapper, #blog-header, #post-header {
         transform: translate3d(0, 0, 0)
     }
-    .menu-active #wrapper {
+    .menu-active #wrapper,
+    .menu-active #blog-header,
+    .menu-active #post-header {
         padding-right: 0;
         transform: translate3d(-16em, 0, 0)
     }