diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 15:46:36 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 15:46:49 +0800 |
| commit | 0c5b645e86192aeae73a1b7847a8df177367d9e1 (patch) | |
| tree | d742ac6809f011080a4abecb4987bd1a07180036 | |
| parent | 23bfad6c40d847e2c9c7c0ac99315ffa66a661e1 (diff) | |
| download | dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.tar dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.tar.gz dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.tar.bz2 dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.tar.lz dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.tar.xz dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.tar.zst dexon-sol-tools-0c5b645e86192aeae73a1b7847a8df177367d9e1.zip | |
Edits column width calc method
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 24 |
1 files changed, 19 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index b337a6e58..55a3dcbee 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -27,20 +27,34 @@ interface ColumnProps { colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; } +interface GetColWidthArgs { + 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 GUTTER = 30 as number; const WRAPPER_WIDTHS: WrapWidths = { - default: '1500px', // dunno + default: '1500px', // tbd 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)`, + '1/4': _getColumnWidth({ columns: 4 }), + '1/3': _getColumnWidth({ columns: 3 }), + '1/2': _getColumnWidth({ columns: 2 }), + '2/3': _getColumnWidth({ span: 2, columns: 4 }), }; + export const Section = styled.section<SectionProps>` width: 100%; padding: ${props => !props.noPadding && '30px'}; |