From 6db90f9515fc3ef9b2e9c2e675f9d5c115f825ee Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Thu, 21 May 2020 14:48:47 +0100
Subject: [PATCH] add base typographical styles

---
 src/scss/_base.scss | 113 +++++++++++++++++++++++++++++++-------------
 1 file changed, 79 insertions(+), 34 deletions(-)

diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 1c3970b..ad6fea0 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -1,47 +1,52 @@
 :root {
---primary-900: #{$color__primary-900};
---primary-800: #{$color__primary-800};
---primary-700: #{$color__primary-700};
---primary-600: #{$color__primary-600};
---primary-500: #{$color__primary-500};
---primary-400: #{$color__primary-400};
---primary-300: #{$color__primary-300};
---primary-200: #{$color__primary-200};
---primary-100: #{$color__primary-100};
---primary-50: #{$color__primary-50};
+	--primary-900: #{$color__primary-900};
+	--primary-800: #{$color__primary-800};
+	--primary-700: #{$color__primary-700};
+	--primary-600: #{$color__primary-600};
+	--primary-500: #{$color__primary-500};
+	--primary-400: #{$color__primary-400};
+	--primary-300: #{$color__primary-300};
+	--primary-200: #{$color__primary-200};
+	--primary-100: #{$color__primary-100};
+	--primary-50: #{$color__primary-50};
 
---secondary-500: #{$color__secondary-500};
---tertiary-500: #{$color__tertiary-500};
+	--secondary-500: #{$color__secondary-500};
+	--tertiary-500: #{$color__tertiary-500};
 
---accent-900: #{$color__accent-900};
---accent-800: #{$color__accent-800};
---accent-700: #{$color__accent-700};
---accent-600: #{$color__accent-600};
---accent-500: #{$color__accent-500};
---accent-400: #{$color__accent-400};
---accent-300: #{$color__accent-300};
---accent-200: #{$color__accent-200};
---accent-100: #{$color__accent-100};
---accent-50: #{$color__accent-50};
+	--accent-900: #{$color__accent-900};
+	--accent-800: #{$color__accent-800};
+	--accent-700: #{$color__accent-700};
+	--accent-600: #{$color__accent-600};
+	--accent-500: #{$color__accent-500};
+	--accent-400: #{$color__accent-400};
+	--accent-300: #{$color__accent-300};
+	--accent-200: #{$color__accent-200};
+	--accent-100: #{$color__accent-100};
+	--accent-50: #{$color__accent-50};
 
---neutral-900: #{$color__neutral-900};
---neutral-800: #{$color__neutral-800};
---neutral-700: #{$color__neutral-700};
---neutral-600: #{$color__neutral-600};
---neutral-500: #{$color__neutral-500};
---neutral-400: #{$color__neutral-400};
---neutral-300: #{$color__neutral-300};
---neutral-200: #{$color__neutral-200};
---neutral-100: #{$color__neutral-100};
+	--neutral-900: #{$color__neutral-900};
+	--neutral-800: #{$color__neutral-800};
+	--neutral-700: #{$color__neutral-700};
+	--neutral-600: #{$color__neutral-600};
+	--neutral-500: #{$color__neutral-500};
+	--neutral-400: #{$color__neutral-400};
+	--neutral-300: #{$color__neutral-300};
+	--neutral-200: #{$color__neutral-200};
+	--neutral-100: #{$color__neutral-100};
+
+	--white: #{$color__white};
+	--black: #{$color__black};
 
---white: #{$color__white};
---black: #{$color__black};
 }
 
 body {
   font-size: 100%;
+	line-height: 1.6;
+
+  box-sizing: border-box;
+
 	@include font-body;
-  color: $color-body;
+	color: $color-body;
   background-color: $background-color;
 }
 
@@ -54,6 +59,46 @@ h6 {
 	@include font-title();
 }
 
+h1 {
+	font-size: 2em;
+	margin-bottom: 1.6rem;
+	@include font-title(semi-bold);
+}
+
+h2 {
+	font-size: 1.6em;
+	margin-bottom: 1.6rem;
+	@include font-title(semi-bold);
+}
+
+h3 {
+	font-size: 1.4em;
+	margin-bottom: 1.6rem;
+	@include font-title(semi-bold);
+}
+
+h4, h5, h6 {
+	opacity: 0.8;
+	margin-bottom: 0.8rem;
+}
+
+h4 {
+	font-size: 1.2em;
+	@include font-title(semi-bold);
+}
+
+h5 {
+	font-size: 1.2em;
+}
+
+h6 {
+	font-size: 1.1em;
+}
+
+p {
+	margin-bottom: 1.6rem;
+}
+
 a,
 button {
 	@include font-link();