Basically finishes styling

src/components/Sidebar.astro

@@ -1,11 +1,11 @@
 ---
 import SidebarLink from './SidebarLink.astro';
-import { SITE_TITLE } from '../consts';
+import Logo from './Logo.astro';
 ---
 
 <header>
 	<nav>
-		<h2><a href="/">{SITE_TITLE}</a></h2>
+    <h2><Logo></Logo></h2>
 		<div class="internal-links">
 			<SidebarLink href="/">Home</SidebarLink>
 			<SidebarLink href="/blog">Blog</SidebarLink>
@@ -54,15 +54,20 @@ import { SITE_TITLE } from '../consts';
 		align-items: stretch;
 		justify-content: space-between;
     gap: 16px;
-	}
-	nav a {
-		color: var(--black);
-		border-bottom: 4px solid transparent;
-		text-decoration: none;
-	}
-	nav a.active {
-		text-decoration: none;
-	}
+    a {
+      color: var(--color-light-text);
+      border-bottom: 4px solid transparent;
+      text-decoration: none;
+      &:hover {
+        color: var(--color-accent);
+        border-bottom: 4px solid transparent;
+        text-decoration: none;
+      }
+      &.active {
+        text-decoration: none;
+      }
+    }
+  }
   .internal-links {
     display: flex;
     flex-direction: column;