From 9a024fdacf885cbeb1d070064b0ab2314a092f13 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:30:38 +0200
Subject: Responsive font sizes in typography and globalstyles

---
 packages/dev-tools-pages/ts/components/Typography.tsx | 7 +++++++
 packages/dev-tools-pages/ts/globalStyles.tsx          | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 9251d31b4..5f9587335 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -1,17 +1,24 @@
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const Alpha = styled.h2`
     font-size: 1.75rem;
     line-height: 1;
+
+    ${media.small`font-size: 1.5rem;`};
 `;
 
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
+
+    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
     font-size: 1rem;
+
+    ${media.small`font-size: 0.875rem;`};
 `;
 
 const Small = styled.p`
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a2a1769a..e8ef630da 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { media } from './variables';
 import styledNormalize from 'styled-normalize';
 import hljsStyles from 'highlight.js/styles/github-gist.css';
 
@@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle`
     font-weight: 300;
     font-size: 1rem;
     line-height: 1.8;
+
+    ${media.small`font-size: 0.875rem;`};
+
   }
 
   a {
-- 
cgit v1.2.3