aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/layout.tsx24
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'};