aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-06 00:20:44 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-06 00:20:44 +0800
commit682b0dd8f4d0425420839211aa254f65a299a29a (patch)
treea96091693a13c6414d75228ff91462fe62e7dd34 /packages/website/ts
parent00dbddc1aafd56c352e7a8905338d81e236b1fa1 (diff)
downloaddexon-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')
-rw-r--r--packages/website/ts/@next/components/text.tsx26
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx28
2 files changed, 29 insertions, 25 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 0be24d233..7d50530f6 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -19,14 +19,6 @@ interface ParagraphProps extends BaseTextInterface {
isMuted?: boolean | number;
}
-interface HeadingSizes {
- large: string;
- medium: string;
- default: string;
- small: string;
- [key: string]: string;
-}
-
interface ParagraphSizes {
default: string;
medium: string;
@@ -34,20 +26,6 @@ interface ParagraphSizes {
[key: string]: string;
}
-const HEADING_SIZES: HeadingSizes = {
- small: '20px',
- default: '28px',
- medium: '50px',
- large: '80px',
-};
-
-const HEADING_LINE_HEIGHTS: HeadingSizes = {
- small: '1.4em',
- default: '1.357142857em',
- medium: '1.16em',
- large: '1em',
-};
-
const PARAGRAPH_SIZES: ParagraphSizes = {
default: '18px',
small: '14px',
@@ -57,9 +35,9 @@ const PARAGRAPH_SIZES: ParagraphSizes = {
const StyledHeading = styled.h1<HeadingProps>`
color: ${props => props.color || props.theme.textColor};
- font-size: ${props => HEADING_SIZES[props.size || 'default']};
+ font-size: ${props => `var(--${props.size}Heading)`};
padding: ${props => props.padding && getCSSPadding(props.padding)};
- line-height: ${props => HEADING_LINE_HEIGHTS[props.size || 'default']};
+ line-height: ${props => `var(--${props.size}HeadingHeight)`};
margin-bottom: ${props => !props.isNoMargin && '30px'};
text-align: ${props => props.isCentered && 'center'};
font-weight: 300;
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;