diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-06 00:20:44 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-06 00:20:44 +0800 |
commit | 682b0dd8f4d0425420839211aa254f65a299a29a (patch) | |
tree | a96091693a13c6414d75228ff91462fe62e7dd34 /packages/website/ts/@next/constants/globalStyle.tsx | |
parent | 00dbddc1aafd56c352e7a8905338d81e236b1fa1 (diff) | |
download | dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.tar dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.tar.gz dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.tar.bz2 dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.tar.lz dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.tar.xz dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.tar.zst dexon-sol-tools-682b0dd8f4d0425420839211aa254f65a299a29a.zip |
Implements desktop/mobile font sizing
Diffstat (limited to 'packages/website/ts/@next/constants/globalStyle.tsx')
-rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 28 |
1 files changed, 27 insertions, 1 deletions
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index b22a5c6db..a0b8cfc47 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,4 +1,4 @@ -import { createGlobalStyle, withTheme } from 'styled-components'; +import {createGlobalStyle, withTheme} from 'styled-components'; import {cssReset} from 'ts/@next/constants/cssReset'; interface GlobalStyle { @@ -30,6 +30,32 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` background-color: ${props => props.theme.bgColor}; } + @media (min-width: 768px) { + :root { + --smallHeading: 20px; + --defaultHeading: 28px; + --mediumHeading: 50px; + --largeHeading: 80px; + --smallHeadingHeight: 1.4em; + --defaultHeadingHeight: 1.357142857em; + --mediumHeadingHeight: 1.16em; + --largeHeadingHeight: 1em; + } + } + + @media (max-width: 768px) { + :root { + --smallHeading: 16px; + --defaultHeading: 18px; + --mediumHeading: 32px; + --largeHeading: 46px; + --smallHeadingHeight: 1.4em; // TO DO + --defaultHeadingHeight: 1.357142857em; // TO DO + --mediumHeadingHeight: 1.16em; // TO DO + --largeHeadingHeight: 1em; // TO DO + } + } + body { font-family: 'Formular', sans-serif !important; -webkit-font-smoothing: antialiased; |