fix(Header): update styles

GaiAma · Dec 15, 2019 · 4063284 · 4063284
1 parent f1fa2b9
commit 4063284
Showing 1 changed file with 44 additions and 34 deletions.
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
@@ -1,4 +1,4 @@
-import { colors, fontFamilies, media } from '@src/theme'
+import { colors, fontFamilies, media, maxWidthLayout } from '@src/theme'
 
 export default {
   header: {
@@ -7,6 +7,10 @@ export default {
     whiteSpace: `nowrap`,
     fontWeight: 100,
 
+    width: `100vw`,
+    ...maxWidthLayout,
+    margin: `0 auto`,
+
     '& a': {
       color: `darkWhite`,
 
@@ -197,16 +201,18 @@ export default {
   },
 
   headerLink: {
-    display: `block`,
-    color: colors.darkWhite,
-    position: `relative`,
-    border: `none`,
-    // zIndex: 1,
-
-    ':hover, :active, :focus': {
-      backgroundColor: `transparent`,
+    a: {
+      display: `block`,
       color: colors.darkWhite,
-      textDecoration: `none`,
+      position: `relative`,
+      border: `none`,
+      // zIndex: 1,
+
+      ':hover, :active, :focus': {
+        backgroundColor: `transparent`,
+        color: colors.darkWhite,
+        textDecoration: `none`,
+      },
     },
   },
 
@@ -221,35 +227,39 @@ export default {
   },
 
   headerMeta_headerLink: {
-    // WebkitFontSmoothing: `antialiased`,
-    // WebkitBackfaceVisibility: `hidden`,
-    // transform: `perspective(1px) translateZ(0)`,
-    // transition: `transform .2s`,
-    // WebkitFilter: `blur(0)`,
-    '&:hover': {
-      backgroundColor: `transparent`,
-      transform: `scale(1.048, 1.048)`,
+    a: {
+      // WebkitFontSmoothing: `antialiased`,
+      // WebkitBackfaceVisibility: `hidden`,
+      // transform: `perspective(1px) translateZ(0)`,
+      // transition: `transform .2s`,
+      // WebkitFilter: `blur(0)`,
+      '&:hover': {
+        backgroundColor: `transparent`,
+        transform: `scale(1.048, 1.048)`,
+      },
     },
   },
 
   headerNav_headerLink: {
-    display: `flex`,
-    alignItems: `center`,
-    height: `100%`,
-    padding: `0 .4rem 0`,
-
-    ':hover, &.active': {
-      background: colors.primary,
-    },
+    a: {
+      display: `flex`,
+      alignItems: `center`,
+      height: `100%`,
+      padding: `0 .4rem 0`,
+
+      ':hover, &.active': {
+        background: colors.primary,
+      },
 
-    [media.greaterThan(`xsmall`)]: {
-      padding: `0 .65rem 0`,
-    },
-    [media.greaterThan(`small`)]: {
-      fontSize: `1.1rem`,
-    },
-    [media.greaterThan(`large`)]: {
-      fontSize: `1.8rem`,
+      [media.greaterThan(`xsmall`)]: {
+        padding: `0 .65rem 0`,
+      },
+      [media.greaterThan(`small`)]: {
+        fontSize: `1.1rem`,
+      },
+      [media.greaterThan(`large`)]: {
+        fontSize: `1.8rem`,
+      },
     },
   },
 }