feat: Added navbar home link + color fades

public/css/style.css

@@ -86,7 +86,7 @@ footer {
 .nav .hamburger ion-icon {
   margin-top: 0.15rem;
 }
-.nav-logo > img {
+.nav-logo img {
   width: 64px;
   height: 64px;
 }
@@ -114,6 +114,7 @@ footer {
 }
 .nav-hyperlinks a {
   display: flex;
+  flex-direction: row-reverse; /* row-reverse so `:hover ~ ion-icon` works */
   align-items: center;
   align-content: center;
   text-decoration: none;
@@ -122,10 +123,13 @@ footer {
 .nav-hyperlinks ion-icon,
 .mobile-nav-header ion-icon {
   color: rgba(var(--black), .52);
+  transition: color 0.25s ease-in-out,
+              background-color 0.25s ease-in-out;
 }
 .nav-hyperlinks a:hover,
 .nav-hyperlinks ion-icon:hover,
-.mobile-nav-header ion-icon:hover {
+.mobile-nav-header ion-icon:hover,
+.nav-hyperlinks a span:hover ~ ion-icon {
   color: rgba(var(--black), .86);
 }
 .nav-hyperlinks ion-icon {
@@ -296,12 +300,18 @@ footer ul li:last-child {
 }
 .footer-socials > a > ion-icon {
   color: rgba(var(--lightblue), .86);
-  background-color: rgba(var(--brown), .86);
+  background-color: rgba(var(--brown), .52);
   border-radius: 100%;
   border: var(--borders);
   box-sizing: content-box;
   padding: 0.5rem;
   margin: 0 0.5rem;
+
+  transition: color 0.25s ease-in-out,
+              background-color 0.25s ease-in-out;
+}
+.footer-socials > a > ion-icon:hover {
+  background-color: rgba(var(--brown), .86);
 }
 .footer-socials > a:first-child > ion-icon {
   margin-left: 0;

src/_includes/components/navbars.liquid

@@ -1,6 +1,8 @@
 <nav class="container nav h-100" aria-label="Main nav">
 <div class="nav-logo">
-  <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
+  <a href="/">
+    <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
+  </a>
 </div>
 <div class="nav-title">
   <h1>{{ metadata.title }}</h1>
@@ -13,21 +15,21 @@
       </button>
     </li>
     <li>
-      <a href="/">
-        <ion-icon name="home-sharp"></ion-icon>
+      <a href="/" style="display: flex; flex-direction: row-reverse">
         <span>Home</span>
+        <ion-icon name="home-sharp"></ion-icon>
       </a>
     </li>
     <li>
       <a href="/posts">
-        <ion-icon name="newspaper-sharp"></ion-icon>
         <span>Posts</span>
+        <ion-icon name="newspaper-sharp"></ion-icon>
       </a>
     </li>
     <li>
       <a href="/about">
-        <ion-icon name="help-circle-sharp"></ion-icon>
         <span>About</span>
+        <ion-icon name="help-circle-sharp"></ion-icon>
       </a>
     </li>
   </ul>