From f4f10d5eb690a33dd1c112358457a2b987297f26 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 5 Apr 2018 13:54:22 -0400
Subject: work

---
 frontend/components/Header.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'frontend/components/Header.js')

diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 053a18b..4e631a0 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -20,6 +20,10 @@ const StyledHeader = styled.header`
     grid-template-columns: auto 1fr;
     justify-content: space-between;
     align-items: stretch;
+    @media (max-width: 1300px) {
+      grid-template-columns: 1fr;
+      justify-content: center;
+    }
   }
   .sub-bar {
     display: grid;
@@ -31,14 +35,20 @@ const StyledHeader = styled.header`
 const Logo = styled.h1`
   font-size: 4rem;
   margin-left: 2rem;
-  transform: skew(-5deg);
+  position: relative;
+  z-index: 2;
+  transform: skew(-7deg);
   a {
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 1rem;
     background: ${props => props.theme.red};
     color: white;
     letter-spacing: -2px;
     text-transform: uppercase;
   }
+  @media (max-width: 1300px) {
+    margin: 0;
+    text-align: center;
+  }
 `;
 
 const Header = props => (
@@ -46,7 +56,7 @@ const Header = props => (
     <div className="bar">
       <Logo>
         <Link href="/">
-          <a>Sick Fits!</a>
+          <a>Sick&nbsp;Fits!</a>
         </Link>
       </Logo>
       <Nav />
-- 
cgit v1.3