Page.js 1.6 KB

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