diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-18 21:30:10 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-19 05:03:42 +0800 |
commit | 342ecae34d80579560703b6912ac9219fcda0c72 (patch) | |
tree | 33eebd7a611487554439f1fede7e423dc35ba6d8 /packages/website | |
parent | b40551e2dfdae276850be1f38bd0eaeaafe02749 (diff) | |
download | dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.gz dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.bz2 dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.lz dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.xz dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.zst dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.zip |
Left-align hero on mobile
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 11 | ||||
-rw-r--r-- | packages/website/ts/@next/pages/market_maker.tsx | 1 |
2 files changed, 9 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 290c57bcb..c79e2a6eb 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -9,6 +9,7 @@ interface Props { maxWidthHeading?: string; isLargeTitle?: boolean; isFullWidth?: boolean; + isCenteredMobile?: boolean; description: string; figure?: React.ReactNode; actions?: React.ReactNode; @@ -16,7 +17,7 @@ interface Props { export const Hero = (props: Props) => ( <Section> - <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}> + <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}> {props.figure && <Content width="400px"> {props.figure} @@ -42,6 +43,10 @@ export const Hero = (props: Props) => ( </Section> ); +Hero.defaultProps = { + isCenteredMobile: true, +}; + const Section = styled.section` padding: 120px 0; @@ -50,7 +55,7 @@ const Section = styled.section` } `; -const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` +const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean; isCenteredMobile?: boolean }>` width: calc(100% - 60px); margin: 0 auto; @@ -64,7 +69,7 @@ const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` } @media (max-width: 768px) { - text-align: center; + text-align: ${props => props.isCenteredMobile ? `center` : 'left'}; } `; diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index a9d8cb19f..37a25f0ac 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -50,6 +50,7 @@ export class NextMarketMaker extends React.Component { maxWidthHeading="715px" isLargeTitle={false} isFullWidth={false} + isCenteredMobile={false} title="Bring liquidity to the exchanges of the future" description="Market makers (MMs) are important stakeholders in the 0x ecosystem. The Market Making Program provides a set of resources that help onboard MMs bring liquidity to the 0x network. The program includes tutorials, a robust data platform, trade compensation, and 1:1 support from our MM Success Manager." actions={<HeroActions/>} |