crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweaking header and hero position and sizing

Browse Source
This commit is contained in:
August Skare 2018-10-18 14:09:02 +02:00
parent ac60d45969
commit 97646571a1
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/dev-tools-pages/ts/components/Header.tsx
View File

@ -9,8 +9,8 @@ function Header(props: Props) {
const { icon, title, colors } = props; const { icon, title, colors } = props;
return ( return (
<Container> <StyledHeader>
<StyledHeader> <Container>
<LogoMark> <LogoMark>
<Logo as={icon} color={colors.main} /> <Logo as={icon} color={colors.main} />
<Title>{title}</Title> <Title>{title}</Title>
@ -19,17 +19,23 @@ function Header(props: Props) {
<Link as="a" href="#"> <Link as="a" href="#">
Built by 0x Built by 0x
</Link> </Link>
</StyledHeader> </Container>
</Container> </StyledHeader>
); );
} }
const StyledHeader = styled.header` const StyledHeader = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 3.75rem; padding-top: 3.75rem;
padding-bottom: 0.875rem; 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` const LogoMark = styled.div`

7
packages/dev-tools-pages/ts/components/Hero.tsx
View File

@ -19,9 +19,14 @@ function Hero(props: Props) {
} }
const StyledHero = styled.section` const StyledHero = styled.section`
margin: 0 auto;
text-align: center; text-align: center;
margin: 0 auto;
padding-top: 9.375rem;
padding-bottom: 2rem;
max-width: 590px; max-width: 590px;
min-height: min-content;
max-height: 37.5rem;
height: 80vh;
`; `;
const Subtitle = styled.h2` const Subtitle = styled.h2`