u-fit/frontend/src/styles/global.ts

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');*/
  @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&family=Open+Sans&family=Source+Code+Pro&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: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
  }

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

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

    min-height: 100vh;

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

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

  footer {
    grid-area: footer;
  }

  /* Use bold font for headers */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  th,
  legend {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
  }

  /* Use monospace font for pre */
  pre {
    font-family: 'Source Code Pro', monospace;
  }

  form input,
  form select,
  form textbox {
    display: block;
    width: 100%;
    margin: 0.3em auto;
    padding: 0.3em;
    border: 2px solid ${theme.colors.formBackground}00;
    color: ${theme.colors.formColor};
    background-color: ${theme.colors.formBackground}22;
    transition: all 250ms ease-in-out;
  }

  form input:focus,
  form select:focus,
  form textbox:focus {
    color: ${theme.colors.formHighlight};
    background-color: ${theme.colors.formHighlightBackground}22;
    border-bottom: 2px solid ${theme.colors.formHighlightBackground}22;
  }

  form input.error,
  form select.error,
  form textbox.error {
    color: ${theme.colors.formError};
    background-color: ${theme.colors.formErrorBackground}22;
    border-bottom: 2px solid ${theme.colors.formErrorBackground}22;
  }

  button {
    display: block;
    margin: 0.8em auto;
    padding: 0.5em 1em;
    border: none;
    background-color: ${theme.colors.buttonBackground};
    color: ${theme.colors.button};
  }

  form fieldset {
    border: none;
    margin: none;
    padding: 1em 0.3em;
    background: ${theme.colors.background};
    box-shadow: ${theme.bsSmall};
  }

  form fieldset legend {
    font-size: 120%;
    padding: 0.5em;
    box-shadow: ${theme.bsSmall};
  }

  @media (min-width: ${theme.midsize}) {
    fieldset {
      padding: 2em 3em;
    }
  }
`

export default GlobalStyle