aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Header.tsx20
-rw-r--r--packages/dev-tools-pages/ts/components/Hero.tsx7
2 files changed, 19 insertions, 8 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`
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`