Pulls out typography variables

3 files changed, 16 insertions, 11 deletions

diff --git a/public/css/variables/index.css b/public/css/variables/index.css
index 5da1544..4494c47 100644
--- a/public/css/variables/index.css
+++ b/public/css/variables/index.css
@@ -1,2 +1,3 @@
 @import 'colours.css';
-@import 'spacing.css';
\ No newline at end of file
+@import 'spacing.css';
+@import 'typography.css';
\ No newline at end of file
diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css
new file mode 100644
index 0000000..599f4ea
--- /dev/null
+++ b/public/css/variables/typography.css
@@ -0,0 +1,12 @@
+:root {
+  --font-size-0: 14px;
+  --font-size-1: 18px;
+  --font-size-2: 24px;
+  --font-size-3: 32px;
+  --font-size-4: 44px;
+  --font-size-5: 54px;
+  --font-size-6: 72px;
+
+  --font-serif: Alegreya, 'Goudy Old Style', Garamond, serif;
+  --font-sans-serif: 'Alegreya Sans', Lato, Calibri, 'sans-serif';
+}
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 531a91e..b6daf68 100644
--- a/public/main.css
+++ b/public/main.css
@@ -8,16 +8,8 @@
   --breakpoint-sm: 640px;
   --breakpoint-lg: 1280px;
 
-  --font-size-0: 14px;
-  --font-size-1: 18px;
-  --font-size-2: 24px;
-  --font-size-3: 32px;
-  --font-size-4: 44px;
-  --font-size-5: 54px;
-  --font-size-6: 72px;
-
   scroll-behavior: smooth;
-  font-family: 'Alegreya Sans', Lato, Calibri, 'sans-serif';
+  font-family: var(--font-sans-serif);
   font-size: var(--font-size-1);
   font-weight: 400;
   letter-spacing: 0.03rem;
@@ -59,7 +51,7 @@ h1,
 h2,
 h3,
 h4 {
-  font-family: Alegreya, 'Goudy Old Style', Garamond, serif;
+  font-family: var(--font-serif);
 }
 
 .title {