Resized illustrations

TODO

@@ -5,3 +5,4 @@
 [ ] Use css variables
 [ ] Dark mode
 [ ] Resize Logo
+[ ] Reading time

src/components/Bio.astro

@@ -1,5 +1,5 @@
 <div>
-  <img src="/assets/profile-pic.png" alt="Headshot of Maxi Ferreira">
+  <img src="/assets/profile-pic.webp" alt="Headshot of Maxi Ferreira">
   <p>
     Hi, I'm <strong>Maxi</strong>. I'm a software engineer and data scientist based in Los Angeles.
     You can follow me on <a href="https://www.twitter.com/Charca" target="_blank">Twitter</a>,
@@ -18,7 +18,6 @@
     width: 100px;
     height: 100px;
     border-radius: 100px;
-    /* border: 3px solid #fd6378; */
     display: block;
     margin-right: 20px;
   }

src/components/Logo.astro

@@ -6,5 +6,5 @@
 </style>
 
 <a href="/">
-  <img alt="Blog Logo" src='/assets/logo.png'>
+  <img alt="Blog Logo" src='/assets/logo.webp'>
 </a>

src/pages/about.astro

@@ -12,7 +12,7 @@ const permalink = 'https://example.com/about';
     <figure>
       <!-- <img src='/assets/rsz_florian-klauer-489-unsplash.jpg' alt='Image of a vintage typewriter.'> -->
       <!-- <figcaption>Photo by <a href="https://unsplash.com/@florianklauer" target="_blank">Florian Klauer</a> on Unsplash</figcaption> -->
-      <img src="/assets/about-illustration.png" alt="Illustration of a notebook">
+      <img src="/assets/about-illustration.webp" alt="Illustration of a notebook">
       <figcaption>
         Illustration by <a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6">Icons 8</a> from <a href="https://icons8.com/illustrations">Ouch!</a>
       </figcaption>

src/pages/index.astro

@@ -14,7 +14,7 @@ const permalink = 'https://example.com/';
     </div>
 
     <figure>
-      <img alt='Illustration of person reading a book' src='/assets/home-illustration.png'>
+      <img alt='Illustration of person reading a book' src='/assets/home-illustration.webp'>
       <figcaption>
         Illustration by <a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6">Icons 8</a> from <a href="https://icons8.com/illustrations">Ouch!</a>
       </figcaption>
@@ -58,16 +58,16 @@ const permalink = 'https://example.com/';
 
   img {
     width: 100%;
-    max-width: 500px;
+    max-width: 550px;
   }
 
-  @media (max-width: 1020px) {
+  @media (max-width: 1200px) {
     p {
       font-size: 1.2em;
     }
 
     img {
-      max-width: 300px;
+      max-width: 400px;
     }
   }
 

src/styles/global.css

@@ -1,3 +1,15 @@
+:root {
+  --background-body: #fff;
+  --text-main: #36393b;
+  --primary-color: #548E9B;
+}
+
+/* :root {
+  --background-body: #36393b;
+  --text-main: #fff;
+  --primary-color: #548E9B;
+} */
+
 *, *:before, *:after {
   box-sizing: border-box;
 }
@@ -7,7 +19,8 @@ body {
   font-family: Merriweather, serif;
   font-size: 16px;
   line-height: 1.6;
-  color: #36393b;
+  background-color: var(--background-body);
+  color: var(--text-main);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -71,18 +84,18 @@ a {
 }
 
 a:hover {
-  color: #fd6378;
+  color: var(--primary-color);
 }
 
 p a {
   text-decoration: none;
-  box-shadow: inset 0 -0.12em 0 #fd6378;
+  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;
 }
 
 p a:hover {
-  box-shadow: inset 0 -1.5em 0 #fd6378;
+  box-shadow: inset 0 -1.5em 0 var(--primary-color);;
   color: #FFF;
 }
 
@@ -91,10 +104,11 @@ img {
 }
 
 hr {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(253, 99, 120, .8), rgba(0, 0, 0, 0));
+  padding: 0;
   border: 0;
-  height: 2px;
+  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');
 }
 
 code {