Fix small screen logo, typo

src/components/Header.astro

@@ -28,6 +28,18 @@ const { activeNav } = Astro.props;
               width={LOGO_IMAGE.width}
               height={LOGO_IMAGE.height}
             />
+            <img
+            id="light-small-logo"
+            src="/assets/light_small.png"
+            width=55
+            height=55
+            />
+            <img
+            id="dark-small-logo"
+            src="/assets/dark_small.png"
+            width=55
+            height=55
+            />
         }
       </a>
       <nav id="nav-menu">

src/content/blog/current-favourite-ios-apps-august.md

@@ -20,7 +20,7 @@ One of my hobbies is to routinely scour the app store for new apps. I like doing
 
 ## ThreeGoodThings
 
-Developed by a 2 member team, this [app](https://oatmealapps.com/three-good-things) is a minimalistic gratefulness journal. Instead of being packed with distracting and tedious questions (I am looking at you, X, Y and more) it does exactly what it says. The main screen has 3 empty lines for you to fill on what were 3 good things that happened to you that day and how it made you feel.
+Developed by a 2 member team, this [app](https://oatmealapps.com/three-good-things) is a minimalistic gratefulness journal. Instead of being packed with tedious questions, it does exactly what it says. The main screen has 3 empty lines for you to fill on what were 3 good things that happened to you that day and how it made you feel.
 
 The UI is so pleasant and excellently made for such a simple app. You can export your entries as a PDF (which they remind you to do monthly, since the app does not have a logging in system to store your data in their servers) which I prefer. You can set daily upto 3 daily reminders too! The paid version unlocks locking your journal (look what I did there?) and themes.
 

src/styles/base.css

@@ -30,14 +30,41 @@
   html[data-theme="dark"] #sun-svg {
     display: block;
   }
-  #dark-logo,
-  html[data-theme="dark"] #light-logo {
-    display: none;
+
+  @media (min-width: 648px) {
+    #light-small-logo,
+    #dark-small-logo {
+      display: none;
+    }
+
+    #light-logo,
+    html[data-theme="dark"] #dark-logo {
+      display: block;
+    }
+
+    #dark-logo,
+    html[data-theme="dark"] #light-logo {
+      display: none;
+    }
   }
+
+/* Media query for screens smaller than 648px */
+@media (max-width: 648px) {
   #light-logo,
-  html[data-theme="dark"] #dark-logo {
+  #dark-logo {
+    display: none;
+  }
+
+  #light-small-logo,
+  html[data-theme="dark"] #dark-small-logo {
     display: block;
   }
+
+  #dark-small-logo,
+  html[data-theme="dark"] #light-small-logo {
+    display: none;
+  }
+}
   body {
     @apply flex min-h-[100svh] flex-col bg-skin-fill font-sans text-skin-base selection:bg-skin-accent/70 selection:text-skin-inverted;
   }