diff options
| author | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-19 20:30:38 +0800 |
|---|---|---|
| committer | August Skare <post@augustskare.no> | 2018-10-22 19:27:35 +0800 |
| commit | a9b4c1cba87168531752c48b8fe8e58f267eb98c (patch) | |
| tree | e76f5a19443bbd0892d4b0a0d8c6f0a49ad2e093 /packages | |
| parent | 5187017f213dfbcc0231c723c537060a1898f021 (diff) | |
| download | dexon-sol-tools-a9b4c1cba87168531752c48b8fe8e58f267eb98c.tar.gz dexon-sol-tools-a9b4c1cba87168531752c48b8fe8e58f267eb98c.tar.zst dexon-sol-tools-a9b4c1cba87168531752c48b8fe8e58f267eb98c.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 c0cf46673..13ecde7aa 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 { |