From aeed2bc6e214a96979ee018f34ed2a6faeba2c91 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 21 May 2020 12:18:36 -0400
Subject: [PATCH 1/6] ui: tweak code block color/font

---
 src/components/Markdown/styles.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index aab176e..9af09dc 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -82,7 +82,8 @@ export const MarkdownWrapper = styled.div`
     display: inline;
     border-radius: 3px;
     letter-spacing: 0.25px;
-    color: #ccc;
+    color: #ebedee;
+    font-family: "Oxygen Mono", monospace;
   }
 
   :not(pre) > code[class*="language-"],
@@ -103,13 +104,20 @@ export const MarkdownWrapper = styled.div`
     .token.boolean,
     .token.number,
     .token.function {
-      color: #d48d5d;
+      color: #eca371;
+    }
+
+    .token.property,
+    .token.class-name,
+    .token.constant,
+    .token.symbol {
+      color: #ffd664;
     }
 
     .token.operator,
     .token.entity,
     .token.url {
-      color: #00add9;
+      color: #11beea;
     }
 
     .token.selector,
@@ -117,7 +125,7 @@ export const MarkdownWrapper = styled.div`
     .token.atrule,
     .token.keyword,
     .token.builtin {
-      color: #d1529d;
+      color: #ee5cb2;
     }
   }
 

From 429197693b4ebf232da351f05cbea2f51b81eb17 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 21 May 2020 12:19:51 -0400
Subject: [PATCH 2/6] ui: tweak inline code padding

---
 src/components/Markdown/styles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index 9af09dc..7b9b030 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -78,7 +78,7 @@ export const MarkdownWrapper = styled.div`
 
   code {
     background: ${(props) => props.theme.code.background};
-    padding: 4px 8px;
+    padding: 2px 4px;
     display: inline;
     border-radius: 3px;
     letter-spacing: 0.25px;

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 3/6] 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

From 2008c155f70d06d6a2bfd4f45786897a8f040abc Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 21 May 2020 13:09:11 -0400
Subject: [PATCH 4/6] ui: add spacer bar between h2

---
 src/components/Markdown/styles.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index 79b6e0f..ad6b9f2 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -69,6 +69,32 @@ export const MarkdownWrapper = styled.div`
     line-height: ${BASE_LINE_HEIGHT}px;
   }
 
+  h2 + h3 {
+    margin-top: 0;
+  }
+
+  h3 + h4 {
+    margin-top: 0;
+  }
+
+  h4 + h5 {
+    margin-top: 0;
+  }
+
+  h5 + h6 {
+    margin-top: 0;
+  }
+
+  h2 ~ h2::before {
+    display: block;
+    margin-bottom: ${BASE_LINE_HEIGHT * 2}px;
+    content: "";
+    height: 1px;
+    margin-right: -27px;
+    background: ${(props) =>
+      props.theme.name === "dark" ? "#34414e" : "#a3beda"};
+  }
+
   h1 .anchor svg,
   h2 .anchor svg,
   h3 .anchor svg,

From 73adc8d46d9cb2966e64238e9e5e4c2f6153fc8e Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 22 May 2020 01:29:44 -0400
Subject: [PATCH 5/6] fix: bypass loading Oxygen Mono by broken
 gatsby-plugin-prefetch-google-fonts

---
 gatsby-config.js               | 11 +++++++----
 package-lock.json              |  5 +++++
 package.json                   |  1 +
 src/components/Home/styles.tsx |  2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 883e78f..0902077 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -16,10 +16,6 @@ module.exports = {
             family: `Inter`,
             variants: [`400`, `700`],
           },
-          {
-            family: `Oxygen Mono`,
-            variants: [`400`],
-          },
           {
             family: `Montserrat`,
             variants: [`400`, `700`],
@@ -27,6 +23,13 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: `gatsby-plugin-google-fonts`,
+      options: {
+        fonts: [`Oxygen Mono\:400`],
+        display: "swap",
+      },
+    },
     `gatsby-plugin-layout`,
     {
       resolve: `gatsby-transformer-remark`,
diff --git a/package-lock.json b/package-lock.json
index e98d8ed..d5cb27e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9589,6 +9589,11 @@
         "scroll-to-element": "^2.0.3"
       }
     },
+    "gatsby-plugin-google-fonts": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz",
+      "integrity": "sha512-p1NVkn27GUnDA5qHM+Z4cCcLCJIardzZXMon3640sT4xuL/AZJbsx3HEt2KY/5oZu0UXIkytkxzV2Da4rQeUIg=="
+    },
     "gatsby-plugin-layout": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-layout/-/gatsby-plugin-layout-1.3.1.tgz",
diff --git a/package.json b/package.json
index 7b44390..ac13271 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "classnames": "^2.2.6",
     "gatsby": "^2.22.1",
     "gatsby-plugin-anchor-links": "^1.1.1",
+    "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-layout": "^1.3.1",
     "gatsby-plugin-manifest": "^2.4.6",
     "gatsby-plugin-polished": "^1.0.4",
diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx
index b4f1cad..8438f99 100644
--- a/src/components/Home/styles.tsx
+++ b/src/components/Home/styles.tsx
@@ -123,7 +123,7 @@ export const menuItemStyles = css`
   position: relative;
   transition: color 0.3s;
   margin: 10px 20px 5px 0;
-  font-family: "Oxygen Mono";
+  font-family: "Oxygen Mono", monospace;
 
   &:hover {
     color: #fff;

From a59d05340e083af8281fdee76988e2fe20bc9a0e Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 22 May 2020 01:32:15 -0400
Subject: [PATCH 6/6] ui: make code text smaller

---
 src/components/Markdown/styles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index ad6b9f2..e34e844 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -118,6 +118,7 @@ export const MarkdownWrapper = styled.div`
   pre[class*="language-"] {
     overflow-x: auto;
     background: ${(props) => props.theme.code.background};
+    font-size: 18px;
   }
 
   pre > code[class*="language-"] {