diff options
5 files changed, 11 insertions, 16 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index f4cf19e29..1ac9fccfc 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -80,6 +80,8 @@ export const WrapSticky = styled.div<WrapProps>` `; const SectionBase = styled.section<SectionProps>` + width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; + max-width: 1500px; margin: 0 auto; padding: ${props => props.isPadded && '120px 0'}; background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; @@ -92,7 +94,6 @@ const SectionBase = styled.section<SectionProps>` `; const Wrap = styled(FlexWrap)<WrapProps>` - width: calc(100% - 60px); max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; text-align: ${props => props.isTextCentered && 'center'}; margin: 0 auto; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index b90b4070e..b387c2418 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -15,8 +15,8 @@ interface Props { export const SectionLandingCta = (props: Props) => ( <Section isPadded={false} - isFullWidth={true} isFlex={true} + maxWidth="auto" flexBreakpoint="900px" > <BlockIconLink diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index abbd27845..eb2569f3d 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -69,21 +69,12 @@ export const SiteWrap: React.StatelessComponent<Props> = props => { <> <GlobalStyles /> <Header /> - <Main> + <main> {children} - </Main> + </main> <Footer/> </> </ThemeProvider> </> ); }; - -export const Main = styled.main` - max-width: 1500px; - margin: 0 auto; - - @media (min-width: 768px) { - width: calc(100% - 60px); - } -`; diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index e1725b185..878818940 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -68,7 +68,7 @@ export const Next0xInstant = () => ( actions={<Button href="#">Get Started</Button>} /> - <Section> + <Section isFullWidth={true}> <MarqueeWrap> <div> <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 14ca3ab6f..11b8928d9 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -125,7 +125,7 @@ export class NextWhy extends React.PureComponent { /> </Section> - <Section maxWidth="1170px" isFlex={true}> + <Section maxWidth="1170px" isFlex={true} isFullWidth={true}> <Column> <NavStickyWrap offsetTop="130px"> <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink> @@ -135,7 +135,7 @@ export class NextWhy extends React.PureComponent { </Column> <Column width="55%" maxWidth="826px"> - <Column width="100%" maxWidth="560px"> + <Column width="100%" maxWidth="560px" padding="0 30px 0 0"> <SectionWrap id="benefits"> <Heading size="medium">What 0x offers</Heading> @@ -225,6 +225,9 @@ const SectionWrap = styled.div` `; const NavStickyWrap = styled(WrapSticky)` + padding-left: 60px; + z-index: 9999; + @media (max-width: 768px) { display: none; } |