fix(header): fix mobile header height

pogor-dev · Feb 14, 2020 · 730ce7a · 730ce7a
1 parent f813ede
commit 730ce7a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -1,5 +1,6 @@
 html {
   font-family: $global-font-family;
+  font-size: 16px;
 }
 
 /* scrollbar, only support webkit */
@@ -25,7 +26,6 @@ html {
 }
 
 body {
-  font-size: 16px;
   font-weight: 400;
   line-height: 1.5rem;
   background-color: $global-background-color;

diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
@@ -52,8 +52,8 @@ header.mobile {
   .header-wrapper {
     padding: 0;
     margin: 0;
-    height: 4.5rem;
-    line-height: 4.5rem;
+    height: 4rem;
+    line-height: 4rem;
     background: $global-background-color;
 
     .header-container {
@@ -72,12 +72,12 @@ header.mobile {
 
       .menu-toggle {
         cursor: pointer;
-        line-height: 4.5rem;
+        line-height: 4rem;
 
         span {
           display: block;
-          background: #000;
-          width: 24px;
+          background: $global-font-color;
+          width: 1.5rem;
           height: 2px;
           -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
@@ -92,11 +92,11 @@ header.mobile {
         }
 
         span:nth-child(1) {
-          margin-bottom: 8px;
+          margin-bottom: .5rem;
         }
 
         span:nth-child(3) {
-          margin-top: 8px;
+          margin-top: .5rem;
         }
 
         &.active {
@@ -107,21 +107,21 @@ header.mobile {
           }
 
           span:nth-child(1) {
-            -moz-transform: rotate(45deg) translate(4px, 6px);
-            -ms-transform: rotate(45deg) translate(4px, 6px);
-            -webkit-transform: rotate(45deg) translate(4px, 6px);
-            transform: rotate(45deg) translate(4px, 6px);
+            -moz-transform: rotate(45deg) translate(.4rem, .5rem);
+            -ms-transform: rotate(45deg) translate(.4rem, .5rem);
+            -webkit-transform: rotate(45deg) translate(.4rem, .5rem);
+            transform: rotate(45deg) translate(.4rem, .5rem);
           }
 
           span:nth-child(2) {
             opacity: 0
           }
 
           span:nth-child(3) {
-            -moz-transform: rotate(-45deg) translate(8px, -10px);
-            -ms-transform: rotate(-45deg) translate(8px, -10px);
-            -webkit-transform: rotate(-45deg) translate(8px, -10px);
-            transform: rotate(-45deg) translate(8px, -10px);
+            -moz-transform: rotate(-45deg) translate(.4rem, -.5rem);
+            -ms-transform: rotate(-45deg) translate(.4rem, -.5rem);
+            -webkit-transform: rotate(-45deg) translate(.4rem, -.5rem);
+            transform: rotate(-45deg) translate(.4rem, -.5rem);
           }
         }
       }

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -1,5 +1,3 @@
-@charset 'utf-8';
-
 // ==============================
 // Variables
 // ==============================

diff --git a/assets/css/style.template.scss b/assets/css/style.template.scss
@@ -1,3 +1,5 @@
+@charset 'utf-8';
+
 {{- if eq .Site.Params.home_mode "post" -}}
   $home-profile: true;
   $home-posts: true;

diff --git a/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content b/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content