From 7b90f095fffdaac34a518e3f404e35477b534824 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 28 Nov 2018 14:45:11 +0100 Subject: Adds very basic SiteWrap and global styling --- packages/website/ts/@next/components/siteWrap.tsx | 26 +++++++++++ packages/website/ts/@next/constants/cssReset.js | 50 ++++++++++++++++++++++ .../website/ts/@next/constants/globalStyle.tsx | 17 ++++++++ packages/website/ts/@next/pages/landing.tsx | 7 ++- 4 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/@next/components/siteWrap.tsx create mode 100644 packages/website/ts/@next/constants/cssReset.js create mode 100644 packages/website/ts/@next/constants/globalStyle.tsx (limited to 'packages/website') 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 => { + const { children } = props; + + return ( + <> + + +
0x HEADER
+ + { children } + +
OMG 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 = () => ( -
0x
+ +
Hello
+
); -- cgit v1.2.3