diff options
6 files changed, 44 insertions, 34 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index bd3b8a2e3..6584f3fa4 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -27,6 +27,7 @@ interface WrapProps extends PaddingInterface { bgColor?: string; isWrapped?: boolean; isCentered?: boolean; + isReversed?: boolean; } interface ColumnProps { @@ -50,7 +51,7 @@ const _getColumnWidth = (args: GetColWidthArgs): string => { const GUTTER = 30 as number; const MAX_WIDTH = 1500; -const BREAKPOINTS = { +export const BREAKPOINTS = { mobile: '768px', }; const WRAPPER_WIDTHS: WrapWidths = { @@ -83,19 +84,18 @@ export const Main = styled.main` export const Section = styled.section<SectionProps>` width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; - margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; - margin-left: ${props => props.isFullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; position: ${props => props.isRelative && 'relative'}; overflow: ${props => props.isRelative && 'hidden'}; @media (min-width: 1560px) { width: ${props => props.isFullWidth && '100vw'}; + margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; margin-left: ${props => props.isFullWidth && `calc(750px - 50vw)`}; } @media (max-width: ${BREAKPOINTS.mobile}) { - padding: 20px; + margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`}; } `; @@ -104,10 +104,6 @@ const WrapBase = styled.div<WrapProps>` padding: ${props => props.padding && getCSSPadding(props.padding)}; background-color: ${props => props.bgColor}; margin: 0 auto; - - @media (max-width: ${BREAKPOINTS.mobile}) { - padding: 20px 0; - } `; export const Wrap = styled(WrapBase)` @@ -115,6 +111,7 @@ export const Wrap = styled(WrapBase)` display: flex; justify-content: space-between; flex-wrap: wrap; + flex-direction: ${props => props.isReversed && 'row-reverse'}; } `; @@ -132,17 +129,17 @@ export const WrapGrid = styled(WrapBase)` `; export const Column = styled.div<ColumnProps>` - padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; background-color: ${props => props.bgColor}; @media (min-width: ${BREAKPOINTS.mobile}) { + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; } @media (max-width: ${BREAKPOINTS.mobile}) { - padding-left: 0; - padding-right: 0; - margin-bottom: var(--gutterMobile, 20px); + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')}; + text-align: center; + margin-bottom: 20px; } `; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 42062a2e1..75c7623e8 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -38,9 +38,8 @@ export const SectionLandingAbout = () => ( <hr style={{ width: '340px', - margin: '0 auto', borderColor: '#3C4746', - marginTop: '60px auto 0 auto', + margin: '60px auto 0 auto', }} /> </WrapCentered> diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index c08a4ea48..68d5e384d 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; interface ProjectLogo { @@ -13,14 +13,17 @@ const projects: ProjectLogo[] = [ { name: 'Radar Relay', imageUrl: '/images/@next/relayer-logos/logo_1.png', + persistOnMobile: true, }, { name: 'Paradex', imageUrl: '/images/@next/relayer-logos/logo_5.png', + persistOnMobile: true, }, { name: 'Amadeus', imageUrl: '/images/@next/relayer-logos/logo_3.png', + persistOnMobile: true, }, { name: 'The Ocean X', @@ -41,22 +44,29 @@ const projects: ProjectLogo[] = [ { name: 'OpenRelay', imageUrl: '/images/@next/relayer-logos/logo_2.3.png', + persistOnMobile: true, }, { name: 'DDEX', imageUrl: '/images/@next/relayer-logos/logo_2.png', + persistOnMobile: true, }, ]; export const SectionLandingClients = () => ( <Section isPadLarge={true}> <WrapCentered> - <Heading size="small">You're in good company</Heading> + <Heading size="small"> + Join the growing number of projects developing on 0x + </Heading> </WrapCentered> <WrapGrid width="narrow" isWrapped={true}> {_.map(projects, (item: ProjectLogo, index) => ( - <StyledProject key={`client-${index}`}> + <StyledProject + key={`client-${index}`} + isOnMobile={item.persistOnMobile} + > <img src={item.imageUrl} alt={item.name} /> </StyledProject> ))} @@ -65,14 +75,24 @@ export const SectionLandingClients = () => ( ); const StyledProject = styled.div` - width: 90px; - height: 90px; flex-shrink: 0; - margin: 30px; img { object-fit: contain; width: 100%; height: 100%; } + + @media (min-width: ${BREAKPOINTS.mobile}) { + width: 120px; + height: 120px; + margin: 30px; + } + + @media (max-width: ${BREAKPOINTS.mobile}) { + width: 100px; + height: 100px; + margin: 15px; + display: ${props => !props.isOnMobile && 'none'}; + } `; diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index e43ac41f2..98e111805 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -7,7 +7,13 @@ import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; export const SectionLandingHero = () => ( <Section> - <Wrap> + <Wrap isReversed={true}> + <Column colWidth="1/2"> + <WrapCentered> + <LogoOutlined/> + </WrapCentered> + </Column> + <Column colWidth="1/2"> <Heading size="large"> Powering Decentralized Exchange @@ -28,12 +34,6 @@ export const SectionLandingHero = () => ( </Button> </ButtonWrap> </Column> - - <Column colWidth="1/2"> - <WrapCentered> - <LogoOutlined/> - </WrapCentered> - </Column> </Wrap> </Section> ); diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 9058fc7c9..96decedba 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -27,14 +27,8 @@ 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); - } `; export const Heading: React.StatelessComponent<HeadingProps> = props => { diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index e1b97fc3b..160c46ad5 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -55,7 +55,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` :root { --smallHeading: 16px; --defaultHeading: 18px; - --mediumHeading: 32px; + --mediumHeading: 40px; --largeHeading: 46px; --smallHeadingHeight: 1.4em; // TO DO --defaultHeadingHeight: 1.357142857em; // TO DO |