summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/base-layout.js23
-rw-r--r--src/components/globals.js26
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 = {