diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-14 21:00:12 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-14 21:01:33 +0800 |
commit | 8a06dccbbf7e95b4223446cbd018f55b90214a62 (patch) | |
tree | f40ae895e069db27dcb014d587b439f98c4b91eb /packages/website/ts/@next/components/hero.tsx | |
parent | 4590d07e7f75b532683da83fe59917cdaba51579 (diff) | |
download | dexon-0x-contracts-8a06dccbbf7e95b4223446cbd018f55b90214a62.tar.gz dexon-0x-contracts-8a06dccbbf7e95b4223446cbd018f55b90214a62.tar.zst dexon-0x-contracts-8a06dccbbf7e95b4223446cbd018f55b90214a62.zip |
Tweak launch kit
Diffstat (limited to 'packages/website/ts/@next/components/hero.tsx')
-rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 1ccef77d0..34f33d641 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -5,6 +5,8 @@ import {addFadeInAnimation, fadeIn} from 'ts/@next/constants/animations'; interface Props { title: string; + isLargeTitle?: boolean; + isFullWidth?: boolean; description: string; figure?: React.ReactNode; actions?: React.ReactNode; @@ -12,7 +14,7 @@ interface Props { export const Hero = (props: Props) => ( <Section> - <Wrap isCentered={!props.figure}> + <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}> {props.figure && <Content width="400px"> {props.figure} @@ -20,7 +22,7 @@ export const Hero = (props: Props) => ( } <Content width={props.figure ? '546px' : '678px'}> - <Title isLarge={props.figure}> + <Title isLarge={props.isLargeTitle}> {props.title} </Title> @@ -46,12 +48,12 @@ const Section = styled.section` } `; -const Wrap = styled.div<{ isCentered?: boolean }>` +const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` width: calc(100% - 60px); margin: 0 auto; @media (min-width: 768px) { - max-width: 1136px; + max-width: ${props => !props.isFullWidth ? '895px' : '1136px'}; flex-direction: row-reverse; display: flex; align-items: center; @@ -65,7 +67,7 @@ const Wrap = styled.div<{ isCentered?: boolean }>` `; const Title = styled.h1<{ isLarge?: any }>` - font-size: ${props => props.isLarge ? '80px' : '58px'}; + font-size: ${props => props.isLarge ? '80px' : '50px'}; font-weight: 300; line-height: 1.1; margin-bottom: 30px; |