feat: setup resource title & extract necessary helpers

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) {
+function modularScaleCSS(power: number) {
-  return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power)
+  const { fontSize, lineHeight } = modularScale(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
 
   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)};
   }
 `

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;

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,