Implement global and normalization CSS styles

This commit implements global and normalization CSS styles using
"styled-components" `css` API. They extend "modern-normalize" and
define, next to the browser normalization, styles for the available
global themes.

In order to use fonts in "Nord Docs" style & themes (implemented in
GH-54) the basic properties and values have been added and integrated
into these base styles.

To inject global styles, styled-components v4 `createglobalstyle` (1)
API has been used to create a `<GlobalStyle>` component that injects
theme styles and "styled-modern-normalize" (2) globally.

References:
  (1) https://www.styled-components.com/docs/api#createglobalstyle
  (2): https://github.com/arcticicestudio/styled-modern-normalize

Associated epics: GH-51, GH-2
GH-53

src/components/containers/core/Root/Root.jsx

@@ -9,15 +9,42 @@
 
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
+import { createGlobalStyle } from "styled-components";
+import modernNormalize from "styled-modern-normalize";
+
+import { global, normalize } from "styles/theme";
+
+/* eslint-disable import/extensions */
+import "inter-ui";
+import "typeface-rubik";
+import "typeface-source-code-pro";
+/* eslint-enable import/extensions */
+
+/**
+ * A React component that injects global CSS inline styles in page headers.
+ *
+ * @see https://www.styled-components.com/docs/api#createglobalstyle
+ * @since 0.2.0
+ */
+const GlobalStyle = createGlobalStyle`
+  ${modernNormalize};
+  ${global};
+  ${normalize};
+`;
 
 /**
- * The root container.
+ * The root container with injected global CSS styles.
  *
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
  * @since 0.1.0
  */
-const Root = ({ children }) => <Fragment>{children}</Fragment>;
+const Root = ({ children }) => (
+  <Fragment>
+    <GlobalStyle />
+    <Fragment>{children}</Fragment>
+  </Fragment>
+);
 
 Root.propTypes = {
   children: PropTypes.node.isRequired

src/styles/theme/global.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Global CSS styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.2.0
+ */
+
+import { css } from "styled-components";
+
+import typography from "./typography";
+
+const global = css`
+  html {
+    font-size: ${typography.sizes.root}px;
+  }
+
+  body {
+    font-family: ${typography.typefaces.main};
+    font-size: ${typography.sizes.msBase}rem;
+    font-weight: ${typography.sizes.weight};
+    line-height: ${typography.sizes.lineHeight};
+    scroll-behavior: smooth;
+  }
+`;
+
+export default global;

src/styles/theme/index.js

@@ -14,10 +14,12 @@
  * @since 0.2.0
  */
 
+import global from "./global";
+import normalize from "./normalize";
 import typography from "./typography";
 
 const theme = { typography };
 
-export { typography };
+export { global, normalize, typography };
 
 export default theme;

src/styles/theme/normalize.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Custom normalizations for browser default CSS styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.2.0
+ */
+
+import { css } from "styled-components";
+
+const normalize = css`
+  nav ol,
+  nav ul {
+    /* Don't decorate list items. */
+    list-style: none;
+  }
+
+  textarea {
+    /* Only allow veritcal resizing to prevent layout shifting. */
+    resize: vertical;
+  }
+`;
+
+export default normalize;

src/styles/theme/typography.js

@@ -11,6 +11,7 @@
  * @file Typefaces and font styles.
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
+ * @see https://material.io/design/typography/understanding-typography.html
  * @since 0.2.0
  */
 
@@ -28,9 +29,9 @@
  */
 const typefaces = {
   main: "Rubik",
+  monospace: "Source Code Pro",
   straight: "Inter UI",
-  straightVariable: "Inter UI var",
-  monospace: "Source Code Pro"
+  straightVariable: "Inter UI var"
 };
 
 /**
@@ -43,8 +44,10 @@ const typefaces = {
  * @type {object}
  */
 const sizes = {
+  lineHeight: 1.5,
   msBase: 1,
-  msBaseUnit: "em",
+  msBaseUnit: "rem",
+  msName: "majorSecond",
   msRatio: 1.125,
   root: 16,
   rootUnit: "px",