Customize font size & line-height in theme

2 files changed, 42 insertions, 7 deletions

diff --git a/src/components/base-layout.js b/src/components/base-layout.js
index cb95f70..40d892b 100644
--- a/src/components/base-layout.js
+++ b/src/components/base-layout.js
@@ -5,7 +5,26 @@ import { Global, css } from '@emotion/core'
 
 import { Container } from './container'
 
-const globalStyles = ({ colours, transitions, fontStack, baseFontSize }) => css`
+const globalStyles = ({
+  colours,
+  transitions,
+  fontStack,
+  baseFontSize,
+  fontSizes,
+  lineHeight
+}) => css`
+  h1 {
+    font-size: ${fontSizes.h1};
+  }
+  h2 {
+    font-size: ${fontSizes.h2};
+  }
+  h3 {
+    font-size: ${fontSizes.h3};
+  }
+  h4 {
+    font-size: ${fontSizes.h4};
+  }
   *,
   html,
   body {
@@ -26,7 +45,7 @@ const globalStyles = ({ colours, transitions, fontStack, baseFontSize }) => css`
   }
   p,
   li {
-    line-height: 2em;
+    line-height: ${lineHeight};
   }
   li {
     list-style-position: outside;
diff --git a/src/components/globals.js b/src/components/globals.js
index 407a003..1fd2178 100644
--- a/src/components/globals.js
+++ b/src/components/globals.js
@@ -40,20 +40,29 @@ const breakpoints = [
   }
 ]
 
+const fontSizes = {
+  h1: '2em',
+  h2: '1.5em',
+  h3: '1.3em',
+  h4: '1.1em'
+}
+
 export const mainTheme = {
   colours,
   fontStack,
   transitions,
   margins,
   breakpoints,
-  radius
+  radius,
+  fontSizes,
+  lineHeight: 2
 }
 
 const highContrastTheme = {
   ...mainTheme,
   colours: {
     background: '#ffffff',
-    main: '#000000'
+    main: '#707070'
   }
 }
 
@@ -62,9 +71,16 @@ export const cvTheme = {
   margins: {
     xsm: 2,
     sm: 2,
-    md: 5,
-    lg: 10
-  }
+    md: 3,
+    lg: 3
+  },
+  fontSizes: {
+    h1: '1.3em',
+    h2: '1.2em',
+    h3: '1.1em',
+    h4: '1.05em'
+  },
+  lineHeight: 1.4
 }
 
 export const themes = {