aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/layout.tsx64
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx15
-rw-r--r--packages/website/ts/@next/pages/landing.tsx47
3 files changed, 122 insertions, 4 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
new file mode 100644
index 000000000..c5b816f9d
--- /dev/null
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface WrapWidths {
+ default: string,
+ full: string,
+ medium: string,
+ narrow: string,
+ [key: string]: string,
+}
+
+interface ColumnWidths {
+ [key: string]: string,
+}
+
+interface SectionProps {
+ noPadding?: any,
+ bgColor?: string,
+}
+
+interface WrapProps {
+ width?: 'default' | 'full' | 'medium' | 'narrow',
+ bgColor?: string,
+}
+
+interface ColumnProps {
+ colWidth?: '1/4' | '1/3' | '1/2' | '2/3',
+}
+
+const GUTTER = 30 as number;
+const WRAPPER_WIDTHS: WrapWidths = {
+ default: `calc(100% - ${GUTTER * 2}px)`,
+ full: '100%',
+ medium: '1136px',
+ narrow: '930px',
+};
+const COLUMN_WIDTHS: ColumnWidths = {
+ '1/4': `calc(${(1 / 4) * 100}% - ${(GUTTER * 3) / 4}px)`,
+ '1/3': `calc(${(1 / 3) * 100}% - ${(GUTTER * 2) / 3}px)`,
+ '1/2': `calc(${(1 / 2) * 100}% - ${GUTTER / 2}px)`,
+ '2/3': `calc(${(2 / 3) * 100}% - ${GUTTER / 2}px)`,
+};
+
+export const Section = styled.section<SectionProps>`
+ width: 100%;
+ padding: ${props => !props.noPadding && '30px'};
+ background-color: ${props => props.bgColor};
+ border: 1px solid blue;
+`;
+
+export const Wrap = styled.div<WrapProps>`
+ max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
+ background-color: ${props => props.bgColor};
+ margin: 0 auto;
+ border: 1px solid green;
+ display: flex;
+ justify-content: space-between;
+`;
+
+export const Column = styled.div<ColumnProps>`
+ width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
+ padding: 30px;
+ border: 1px solid yellow;
+`;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 0a62a1783..eebf6c25c 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
+import styled from 'styled-components';
import { GlobalStyles } from 'ts/@next/constants/globalStyle';
+import { Header } from 'ts/@next/components/header';
-import { Header } from './header';
interface Props {
@@ -16,11 +17,19 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
<Header />
- {children}
+ <Main>
+ { children }
+ </Main>
<footer>OMG FOOTER</footer>
</>
);
};
-export { SiteWrap };
+const Main = styled.main`
+ border: 1px solid blue;
+ padding: 30px;
+`;
+
+
+export { SiteWrap }
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 64ef15274..709b77e76 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,9 +1,54 @@
import * as React from 'react';
import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Section, Wrap, Column } from 'ts/@next/components/layout';
export const NextLanding = () => (
<SiteWrap>
- <div>Hello</div>
+ <Section>
+ <Wrap>
+ <Column colWidth="2/3">
+ Powering Decentralized Exchange<br/>
+ Example of a 2/3 1/3 assymetric composition
+ </Column>
+
+ <Column colWidth="1/3">
+ RIGHT IMAGE
+ </Column>
+ </Wrap>
+ </Section>
+
+ <Section bgColor="#003831">
+ <Wrap
+ width="narrow">
+ 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets.
+ </Wrap>
+
+ <Wrap>
+ <Column colWidth="1/3">
+ This
+ </Column>
+
+ <Column colWidth="1/3">
+ is a
+ </Column>
+
+ <Column colWidth="1/3">
+ three-column module
+ </Column>
+ </Wrap>
+ </Section>
+
+ <Section>
+ <Wrap>
+ <Column colWidth="1/2">
+ This is a 2 COLUMN section
+ </Column>
+
+ <Column colWidth="1/2">
+ Again a 2 column section
+ </Column>
+ </Wrap>
+ </Section>
</SiteWrap>
);