Make the home layout work properly on narrow screens
This commit is contained in:
parent
0e80d93994
commit
05c512de46
2 changed files with 12 additions and 3 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue