diff --git a/assets/themes/default/_article.scss b/assets/themes/default/_article.scss index f44e7faf..767d80a6 100644 --- a/assets/themes/default/_article.scss +++ b/assets/themes/default/_article.scss @@ -490,3 +490,30 @@ input:checked ~ .cw-container > .cw-text { 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%; + } +} diff --git a/assets/themes/default/_global.scss b/assets/themes/default/_global.scss index 99e3dc2b..a33739d1 100644 --- a/assets/themes/default/_global.scss +++ b/assets/themes/default/_global.scss @@ -490,6 +490,10 @@ figure { /// Small screens @media screen and (max-width: 600px) { + body > main > *, .h-feed > * { + margin: 1em; + } + main .article-meta { > *, .comments { margin: 0 5%; @@ -535,7 +539,7 @@ figure { margin: 0; & > * { - max-width: 100%; + max-width: 100% !important; } } diff --git a/assets/themes/default/_header.scss b/assets/themes/default/_header.scss index 78d5b405..9f28b90b 100644 --- a/assets/themes/default/_header.scss +++ b/assets/themes/default/_header.scss @@ -222,3 +222,93 @@ body > header { } } } + +// Small screens +@media screen and (max-width: 600px) { + @keyframes menuOpening { + from { + transform: scaleX(0); + transform-origin: left; + opacity: 0; + } + to { + transform: scaleX(1); + transform-origin: left; + opacity: 1; + } + } + + body > header { + flex-direction: column; + + nav#menu { + display: inline-flex; + z-index: 21; + } + + #content { + display: none; + appearance: none; + text-align: center; + z-index: 20; + } + } + + body > header:focus-within #content, #content.show { + position: fixed; + display: flex; + flex-direction: column; + justify-content: flex-start; + + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + + animation: 0.2s menuOpening; + + &::before { + content: ""; + position: absolute; + transform: skewX(-10deg); + top: 0; + left: -20%; + width: 100%; + height: 100%; + + z-index: -10; + + background: $primary; + } + + > nav { + flex-direction: column; + align-items: flex-start; + + a { + display: flex; + flex-direction: row; + align-items: center; + margin: 0; + padding: 1rem 1.5rem; + color: $background; + font-size: 1.4em; + font-weight: 300; + + &.title { font-size: 1.8em; } + + > *:first-child { width: 3rem; } + > img:first-child { height: 3rem; } + > *:last-child { margin-left: 1rem; } + > nav hr { + display: block; + margin: 0; + width: 100%; + border: solid $background 0.1rem; + } + .mobile-label { display: initial; } + } + } + } +}