Adds very basic SiteWrap and global styling

4 files changed, 98 insertions, 2 deletions

diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
new file mode 100644
index 000000000..1b0efd145
--- /dev/null
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { GlobalStyles } from 'ts/@next/constants/globalStyle';
+
+
+interface Props {
+
+}
+
+const SiteWrap:React.StatelessComponent<Props> = props => {
+  const { children } = props;
+
+  return (
+    <>
+      <GlobalStyles />
+
+      <header>0x HEADER</header>
+
+      { children }
+
+      <footer>OMG FOOTER</footer>
+    </>
+  )
+};
+
+
+export { SiteWrap }
diff --git a/packages/website/ts/@next/constants/cssReset.js b/packages/website/ts/@next/constants/cssReset.js
new file mode 100644
index 000000000..4c5105b50
--- /dev/null
+++ b/packages/website/ts/@next/constants/cssReset.js
@@ -0,0 +1,50 @@
+export const cssReset = `
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol, ul {
+    list-style: none;
+  }
+  blockquote, q {
+    quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+`;
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
new file mode 100644
index 000000000..271dd2545
--- /dev/null
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -0,0 +1,17 @@
+import { createGlobalStyle } from 'styled-components';
+import { cssReset } from 'ts/@next/constants/cssReset';
+
+
+// Not sure if cssReset is already imported into index.tsx
+// Also: currently createglobalStyle from styled-components is
+// throwing a warning about how there's not typing exported from styled-comps
+const GlobalStyles = createGlobalStyle`
+  ${cssReset};
+
+  html {
+    background-color: red;
+  }
+`;
+
+
+export { GlobalStyles }
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index c17a6d859..64ef15274 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { SiteWrap } from 'ts/@next/components/siteWrap';
+
 
 export const NextLanding = () => (
-    <div>0x</div>
+  <SiteWrap>
+    <div>Hello</div>
+  </SiteWrap>
 );