import theme from './theme'
import css from 'styled-jsx/css'

const GlobalStyle = css.global`
  /* normalize.css is imported in meta.js */

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,900&display=swap');

  /* Use border-box sizing instead of context-box.
   This includes border and padding in the calculation.

   Also define a default font. */
  html {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    /*font-size: 12px;*/
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  #__next {
    display: grid;
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
    grid-template-rows: auto auto 1fr minmax(180px, auto);

    max-width: ${theme.maxWidth};
    min-height: 100vh;
    margin: 0 auto;

    background: ${theme.colors.offWhite};
    color: ${theme.colors.black};
    box-shadow: ${theme.bs};
  }

  @media (min-width: 500px) {
    body #__next {
      grid-template-areas:
        'header nav'
        'main main'
        'footer footer';
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr minmax(75px, auto);
    }
  }

  header {
    grid-area: header;
  }
  nav {
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  footer {
    grid-area: footer;
  }

  /* Use bold font for headers */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 900;
  }

  /* Use monospace font for pre */
  pre {
    font-family: 'Roboto Mono', monospace;
  }
`

export default GlobalStyle
