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

@@ -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)
     }