diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 15:52:13 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 15:52:13 +0800 |
commit | be39c5ba993998d6e07cea8d1ed9998bd33ebc3d (patch) | |
tree | 512e690908e89cb421399a3b9c74375de9504a10 /packages/website/ts/@next/components/layout.tsx | |
parent | 0c5b645e86192aeae73a1b7847a8df177367d9e1 (diff) | |
download | dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.gz dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.bz2 dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.lz dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.xz dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.zst dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.zip |
Moves content wrap to layout.tsx
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 32 |
1 files changed, 20 insertions, 12 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 55a3dcbee..58b308883 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -2,29 +2,29 @@ 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; - bgColor?: string; + noPadding?: any, + bgColor?: string, } 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'; + colWidth?: '1/4' | '1/3' | '1/2' | '2/3', } interface GetColWidthArgs { @@ -41,8 +41,9 @@ const _getColumnWidth = (args: GetColWidthArgs) => { }; const GUTTER = 30 as number; +const MAX_WIDTH = 1500; const WRAPPER_WIDTHS: WrapWidths = { - default: '1500px', // tbd + default: `${MAX_WIDTH}px`, // tbd full: '100%', medium: '1136px', narrow: '930px', @@ -55,6 +56,13 @@ const COLUMN_WIDTHS: ColumnWidths = { }; +export const Main = styled.main` + border: 1px solid blue; + width: calc(100% - 60px); + max-width: ${MAX_WIDTH}px; + margin: 0 auto; +`; + export const Section = styled.section<SectionProps>` width: 100%; padding: ${props => !props.noPadding && '30px'}; |