From 9cbe6de22fa957a63760dbbc85e0802609ae7e8e Mon Sep 17 00:00:00 2001
From: Maxi Ferreira <charca@gmail.com>
Date: Fri, 12 Aug 2022 11:30:45 -0700
Subject: [PATCH] Font optim

---
 src/components/BaseHead.astro |  2 +-
 src/components/Footer.astro   |  3 +--
 src/components/Logo.astro     |  2 +-
 src/components/Nav.astro      | 10 ++++++--
 src/pages/index.astro         |  2 +-
 src/styles/global.css         | 45 ++++++++++++++++++++++-------------
 6 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 1376fa2..b8894fb 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -40,7 +40,7 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <!-- Fonts -->
 <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">
+<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f8dedf1..53435e4 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,8 +9,7 @@
 <style>
   footer {
     color: var(--text-secondary);
-    font-size: 1em;
-    font-family: var(--font-family-sans);
+    font-size: .8em;
     margin: 1em auto;
     max-width: 1400px;
     padding: 1em 2em;
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
index b065048..43b9a2f 100644
--- a/src/components/Logo.astro
+++ b/src/components/Logo.astro
@@ -6,5 +6,5 @@
 </style>
 
 <a href="/">
-  <img alt="Blog Logo" src='/assets/logo.webp'>
+  <img alt="Blog Logo" src="/assets/logo.webp" width="75" height="50">
 </a>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index f5091bb..2392972 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -5,7 +5,7 @@ const { current = '' } = Astro.props;
 
 <style>
   nav {
-    align-items: flex-end;
+    align-items: center;
     display: flex;
     flex: 1;
     font-family: var(--font-family-sans);
@@ -47,11 +47,17 @@ const { current = '' } = Astro.props;
   .selected::before {
     background: var(--primary-color);
   }
+
+  .theme-toggle-container {
+    width: 75px;
+  }
 </style>
 
 <nav>
   <a class={current === "" ? "selected" : ""} href='/'>home</a>
   <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
   <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
-  <ThemeToggleButton client:load />
+  <div class="theme-toggle-container">
+    <ThemeToggleButton client:load />
+  </div>
 </nav>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b3786d3..4312740 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,7 +14,7 @@ const permalink = Astro.site.href;
     </div>
 
     <figure>
-      <img class="hero-image" alt="Illustration of person reading a book" src="/assets/home-illustration.webp" width="550">
+      <img class="hero-image" alt="Illustration of person reading a book" src="/assets/home-illustration.webp" width="550" height="466">
       <figcaption>
         Illustration by
         <a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6" target="_blank" rel="noopener">Icons 8</a>
diff --git a/src/styles/global.css b/src/styles/global.css
index 3c2015c..87dfb76 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,7 +2,7 @@
   --background-body: #fff;
   --text-main: #36393b;
   --text-secondary: #6b6f72;
-  --primary-color: #548E9B;
+  --primary-color: #548e9b;
   --font-family-serif: Merriweather, serif;
   --font-family-sans: 'Fira Sans', sans-serif;
 }
@@ -11,10 +11,12 @@
   --background-body: #202122;
   --text-main: #fff;
   --text-secondary: #ccc;
-  --primary-color: #548E9B;
+  --primary-color: #548e9b;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: border-box;
 }
 
@@ -27,7 +29,12 @@ body {
   color: var(--text-main);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-family-sans);
   font-weight: 700;
   line-height: 1.2;
@@ -61,13 +68,16 @@ h6 {
   font-size: 1.2em;
 }
 
-p, ul, ol {
+p,
+ul,
+ol {
   font-size: 1.3rem;
   line-height: 1.75em;
   margin: 1.2em 0;
 }
 
-ol, ul {
+ol,
+ul {
   padding-left: 2rem;
   -webkit-padding-start: 5%;
   -webkit-padding-end: 5%;
@@ -84,7 +94,7 @@ li p {
 
 a {
   color: inherit;
-  transition: color linear .15s;
+  transition: color linear 0.15s;
 }
 
 a:hover {
@@ -93,18 +103,19 @@ a:hover {
 
 p a {
   text-decoration: none;
-  box-shadow: inset 0 -0.12em 0 var(--primary-color);;
-  -webkit-transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
-  transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
+  box-shadow: inset 0 -0.12em 0 var(--primary-color);
+  -webkit-transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 p a:hover {
-  box-shadow: inset 0 -1.5em 0 var(--primary-color);;
-  color: #FFF;
+  box-shadow: inset 0 -1.5em 0 var(--primary-color);
+  color: #fff;
 }
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 hr {
@@ -112,7 +123,7 @@ hr {
   border: 0;
   height: 10px;
   margin: 40px auto;
-  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width=\'20\' height=\'10\'  viewBox=\'0 0 20 10\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-miterlimit=\'10\'%3e%3cpath fill=\'none\' d=\'M0 0h20v10H0z\'/%3e%3cclipPath id=\'a\'%3e%3cpath d=\'M0 0h20v10H0z\'/%3e%3c/clipPath%3e%3cg clip-path=\'url(%23a)\'%3e%3cpath d=\'M20 7.384c-4.999-.001-5-4.768-9.999-4.768C5 2.616 5 7.384 0 7.384\' fill=\'none\' stroke-width=\'3\' stroke=\'%23548E9B\'/%3e%3c/g%3e%3c/svg%3e');
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='10'  viewBox='0 0 20 10' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-miterlimit='10'%3e%3cpath fill='none' d='M0 0h20v10H0z'/%3e%3cclipPath id='a'%3e%3cpath d='M0 0h20v10H0z'/%3e%3c/clipPath%3e%3cg clip-path='url(%23a)'%3e%3cpath d='M20 7.384c-4.999-.001-5-4.768-9.999-4.768C5 2.616 5 7.384 0 7.384' fill='none' stroke-width='3' stroke='%23548E9B'/%3e%3c/g%3e%3c/svg%3e");
 }
 
 code {
@@ -127,8 +138,8 @@ code {
 }
 
 pre {
-  border-radius: 8px!important;
-  margin: 1.2em 0!important;
+  border-radius: 8px !important;
+  margin: 1.2em 0 !important;
 }
 
 pre code {
@@ -248,7 +259,9 @@ input[name='theme-toggle'] {
     font-size: 14px;
   }
 
-  p, ul, ol {
+  p,
+  ul,
+  ol {
     font-size: 1.2rem;
     margin: 1em 0;
   }