From ce15d9fcec8b3c85e3a08553321aa942a3eb4e2c Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Tue, 29 Dec 2020 19:25:48 +0200
Subject: [PATCH] Regenerate GlobalStyles

---
 src/pages/_app.tsx | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0cb6082..548e92b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,26 +5,47 @@ import Head from "next/head";
 import styled, { createGlobalStyle } from "styled-components";
 import { colors } from "@theme/colors";
 
-const fontFamily = "'Montserrat', sans-serif;"
+const fontFamily = "'Montserrat', sans-serif";
+const fontSize = 12; // 16px
+const lineHeight = 1.5;
 
 const GlobalCommonStyles = createGlobalStyle`
 * {
   box-sizing: border-box;
 }
 
-html,
-body {
+html {
   font-family: ${fontFamily};
-  font-size: 12pt;
-  background-color: ${colors.darkBlue};
-  height: 100%;
+  /* 12px */
+  font-size: ${fontSize * 0.75}pt;
+  line-height: ${lineHeight};
+
+  @media screen and (min-width: 1200px) {
+    /* 16px */
+    font-size: ${fontSize}pt;
+  }
+
+  @media screen and (min-width: 1920px) {
+    /* 20px */
+    font-size: ${fontSize * 1.25}pt;
+  }
+
+  @media screen and (min-width: 2560px) {
+    /* 32px */
+    font-size: ${fontSize * 2}pt;
+  }
+}
+
+body {
   padding: 0;
-  margin: auto !important;
+  background-color: ${colors.darkBlue};
 }
 
 p {
   font-size: 1.2rem;
   font-weight: 300;
+  word-break: break-word;
+  hyphens: auto;
 
   &.large {
     font-size: 2rem;
@@ -32,6 +53,7 @@ p {
 }
 
 h1 {
+  line-height: 1.15;
   font-size: 2.5rem;
   font-weight: 200;
   margin-block-start: 0;
@@ -56,7 +78,7 @@ h2 {
 }
 
 h3 {
-  font-size: 1.5rem;
+  font-size: 2rem;
   font-weight: 200;
   margin-block-start: 0;
   margin-block-end: 0;
@@ -103,9 +125,7 @@ h6 {
   }
 }
 
-/* TODO: List item style » */
 li {
-  font-size: 1.2rem;
   font-weight: 600;
 
   &.large {