From 73ea2dac6d18af5375bf4d9026f70f55b200297c Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:59:03 +0200 Subject: Responsive header --- packages/dev-tools-pages/ts/components/Header.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx index dca562421..aeefae3cc 100644 --- a/packages/dev-tools-pages/ts/components/Header.tsx +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -5,6 +5,8 @@ import { withContext, Props } from './withContext'; import Container from './Container'; import { Small } from './Typography'; +import { media } from '../variables'; + function Header(props: Props) { const { icon, title, colors } = props; @@ -36,6 +38,8 @@ const StyledHeader = styled.header` justify-content: space-between; align-items: center; } + + ${media.small`padding-top: 2.125rem;`}; `; const LogoMark = styled.div` @@ -53,6 +57,8 @@ const Title = styled.h1` font-size: 1.5rem; margin: 0; margin-left: 0.8125rem; + + ${media.small`font-size: 1.25rem;`}; `; const StyledLink = styled(Small)` -- cgit