aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/text.tsx7
-rw-r--r--packages/website/ts/@next/pages/why.tsx2
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>