ephase/attila_pelican_theme
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make menu animation the same for header and body (#38)

Browse source 
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
This commit is contained in:
Vitaly Potyarkin 2018-09-29 11:02:52 +03:00 • committed by Arul
parent 84e7843aaa
commit b5c16f8937
1 changed files with 25 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

42
static/css/style.css
View file

@ -452,7 +452,7 @@ th {
flex-direction: column; flex-direction: column;
min-height: 100vh min-height: 100vh
} }
#wrapper { #wrapper, #blog-header, #post-header {
-ms-flex: 1; -ms-flex: 1;
flex: 1 flex: 1
} }
@ -844,6 +844,18 @@ img {
padding: 6em 0 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 { .blog-cover {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -925,7 +937,7 @@ img {
color: #fff color: #fff
} }
#wrapper { #wrapper, #blog-header, #post-header {
position: relative; position: relative;
padding-right: 0; padding-right: 0;
transition: all ease-out 0.25s transition: all ease-out 0.25s
@ -941,7 +953,9 @@ img {
z-index: 350 z-index: 350
} }
.menu-active #wrapper { .menu-active #wrapper,
.menu-active #blog-header,
.menu-active #post-header {
padding-right: 16em padding-right: 16em
} }
@ -949,6 +963,10 @@ img {
display: block display: block
} }
.menu-active #menu-button {
display: none;
}
.inner { .inner {
max-width: 32em; max-width: 32em;
margin: 0 auto; margin: 0 auto;
@ -1331,18 +1349,6 @@ img {
background: #e5e4e1 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 { .post-cover {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1836,10 +1842,12 @@ img {
.tag-weight-10 { font-size: 280%; } .tag-weight-10 { font-size: 280%; }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
#wrapper { #wrapper, #blog-header, #post-header {
transform: translate3d(0, 0, 0) transform: translate3d(0, 0, 0)
} }
.menu-active #wrapper { .menu-active #wrapper,
.menu-active #blog-header,
.menu-active #post-header {
padding-right: 0; padding-right: 0;
transform: translate3d(-16em, 0, 0) transform: translate3d(-16em, 0, 0)
} }