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.tsx32
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx14
2 files changed, 27 insertions, 19 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'};
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index c71fcf9cb..828842064 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -3,8 +3,11 @@ import styled from 'styled-components';
import { Footer } from 'ts/@next/components/footer';
import { Header } from 'ts/@next/components/header';
+import { Main } from 'ts/@next/components/layout';
import { GlobalStyles } from 'ts/@next/constants/globalStyle';
+// Note(ez): We'll define the theme and provide it via a prop
+// e.g. theme dark/light/etc.
interface Props {
}
@@ -14,12 +17,15 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
return (
<>
+ {/* GlobalStyles will be exposed the theme via provider,
+ same is true for all children of SiteWrap
+ */}
<GlobalStyles />
<Header />
<Main>
- {children}
+ { children }
</Main>
<Footer/>
@@ -27,11 +33,5 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
);
};
-const Main = styled.main`
- border: 1px solid blue;
- width: calc(100% - 60px);
- max-width: 1500px;
- margin: 0 auto;
-`;
export { SiteWrap };