color transitions and remove hat

Author: andnorda

src/lib/Header.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { page } from "$app/stores";
 	import Nais from "./icons/Nais.svelte";
-	import NaisJul from "./icons/Nais-jul.svelte";
 
 	const isActive = (/** @type {string} */ path) => $page.url.pathname.startsWith(`/${path}`);
 	let isOpen = $state(false);
@@ -10,8 +9,7 @@
 <header class="header">
 	<h1 class="heading">
 		<a class="home" href="/">
-			<Nais class="nais" />
-			<NaisJul class="nais-jul" />
+			<Nais />
 			<span class="name">Nais</span>
 		</a>
 	</h1>
@@ -112,6 +110,7 @@
 	}
 	.home {
 		text-decoration: none;
+		transition: color 50ms;
 		color: var(--color-primary);
 		display: grid;
 		grid-template-columns: auto 1fr;
@@ -170,6 +169,7 @@
 		font-size: 1.15rem;
 	}
 	.main-menu-item.isActive {
+		transition: color 50ms;
 		color: var(--color-primary);
 	}
 	.github-link {

src/lib/icons/Nais-jul.svelte

@@ -8,13 +8,7 @@
 	--color-spectrum-5: transparent;
 }
 :root:has(.article.advent) body {
-	background: #d3cdb6;
-}
-:root:has(.article.advent) .home > .nais {
-	display: none;
-}
-:root:has(.article.advent) .home > .nais-jul {
-	display: initial;
+	background-color: #d3cdb6;
 }
 :root:has(.article.advent) hr {
 	--size: 8px;

src/styles/advent.css

@@ -13,14 +13,12 @@
 	--color-spectrum-5: #6ee5c1;
 }
 body {
+	transition: background-color 50ms;
 	font-family: Poppins, sans-serif;
 	background-color: #fdf9fc;
 	color: #222;
 	overflow-x: clip;
 }
-.home > .nais-jul {
-	display: none;
-}
 a {
 	color: inherit;
 }