12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import React from 'react'
- import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
- import Header from './Header'
- import Meta from './Meta'
- const theme = {
- red: '#FF0000',
- black: '#393939',
- grey: '#545454',
- lightgrey: '#E1E1E1',
- offWhite: '#EDEDED',
- maxWidth: '1000px',
- bs: '0 12px 24px 0 rgba(0,0,0,0.09)'
- }
- const StyledPage = styled.div`
- background: white;
- color: ${props => props.theme.black};
- `
- const Inner = styled.div`
- max-width: ${props => props.theme.maxWidth};
- margin: 0 auto;
- padding: 2rem;
- `
- const GlobalStyle = createGlobalStyle`
- @font-face {
- font-family: 'roboto';
- src: url('/static/Roboto-Thin.woff2');
- }
- @font-face {
- font-family: 'roboto_mono';
- src: url('/static/RobotoMono-Thin.woff2');
- }
- @font-face {
- font-family: 'roboto_black';
- src: url('/static/Roboto-Black.woff2');
- }
-
- html {l
- box-sizing: border-box;
- font-size: 10px;
- }
- *, *:before, *:after {
- box-sizing: inherit;
- }
- body {
- padding: 0;
- margin: 0;
- font-size: 1.5rem;
- line-height: 2;
- font-family: 'roboto', sans-serif;
- }
- a {
- text-decoration: none;
- color: ${theme.black};
- }
- button {
- font-family: 'roboto_black';
- }
- input,
- textarea {
- font-family: 'roboto';
- border: 1px solid ${props => props.theme.lightgrey};
- padding: 6px;
- margin: 0 8px;
- }
- `
- class Page extends React.Component {
- render () {
- return (
- <ThemeProvider theme={theme}>
- <StyledPage>
- <Meta />
- <GlobalStyle />
- <Header />
- <Inner>{this.props.children}</Inner>
- </StyledPage>
- </ThemeProvider>
- )
- }
- }
- export default Page
|