diff options
Diffstat (limited to 'frontend/components/Header.js')
| -rw-r--r-- | frontend/components/Header.js | 16 |
1 files changed, 13 insertions, 3 deletions
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 Fits!</a> </Link> </Logo> <Nav /> |