Page.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import React from 'react'
  2. import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
  3. import Header from './Header'
  4. import Meta from './Meta'
  5. const theme = {
  6. red: '#FF0000',
  7. black: '#393939',
  8. grey: '#545454',
  9. lightgrey: '#E1E1E1',
  10. offWhite: '#EDEDED',
  11. maxWidth: '1000px',
  12. bs: '0 12px 24px 0 rgba(0,0,0,0.09)'
  13. }
  14. const StyledPage = styled.div`
  15. background: white;
  16. color: ${props => props.theme.black};
  17. `
  18. const Inner = styled.div`
  19. max-width: ${props => props.theme.maxWidth};
  20. margin: 0 auto;
  21. padding: 2rem;
  22. `
  23. const GlobalStyle = createGlobalStyle`
  24. @font-face {
  25. font-family: 'roboto';
  26. src: url('/static/Roboto-Thin.woff2');
  27. }
  28. @font-face {
  29. font-family: 'roboto_mono';
  30. src: url('/static/RobotoMono-Thin.woff2');
  31. }
  32. @font-face {
  33. font-family: 'roboto_black';
  34. src: url('/static/Roboto-Black.woff2');
  35. }
  36. html {l
  37. box-sizing: border-box;
  38. font-size: 10px;
  39. }
  40. *, *:before, *:after {
  41. box-sizing: inherit;
  42. }
  43. body {
  44. padding: 0;
  45. margin: 0;
  46. font-size: 1.5rem;
  47. line-height: 2;
  48. font-family: 'roboto', sans-serif;
  49. }
  50. a {
  51. text-decoration: none;
  52. color: ${theme.black};
  53. }
  54. button {
  55. font-family: 'roboto_black';
  56. }
  57. input,
  58. textarea {
  59. font-family: 'roboto';
  60. border: 1px solid ${props => props.theme.lightgrey};
  61. padding: 6px;
  62. margin: 0 8px;
  63. }
  64. `
  65. class Page extends React.Component {
  66. render () {
  67. return (
  68. <ThemeProvider theme={theme}>
  69. <StyledPage>
  70. <Meta />
  71. <GlobalStyle />
  72. <Header />
  73. <Inner>{this.props.children}</Inner>
  74. </StyledPage>
  75. </ThemeProvider>
  76. )
  77. }
  78. }
  79. export default Page