aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/layout.tsx23
-rw-r--r--packages/website/ts/@next/pages/landing.tsx8
2 files changed, 26 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index ce5d6d578..e66dac8a9 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -12,6 +12,10 @@ interface ColumnWidths {
[key: string]: string;
}
+interface PaddingSizes {
+ [key: string]: string;
+}
+
interface SectionProps {
noPadding?: any;
padLarge?: any;
@@ -23,6 +27,7 @@ interface SectionProps {
interface WrapProps {
width?: 'default' | 'full' | 'medium' | 'narrow';
bgColor?: string;
+ margin?: number | (string | number)[];
}
interface ColumnProps {
@@ -37,7 +42,6 @@ interface GetColWidthArgs {
columns: number;
}
-
const _getColumnWidth = (args: GetColWidthArgs) => {
const { span = 1, columns } = args;
const percentWidth = (span / columns) * 100;
@@ -45,6 +49,18 @@ const _getColumnWidth = (args: GetColWidthArgs) => {
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
+const _getPadding = (value: number | (string | number)[]) => {
+ let padding = '';
+
+ if (Array.isArray(value)) {
+ padding = value.map(val => PADDING_SIZES[val] || '0px').join(' ');
+ } else {
+ padding = `${value}px`;
+ }
+
+ return padding;
+}
+
const GUTTER = 30 as number;
const MAX_WIDTH = 1500;
const BREAKPOINTS = {
@@ -62,6 +78,10 @@ const COLUMN_WIDTHS: ColumnWidths = {
'1/2': _getColumnWidth({ columns: 2 }),
'2/3': _getColumnWidth({ span: 2, columns: 3 }),
};
+const PADDING_SIZES: PaddingSizes = {
+ 'default': '30px',
+ 'large': '60px',
+};
export const Main = styled.main`
@@ -87,6 +107,7 @@ export const Section = styled.section<SectionProps>`
const WrapBase = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
+ padding: ${props => _getPadding(props.margin)};
background-color: ${props => props.bgColor};
margin: 0 auto;
`;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 61d07641b..2793993f9 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -69,9 +69,9 @@ export const NextLanding = () => (
</Button>
</WrapCentered>
- <Wrap>
+ <Wrap margin={['large', 0, 0, 0]}>
{/* NOTE: this probably should be withComponent as part of a <dl> */}
- <Column colWidth="1/3">
+ <Column colWidth="1/3" noPadding>
<Heading size="medium" center>
873,435
</Heading>
@@ -81,7 +81,7 @@ export const NextLanding = () => (
</Paragraph>
</Column>
- <Column colWidth="1/3">
+ <Column colWidth="1/3" noPadding>
<Heading size="medium" center>
$203M
</Heading>
@@ -91,7 +91,7 @@ export const NextLanding = () => (
</Paragraph>
</Column>
- <Column colWidth="1/3">
+ <Column colWidth="1/3" noPadding>
<Heading size="medium" center>
227,372
</Heading>