Snippets
Global styles

Global styles

Create a file called global.ts within the styles folder and paste the following code. Under GlobalStyle, general style rules are defined for the entire project.

import { createGlobalStyle } from 'styled-components';
import { normalize } from 'styled-normalize';

const GlobalStyle = createGlobalStyle`
  ${normalize}

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
    text-rendering: optimizeLegibility;
	  font-feature-settings: "liga","kern"
	  font-variant-numeric: proportional-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  #__next {
    display: flex;
    min-height: 100vh;

    > * {
      flex: 1;
    }
  }

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


  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  li,
  figure,
  figcaption,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul {
  list-style: none;
  }

  ul,
  ol,
  dl,
  dd,
  menu {
    padding: 0;
  }

  fieldset {
    padding: 0;
    margin: 0;
    border: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
`;

export default GlobalStyle;