diff options
| -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'}; |