Merge pull request #266 from the-programmers-hangout/ui-tweak-typography

ui: tweak typography

gatsby-config.js

@@ -13,13 +13,9 @@ module.exports = {
       options: {
         fonts: [
           {
-            family: `Oxygen`,
+            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`,

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",

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",

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;

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;
@@ -121,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;

src/components/Markdown/styles.tsx

@@ -44,29 +44,57 @@ 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;
+  }
+
+  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,
@@ -78,17 +106,19 @@ 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;
-    color: #ccc;
+    color: #ebedee;
+    font-family: "Oxygen Mono", monospace;
   }
 
   :not(pre) > code[class*="language-"],
   pre[class*="language-"] {
     overflow-x: auto;
     background: ${(props) => props.theme.code.background};
+    font-size: 18px;
   }
 
   pre > code[class*="language-"] {
@@ -103,13 +133,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 +154,7 @@ export const MarkdownWrapper = styled.div`
     .token.atrule,
     .token.keyword,
     .token.builtin {
-      color: #d1529d;
+      color: #ee5cb2;
     }
   }
 

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;

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_FONT_SIZE = 20
-export const BASE_LINE_HEIGHT = 25
+export const BASE_LINE_HEIGHT = 26
-export const MODULAR_SCALE = 1.1487
+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