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

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

@ -9,8 +9,8 @@ function Header(props: Props) {
const { icon, title, colors } = props;
return (
<Container>
<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>
</StyledHeader>
);
}
const StyledHeader = styled.header`
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;
padding-top: 3.75rem;
padding-bottom: 0.875rem;
}
`;
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`
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`