diff options
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 2 |
2 files changed, 7 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 8584a093c..de31679b2 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -27,9 +27,13 @@ const StyledHeading = styled.h1<HeadingProps>` margin-bottom: ${props => !props.isNoMargin && '30px'}; text-align: ${props => props.isCentered && 'center'}; font-weight: 300; + max-width: var(--desktopMaxWidth, none); + margin-left: ${props => props.isCentered && 'auto'}; + margin-right: ${props => props.isCentered && 'auto'}; @media (max-width: 768px) { text-align: center; + max-width: var(--mobileMaxWidth, none); } `; @@ -37,9 +41,10 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { const { asElement = 'h1', children, + ...style } = props; const Component = StyledHeading.withComponent(asElement); - return <Component {...props}>{children}</Component>; + return <Component style={{...style}} {...props}>{children}</Component>; }; // No need to declare it twice as Styled then rewrap as a stateless comp diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index d922aac9e..a75fc7103 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -16,7 +16,7 @@ export const NextWhy = () => ( <Section> <WrapCentered> <Column colWidth="2/3"> - <Heading size="medium" isCentered={true}>The exchange layer for the crypto economy</Heading> + <Heading size="medium" isCentered={true} style={{ '--desktopMaxWidth': '570px' }}>The exchange layer for the crypto economy</Heading> <Paragraph size="medium" isCentered={true}>The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.</Paragraph> <Paragraph isCentered={true}>Build on 0x (arrow)</Paragraph> </Column> |