diff options
author | August Skare <post@augustskare.no> | 2018-10-18 20:09:02 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-18 20:09:02 +0800 |
commit | 97646571a1bf4514edb52a7bc14bb157dfa3025c (patch) | |
tree | cf47a32636227d3860159e01c6b489d08c096c50 /packages/dev-tools-pages/ts/components/Header.tsx | |
parent | ac60d459696b8a68caf65a345626f47c632fb2d0 (diff) | |
download | dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.tar dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.tar.gz dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.tar.bz2 dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.tar.lz dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.tar.xz dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.tar.zst dexon-sol-tools-97646571a1bf4514edb52a7bc14bb157dfa3025c.zip |
tweaking header and hero position and sizing
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Header.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Header.tsx | 20 |
1 files changed, 13 insertions, 7 deletions
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 ( - <Container> - <StyledHeader> + <StyledHeader> + <Container> <LogoMark> <Logo as={icon} color={colors.main} /> <Title>{title}</Title> @@ -19,17 +19,23 @@ function Header(props: Props) { <Link as="a" href="#"> Built by 0x </Link> - </StyledHeader> - </Container> + </Container> + </StyledHeader> ); } 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` |