From 2d267a8064da894c6ccea48412674e9fc7ef4dc1 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 21 May 2020 12:43:56 -0400
Subject: [PATCH] ui: tweak modular scale, move from oxygen to inter

---
 gatsby-config.js                        |  2 +-
 src/components/DiscordButton/styles.tsx |  2 +-
 src/components/Home/styles.tsx          |  2 ++
 src/components/Markdown/styles.tsx      | 24 +++++++++++++-----------
 src/components/Sidebar/styles.tsx       |  2 ++
 src/design/typography.ts                | 10 +++++-----
 6 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index ee55a7a..883e78f 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -13,7 +13,7 @@ module.exports = {
       options: {
         fonts: [
           {
-            family: `Oxygen`,
+            family: `Inter`,
             variants: [`400`, `700`],
           },
           {
diff --git a/src/components/DiscordButton/styles.tsx b/src/components/DiscordButton/styles.tsx
index 39c8abf..6b9dcd4 100644
--- a/src/components/DiscordButton/styles.tsx
+++ b/src/components/DiscordButton/styles.tsx
@@ -5,7 +5,7 @@ export const DiscordButtonWrapper = styled.a`
   margin-top: 32px;
   display: flex;
   align-items: center;
-  font-family: "Oxygen", sans-serif;
+  font-family: "Montserrat", sans-serif;
   font-size: 24px;
   font-weight: 700;
   text-decoration: none;
diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx
index 43411be..b4f1cad 100644
--- a/src/components/Home/styles.tsx
+++ b/src/components/Home/styles.tsx
@@ -1,6 +1,7 @@
 import { Link } from "gatsby"
 import Particles from "react-particles-js"
 import styled, { css } from "styled-components"
+import { fontFamily } from "../../design/typography"
 import TPHLogo from "../../images/tph-logo.svg"
 
 export const HomeWrapper = styled.header`
@@ -24,6 +25,7 @@ export const TitleWrapper = styled.div`
 
 export const Title = styled.h1`
   margin: 0;
+  font-family: ${fontFamily.header};
   font-weight: 700;
   font-size: 88px;
   text-transform: uppercase;
diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index 7b9b030..79b6e0f 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -44,29 +44,31 @@ export const MarkdownWrapper = styled.div`
   }
 
   h1 {
-    ${modularScaleCSS(6)};
-  }
-
-  h2 {
-    ${modularScaleCSS(5)};
-  }
-
-  h3 {
     ${modularScaleCSS(4)};
   }
 
-  h4 {
+  h2 {
     ${modularScaleCSS(3)};
+
+    @media screen and (min-width: 1440px) {
+      margin-left: -27px;
+    }
   }
 
-  h5 {
+  h3 {
     ${modularScaleCSS(2)};
   }
 
-  h6 {
+  h4 {
     ${modularScaleCSS(1)};
   }
 
+  h5,
+  h6 {
+    font-size: ${BASE_FONT_SIZE}px;
+    line-height: ${BASE_LINE_HEIGHT}px;
+  }
+
   h1 .anchor svg,
   h2 .anchor svg,
   h3 .anchor svg,
diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx
index 4a3d152..a3dc57f 100644
--- a/src/components/Sidebar/styles.tsx
+++ b/src/components/Sidebar/styles.tsx
@@ -1,6 +1,7 @@
 import { Link } from "gatsby"
 import styled, { css } from "styled-components"
 import { transparentize } from "polished"
+import { fontFamily } from "../../design/typography"
 
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;
@@ -36,6 +37,7 @@ export const Title = styled(Link)`
   font-weight: 700;
   padding: 20px 0 0 20px;
   text-decoration: none;
+  font-family: ${fontFamily.header};
 
   &:hover {
     opacity: 0.85;
diff --git a/src/design/typography.ts b/src/design/typography.ts
index 3d6924d..1fd74e4 100644
--- a/src/design/typography.ts
+++ b/src/design/typography.ts
@@ -1,9 +1,9 @@
-const FONT_OXYGEN = "Oxygen, sans-serif"
+const FONT_INTER = "Inter, sans-serif"
 const FONT_MONTSERRAT = "Montserrat, sans-serif"
 
-export const BASE_FONT_SIZE = 18
-export const BASE_LINE_HEIGHT = 25
-export const MODULAR_SCALE = 1.1487
+export const BASE_FONT_SIZE = 20
+export const BASE_LINE_HEIGHT = 26
+export const MODULAR_SCALE = 1.2
 
 function modularFontSize(power: number) {
   return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power)
@@ -25,7 +25,7 @@ export function modularScale(power: number) {
 
 export const fontFamily = {
   header: FONT_MONTSERRAT,
-  body: FONT_OXYGEN,
+  body: FONT_INTER,
 }
 
 export default fontFamily