aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 15:52:13 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 15:52:13 +0800
commitbe39c5ba993998d6e07cea8d1ed9998bd33ebc3d (patch)
tree512e690908e89cb421399a3b9c74375de9504a10
parent0c5b645e86192aeae73a1b7847a8df177367d9e1 (diff)
downloaddexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar
dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.gz
dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.bz2
dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.lz
dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.xz
dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.tar.zst
dexon-sol-tools-be39c5ba993998d6e07cea8d1ed9998bd33ebc3d.zip
Moves content wrap to layout.tsx
-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 };