Moves content wrap to layout.tsx

1 files changed, 20 insertions, 12 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'};