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) {
-  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)};
   }
 `

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;