roboto mono and tilewind

Author: WojciechCendrzak

package.json

@@ -14,6 +14,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "babel-plugin-styled-components": "^1.12.0",
     "beprofiler": "^0.2.3",
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
@@ -23,7 +24,10 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "remark": "^12.0.0",
-    "remark-html": "^12.0.0"
+    "remark-html": "^12.0.0",
+    "styled-components": "^5.3.0",
+    "tailwindcss": "^2.1.2",
+    "twin.macro": "^2.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",

src/components/layout.tsx

@@ -25,6 +25,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, home }) => {
         />
         <meta name="og:title" content={translate(translationKeys.site.title)} />
         <meta name="twitter:card" content="summary_large_image" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto Mono" />
       </Head>
       <header className={styles.header}>
         {home ? (

src/styles/global.css

@@ -2,8 +2,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-    Helvetica Neue, sans-serif;
+  font-family: Roboto Mono, sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }