change logo color as well

Author: AndrewDTR

src/components/Header.astro

@@ -6,8 +6,34 @@ console.log(currentPath);
 
 <div class="header-container">
   <div class="words">
-    <img src="/amoses.svg" alt="Andrew Moses" width="30" height="30" style="margin-right: 0;" />
-    <a class="name nav" href="/"><b>Andrew Moses</b></a>
+    <a class="name nav underline-container" href="/">
+      <svg
+        id="Layer_2"
+        data-name="Layer 2"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 79.89 86.33"
+        class="namelogo"
+      >
+        <defs>
+          <style>
+            .cls-1 {
+              fill: #f0e7d8;
+            }
+          </style>
+        </defs>
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            class="cls-1"
+            d="m11.03,61.71c5.28-8.38,7.79-18.63,10.23-28.13,1.28-4.97,2.42-9.98,3.51-14.99.57-2.65,1.13-5.31,1.76-7.95.48-2.03.71-5.62,1.85-7.39l-6.42,4.22c3.6,5.17,4,13.82,5.03,19.86,1.12,6.55,1.97,13.21,3.65,19.65.86,3.3,2.63,12.97,7.01,13.49,3.8.45,7.95-5.18,9.72-7.81,4.45-6.6,12.34-22.97-1.84-23.78-6.07-.35-12.39,1.99-18.15,3.6-7.05,1.97-14.15,4.02-21.28,5.67-2.08.48-4.26,2.57-5.29,4.38-.52.91-1.74,3.52.47,3.01,9.73-2.26,19.25-5.4,28.95-7.75,4.42-1.07,10.56-3.01,14.29.64,3.99,3.9.6,10.11-1.93,13.96-1.22,1.85.14.21-.37-.73-.66-1.22-1.32-2.4-1.84-3.69-.83-2.04-1.44-4.21-2.03-6.33-1.35-4.91-2.12-9.96-2.96-14.97s-1.59-9.74-2.61-14.57c-.8-3.81-1.48-8.43-3.76-11.7-1.3-1.87-5.9,3.42-6.42,4.22-2.18,3.4-2.78,7.83-3.68,11.72-1.22,5.29-2.28,10.62-3.54,15.9-2.4,10.08-4.55,21.98-10.13,30.84-.92,1.47-1.39,2.73.47,3.01,1.72.26,4.54-3.19,5.29-4.38h0Z"
+          ></path>
+          <path
+            class="cls-1"
+            d="m37.82,81.12c3.73-8.36,6.06-17.42,8.58-26.19,2.28-7.95,5.37-15.64,8.61-23.24l-3.11,3.77.41-.37-4.04.9c1.06,3.41.65,7.39.82,10.91s.59,7.3,1.17,10.93c.7,4.39,1.01,10.52,6.67,6.68,4.79-3.25,7.27-9.29,9.19-14.5,1.11-3.01,2.11-6.07,3.1-9.12.56-1.71,1.08-3.43,1.68-5.13.49-1.43,1.04-2.84,1.64-4.22.77-1.4.7-1.54-.21-.41l-3.82,1.37c1.83,3.54,1.37,8.82,1.35,12.69-.02,4.62-.47,9.22-.78,13.83-.43,6.55-2,17.52,3.43,22.53,1.94,1.79,8.91-5.37,7.07-7.07-5.68-5.24-3.25-18.49-2.74-25.28s2.13-17.21-1.26-23.77c-.58-1.12-3.45,1.1-3.82,1.37-4.82,3.56-6.68,9.16-8.54,14.64-1.14,3.37-2.19,6.77-3.35,10.13-.66,1.91-1.32,3.82-2.15,5.66-.34.79-.72,1.57-1.14,2.32-.81,1.31-.52,1.2.86-.31l2.39-.86c-2.26-.14-2.86-11.97-3.02-13.84-.4-4.74.37-10.13-1.05-14.68-.55-1.76-3.39.33-4.04.9-2.48,2.21-3.59,4.23-4.63,7.31-1.61,4.75-4.16,9.05-5.71,13.84-3.49,10.75-5.74,22.07-10.36,32.42-.82,1.84.13,2.34,1.8,1.8,1.97-.64,4.17-3.15,5-5h0Z"
+          ></path>
+        </g>
+      </svg>
+      <b class="no-underline">Andrew Moses</b>
+    </a>
     <a class={currentPath === "/posts" ? "nav bold" : "nav"} href="/posts"
       >Blog</a
     >
@@ -151,4 +177,53 @@ console.log(currentPath);
       margin-right: 10px;
     }
   }
+
+  .underline-container {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    position: relative;
+  }
+
+  .underline-container .logo-container::after {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #f0e7d8;
+    transform: scaleX(0);
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+  }
+
+  .underline-container:hover .logo-container::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
+
+  .logo {
+    width: 30px;
+    height: 30px;
+    margin-right: 8px;
+    transition: fill 0.2s;
+  }
+
+  .underline-container:hover .cls-1 {
+    fill: #ffaaaa;
+  }
+
+  .nav {
+    color: #f0e7d8;
+  }
+
+  .no-underline {
+    text-decoration: none !important;
+    color: inherit;
+  }
+
+  .namelogo {
+    padding-right: 5px;
+  }
 </style>