Move stylesheets for header from _global.sccss to _header.scss (#749)

Plume-org · Apr 14, 2020 · c217e5e · c217e5e
1 parent 8ba0c17
commit c217e5e
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 87 deletions.
diff --git a/assets/themes/default/_global.scss b/assets/themes/default/_global.scss
@@ -490,93 +490,6 @@ figure {
 
 /// 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; }
-      }
-    }
-  }
-
   main .article-meta {
     > *, .comments {
       margin: 0 5%;

diff --git a/assets/themes/default/_header.scss b/assets/themes/default/_header.scss
@@ -101,6 +101,96 @@ 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; }
+      }
+    }
+  }
+}
+
 /* Only enable label animations on large screens */
 @media screen and (min-width: 600px) {
  	header nav a {