diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 19:13:24 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 19:13:24 +0800 |
commit | df213ac0d52c29e23e06d135b911df8263d4e6fc (patch) | |
tree | 8778b513c42712e7a175517e4a4fcfa79b324ef5 /packages/website/ts/@next/components/layout.tsx | |
parent | 4d7db045e9c6faa69fc8018c6c36e63fe562973c (diff) | |
download | dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.gz dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.zst dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.zip |
Text and landing
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 122 |
1 files changed, 62 insertions, 60 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index c807ccb36..1eecf0a55 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -2,112 +2,114 @@ import * as React from 'react'; import styled from 'styled-components'; interface WrapWidths { - default: string; - full: string; - medium: string; - narrow: string; - [key: string]: string; + default: string; + full: string; + medium: string; + narrow: string; + [key: string]: string; } interface ColumnWidths { - [key: string]: string; + [key: string]: string; } interface SectionProps { - noPadding?: any; - noMargin?: any; - bgColor?: string; - fullWidth?: any; + noPadding?: any; + noMargin?: any; + bgColor?: string; + fullWidth?: any; } interface WrapProps { - width?: 'default' | 'full' | 'medium' | 'narrow'; - bgColor?: string; + width?: 'default' | 'full' | 'medium' | 'narrow'; + bgColor?: string; } interface ColumnProps { - colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - noPadding?: any; + colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; + noPadding?: any; + bgColor?: string; } interface GetColWidthArgs { - span?: number; - columns: number; + span?: number; + columns: number; } const _getColumnWidth = (args: GetColWidthArgs) => { - const { span = 1, columns } = args; - const percentWidth = (span / columns) * 100; - const gutterDiff = (GUTTER * (columns - 1)) / columns; - return `calc(${percentWidth}% - ${gutterDiff}px)`; + const { span = 1, columns } = args; + const percentWidth = (span / columns) * 100; + const gutterDiff = (GUTTER * (columns - 1)) / columns; + return `calc(${percentWidth}% - ${gutterDiff}px)`; }; const GUTTER = 30 as number; const MAX_WIDTH = 1500; const BREAKPOINTS = { - mobile: '768px', + mobile: '768px', }; const WRAPPER_WIDTHS: WrapWidths = { - default: `${MAX_WIDTH}px`, // tbd - full: '100%', - medium: '1136px', - narrow: '930px', + default: `${MAX_WIDTH}px`, // tbd + full: '100%', + medium: '1136px', + narrow: '930px', }; const COLUMN_WIDTHS: ColumnWidths = { - '1/4': _getColumnWidth({ columns: 4 }), - '1/3': _getColumnWidth({ columns: 3 }), - '1/2': _getColumnWidth({ columns: 2 }), - '2/3': _getColumnWidth({ span: 2, columns: 3 }), + '1/4': _getColumnWidth({ columns: 4 }), + '1/3': _getColumnWidth({ columns: 3 }), + '1/2': _getColumnWidth({ columns: 2 }), + '2/3': _getColumnWidth({ span: 2, columns: 3 }), }; export const Main = styled.main` - border: 1px dotted rgba(0, 0, 255, 0.3); - width: calc(100% - 60px); - max-width: ${MAX_WIDTH}px; - margin: 0 auto; + border: 1px dotted rgba(0, 0, 255, 0.3); + width: calc(100% - 60px); + max-width: ${MAX_WIDTH}px; + margin: 0 auto; `; export const Section = styled.section<SectionProps>` - width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && '30px'}; - margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; - margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; - background-color: ${props => props.bgColor}; - border: 1px dotted rgba(0, 255, 0, 0.3); - - @media (min-width: 1560px) { - width: ${props => props.fullWidth && '100vw'}; - margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; - } + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; + padding: ${props => !props.noPadding && '30px'}; + margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; + background-color: ${props => props.bgColor}; + border: 1px dotted rgba(0, 255, 0, 0.3); + + @media (min-width: 1560px) { + width: ${props => props.fullWidth && '100vw'}; + margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + } `; const WrapBase = styled.div<WrapProps>` - max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - background-color: ${props => props.bgColor}; - margin: 0 auto; + max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; + background-color: ${props => props.bgColor}; + margin: 0 auto; `; export const Wrap = styled(WrapBase)` - @media (min-width: ${BREAKPOINTS.mobile}) { - display: flex; - justify-content: space-between; - } + @media (min-width: ${BREAKPOINTS.mobile}) { + display: flex; + justify-content: space-between; + } `; export const WrapCentered = styled(WrapBase)` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; `; export const Column = styled.div<ColumnProps>` - padding: ${props => !props.noPadding && '30px'}; - border: 1px dotted rgba(255, 0, 0, 0.3); + padding: ${props => !props.noPadding && '30px'}; + border: 1px dotted rgba(255, 0, 0, 0.3); + background-color: ${props => props.bgColor}; - @media (min-width: ${BREAKPOINTS.mobile}) { - width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; - } + @media (min-width: ${BREAKPOINTS.mobile}) { + width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; + } `; |