diff options
| author | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-19 20:30:38 +0800 |
|---|---|---|
| committer | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-19 20:30:38 +0800 |
| commit | 9a024fdacf885cbeb1d070064b0ab2314a092f13 (patch) | |
| tree | e934449fa48eb46df55ae4f4b00c017d79851e3e /packages | |
| parent | 135a623b1f783a24ff4885a3dd0209fcaeb85678 (diff) | |
| download | dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.tar dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.tar.gz dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.tar.bz2 dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.tar.lz dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.tar.xz dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.tar.zst dexon-sol-tools-9a024fdacf885cbeb1d070064b0ab2314a092f13.zip | |
Responsive font sizes in typography and globalstyles
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Typography.tsx | 7 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/globalStyles.tsx | 4 |
2 files changed, 11 insertions, 0 deletions
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 { |