From 97646571a1bf4514edb52a7bc14bb157dfa3025c Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 18 Oct 2018 14:09:02 +0200 Subject: tweaking header and hero position and sizing --- packages/dev-tools-pages/ts/components/Header.tsx | 20 +++++++++++++------- packages/dev-tools-pages/ts/components/Hero.tsx | 7 ++++++- 2 files changed, 19 insertions(+), 8 deletions(-) (limited to 'packages/dev-tools-pages/ts') diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx index 46dce01eb..dca562421 100644 --- a/packages/dev-tools-pages/ts/components/Header.tsx +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -9,8 +9,8 @@ function Header(props: Props) { const { icon, title, colors } = props; return ( - - + + {title} @@ -19,17 +19,23 @@ function Header(props: Props) { Built by 0x - - + + ); } const StyledHeader = styled.header` - display: flex; - justify-content: space-between; - align-items: center; padding-top: 3.75rem; padding-bottom: 0.875rem; + width: 100%; + position: absolute; + top: 0; + left: 0; + ${Container} { + display: flex; + justify-content: space-between; + align-items: center; + } `; const LogoMark = styled.div` diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx index 60f859a55..5ba469fca 100644 --- a/packages/dev-tools-pages/ts/components/Hero.tsx +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -19,9 +19,14 @@ function Hero(props: Props) { } const StyledHero = styled.section` - margin: 0 auto; text-align: center; + margin: 0 auto; + padding-top: 9.375rem; + padding-bottom: 2rem; max-width: 590px; + min-height: min-content; + max-height: 37.5rem; + height: 80vh; `; const Subtitle = styled.h2` -- cgit