aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/layout.tsx21
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx3
-rw-r--r--packages/website/ts/@next/components/sections/landing/clients.tsx32
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx14
-rw-r--r--packages/website/ts/@next/components/text.tsx6
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx2
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