From 00de7a5d0066092cd964a0a47615b4d2d96cf548 Mon Sep 17 00:00:00 2001
From: Maxi Ferreira <charca@gmail.com>
Date: Tue, 30 Nov 2021 21:52:32 -0800
Subject: [PATCH] Added fonts

---
 TODO                             |  3 ++-
 src/components/BaseHead.astro    |  5 +++--
 src/components/Footer.astro      |  2 +-
 src/components/Nav.astro         |  2 +-
 src/layouts/BlogPostLayout.astro |  2 +-
 src/pages/blog/index.astro       |  6 +-----
 src/styles/global.css            | 10 ++++++----
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO b/TODO
index 83d17f8..52108f7 100644
--- a/TODO
+++ b/TODO
@@ -1,9 +1,10 @@
 [ ] Update README
 [ ] Install Fonts
-[ ] Style Code blocks
+[x] Style Code blocks
 [x] Highlight current navigation item
 [ ] Use css variables
 [ ] Dark mode
 [x] Resize Logo
 [ ] Reading time
 [x] Bio component
+[ ] Add social image
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index dc9748c..1d67bac 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -33,8 +33,9 @@ const { title, description, permalink } = Astro.props;
 <meta property="twitter:image" content="https://astro.build/social.jpg?v=1" />
 
 <!-- Fonts -->
-<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
 <!-- Styles -->
 <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index e489684..e6d0b08 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -10,7 +10,7 @@
   footer {
     color: #AAA;
     font-size: 1em;
-    font-family: Rubik, sans-serif;
+    font-family: var(--font-family-sans);
     margin: 1em auto;
     max-width: 1400px;
     padding: 1em 2em;
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 0ffa5e9..0de3a9e 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -7,7 +7,7 @@ const { current = '' } = Astro.props;
     align-items: flex-end;
     display: flex;
     flex: 1;
-    font-family: Rubik, sans-serif;
+    font-family: var(--font-family-sans);
     font-weight: 700;
     justify-content: flex-end;
     text-transform: uppercase;
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index d6a3542..db40b43 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -33,7 +33,7 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
   header p {
     color: #AAA;
     text-transform: uppercase;
-    font-family: Rubik, sans-serif;
+    font-family: var(--font-family-sans);
     font-weight: 600;
   }
 
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index c24a399..5ebcab6 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,10 +1,6 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
-interface MarkdownFrontmatter {
-  publishDate: number;
-}
-
 const title = 'Blog';
 const description = 'Latest articles.';
 const permalink = 'https://example.com/blog';
@@ -36,7 +32,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
 <style>
   h2,
   .post-item-footer {
-    font-family: Rubik, sans-serif;
+    font-family: var(--font-family-sans);
     font-weight: 700;
   }
 
diff --git a/src/styles/global.css b/src/styles/global.css
index bfa9ba6..20fce27 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,8 @@
   --background-body: #fff;
   --text-main: #36393b;
   --primary-color: #548E9B;
+  --font-family-serif: Merriweather, serif;
+  --font-family-sans: 'Fira Sans', sans-serif;
 }
 
 /* :root {
@@ -16,7 +18,7 @@
 
 body {
   margin: 0;
-  font-family: Merriweather, serif;
+  font-family: var(--font-family-serif);
   font-size: 16px;
   line-height: 1.6;
   background-color: var(--background-body);
@@ -24,14 +26,14 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: Rubik, sans-serif;
+  font-family: var(--font-family-sans);
   font-weight: 700;
   line-height: 1.2;
   margin: 0 0 0.5em 0;
 }
 
 h1 {
-  font-family: Merriweather, serif;
+  font-family: var(--font-family-serif);
   font-size: 4em;
   margin: 0 0 1em 0;
 }
@@ -162,7 +164,7 @@ figure {
 
 table {
   border-collapse: collapse;
-  font-family: Rubik, sans-serif;
+  font-family: var(--font-family-sans);
   font-size: 1.125em;
   margin: 2em 0;
 }