Improve responsiveness

This commit is contained in:
Ana Gelez 2019-09-01 18:53:15 +02:00
parent 191d6da486
commit 0bec13edc0
3 changed files with 33 additions and 1 deletions

View File

@ -490,3 +490,30 @@ input:checked ~ .cw-container > .cw-text {
display: inline; display: inline;
} }
} }
// Small screens
@media screen and (max-width: 600px) {
#plume-editor header {
flex-direction: column-reverse;
button {
flex: 0 0 0;
}
}
.popup {
top: 10vh;
bottom: 10vh;
left: 1vw;
right: 1vw;
}
main article {
margin: 2.5em .5em;
max-width: none;
}
main .article-meta > *, main .article-meta .comments, main .article-meta > .banner > * {
margin: 0 5%;
}
}

View File

@ -490,6 +490,10 @@ figure {
/// Small screens /// Small screens
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
body > main > *, .h-feed > * {
margin: 1em;
}
main .article-meta { main .article-meta {
> *, .comments { > *, .comments {
margin: 0 5%; margin: 0 5%;
@ -535,7 +539,7 @@ figure {
margin: 0; margin: 0;
& > * { & > * {
max-width: 100%; max-width: 100% !important;
} }
} }

View File

@ -222,6 +222,7 @@ body > header {
} }
} }
// Small screens
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@keyframes menuOpening { @keyframes menuOpening {
from { from {