Merge pull request 'mobile-margins' (#817) from mobile-margins into main

Reviewed-on: https://git.joinplu.me/Plume/Plume/pulls/817
Reviewed-by: Mina Galić <me+git@igalic.co>

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%;
+  }
+}

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;
     }
   }
 

assets/themes/default/_header.scss

@@ -221,3 +221,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; }
+      }
+    }
+  }
+}