Move header-related style to _header.scss

It seems to fix the overflowing menu items on small screens too

assets/themes/default/_header.scss

@@ -221,3 +221,92 @@ body > header {
     }
  	}
 }
+
+@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; }
+      }
+    }
+  }
+}