diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index 8113cbb..caef2c2 100644 --- a/src/components/Markdown/styles.tsx +++ b/src/components/Markdown/styles.tsx @@ -2,21 +2,12 @@ import styled, { css } from "styled-components" import { BASE_FONT_SIZE, BASE_LINE_HEIGHT, - MODULAR_SCALE, fontFamily, + modularScale, } from "../../design/typography" -function modularFontSize(power: number) { - return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power) -} - -function modularScale(power: number) { - const fontSize = modularFontSize(power) - - // attempt to fit line-height a little larger than font-size - const paddedLineHeight = fontSize * 1.1 - const lineHeight = - paddedLineHeight - (paddedLineHeight % BASE_LINE_HEIGHT) + BASE_LINE_HEIGHT +function modularScaleCSS(power: number) { + const { fontSize, lineHeight } = modularScale(power) return css` font-size: ${fontSize}px; @@ -53,26 +44,26 @@ export const MarkdownWrapper = styled.div` } h1 { - ${modularScale(6)}; + ${modularScaleCSS(6)}; } h2 { - ${modularScale(5)}; + ${modularScaleCSS(5)}; } h3 { - ${modularScale(4)}; + ${modularScaleCSS(4)}; } h4 { - ${modularScale(3)}; + ${modularScaleCSS(3)}; } h5 { - ${modularScale(2)}; + ${modularScaleCSS(2)}; } h6 { - ${modularScale(1)}; + ${modularScaleCSS(1)}; } ` diff --git a/src/components/ResourceHeader/styles.tsx b/src/components/ResourceHeader/styles.tsx index 3edef12..71162d0 100644 --- a/src/components/ResourceHeader/styles.tsx +++ b/src/components/ResourceHeader/styles.tsx @@ -1,4 +1,5 @@ import styled from "styled-components" +import { fontFamily, modularScale } from "../../design/typography" export const ResourceHeaderWrapper = styled.div` border-bottom: 1px solid #dbdbdb; @@ -11,7 +12,12 @@ export const Top = styled.div` align-items: center; ` -export const Title = styled.h1`` +export const Title = styled.h1` + font-family: ${fontFamily.header}; + font-size: ${modularScale(6).fontSize}px; + line-height: ${modularScale(6).lineHeight}px; + letter-spacing: -1.75px; +` export const AuthorAvatars = styled.div` margin-right: 16px; diff --git a/src/design/typography.ts b/src/design/typography.ts index f91a1d6..3d6924d 100644 --- a/src/design/typography.ts +++ b/src/design/typography.ts @@ -5,6 +5,24 @@ export const BASE_FONT_SIZE = 18 export const BASE_LINE_HEIGHT = 25 export const MODULAR_SCALE = 1.1487 +function modularFontSize(power: number) { + return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power) +} + +export function modularScale(power: number) { + const fontSize = modularFontSize(power) + + // attempt to fit line-height a little larger than font-size + const paddedLineHeight = fontSize * 1.1 + const lineHeight = + paddedLineHeight - (paddedLineHeight % BASE_LINE_HEIGHT) + BASE_LINE_HEIGHT + + return { + fontSize, + lineHeight, + } +} + export const fontFamily = { header: FONT_MONTSERRAT, body: FONT_OXYGEN,