crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive font sizes in typography and globalstyles

Browse Source
This commit is contained in:
Megan Pearson 2018-10-19 14:30:38 +02:00 committed by August Skare
parent 5187017f21
commit a9b4c1cba8
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/dev-tools-pages/ts/components/Typography.tsx
View File

@ -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`

4
packages/dev-tools-pages/ts/globalStyles.tsx
View File

@ -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 {