Make the home layout work properly on narrow screens

This commit is contained in:
Danielle McLean 2017-10-09 20:06:19 +11:00
parent 0e80d93994
commit 05c512de46
Signed by: 00dani
GPG key ID: 5A5D2D1AFF12EEC5
2 changed files with 12 additions and 3 deletions

View file

@ -16,6 +16,7 @@ body
padding-bottom: 1em padding-bottom: 1em
display: flex display: flex
justify-content: space-evenly justify-content: space-evenly
margin: auto 1em
#navbar #navbar
justify-content: space-between justify-content: space-between
.breadcrumb .breadcrumb

View file

@ -1,11 +1,19 @@
body > main body > main
display: flex display: flex
flex-direction: row-reverse flex-direction: column
align-items: center
> ol.h-feed > ol.h-feed
flex: 1 flex: 1
margin-right: 2em;
> .author > .author
max-width: 30% max-width: 25rem
margin-bottom: 2em
> .h-card > .h-card
position: sticky position: sticky
top: 1em top: 1em
@media (min-width: 768px)
body > main
flex-direction: row-reverse
align-items: flex-start
> ol.h-feed
margin-right: 2em