diff options
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 64 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 15 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 47 |
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> ); |