diff options
author | August Skare <post@augustskare.no> | 2018-10-22 14:46:46 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-22 14:46:46 +0800 |
commit | cacb8acf763ea0dc33af6925d8aeaa51f1006963 (patch) | |
tree | 8a708435db80fa56f11a0631cc3b93fd9875037b /packages/dev-tools-pages | |
parent | c1082b9b08e1a17b8385120e30726025ea676a39 (diff) | |
download | dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.tar dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.tar.gz dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.tar.bz2 dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.tar.lz dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.tar.xz dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.tar.zst dexon-0x-contracts-cacb8acf763ea0dc33af6925d8aeaa51f1006963.zip |
hero spacing adjustment on small screen
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Hero.tsx | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx index 5ba469fca..f52ce5bc9 100644 --- a/packages/dev-tools-pages/ts/components/Hero.tsx +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; +import { media } from 'ts/variables'; import { withContext, Props } from './withContext'; import Button from './Button'; import { Beta } from './Typography'; @@ -23,6 +24,8 @@ const StyledHero = styled.section` margin: 0 auto; padding-top: 9.375rem; padding-bottom: 2rem; + padding-left: 2.5rem; + padding-right: 2.5rem; max-width: 590px; min-height: min-content; max-height: 37.5rem; @@ -33,10 +36,19 @@ const Subtitle = styled.h2` font-size: 3.75rem; line-height: 1.16; margin-bottom: 1.5rem; + + ${media.small` + font-size: 2.25rem; + line-height: 1.1; + margin-bottom: 1.375rem; + `}; `; const Tagline = styled(Beta)` margin-bottom: 2rem; + ${media.small` + margin-bottom: 1.25rem; + `}; `; export default withContext(Hero); |