Responsive font sizes in typography and globalstyles

2018-10-19 14:30:38 +02:00
parent 5187017f21
commit a9b4c1cba8
2 changed files with 11 additions and 0 deletions
--- 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`