change icons to md, change nav and footer

src/lib/BlogCard/Meta.svelte

@@ -8,18 +8,18 @@
 <div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
 	{#if post.tags.length > 0}
 		<div class="flex flex-row items-center gap-2">
-			<div class="i-fa6-solid:tags" />
+			<div class="i-ic:outline-bookmarks text-xl -ml-1" />
 			{#each post.tags as tag}
 				<a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
 			{/each}
 		</div>
 	{/if}
 	{#each post.authors as author}
-		<a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{author.name}</a>
+		<a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-ic:outline-person text-xl -ml-1" />{author.name}</a>
 	{/each}
-	<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
+	<span class="flex items-center gap-2"><div class="i-ic:outline-calendar-month text-xl -ml-1" /> {dayjs
 		(post.published_at)
 		.format("ddd, DD MMM YYYY HH:mm")}</span>
-	<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span>
-	<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span>
+	<span class="flex items-center gap-2"><div class="i-ic:outline-edit text-2xl -ml-1" /> {post.plaintext.trim().split(/\s+/).length} words</span>
+	<span class="flex items-center gap-2"><div class="i-ic:outline-import-contacts text-xl -ml-1" /> {post.reading_time} minute read</span>
 </div>

src/lib/Footer.svelte

@@ -1,17 +1,8 @@
 <footer class="flex flex-col text-xl sticky top-full">
 	<div
-		class="flex items-center flex-col border-t border-t-solid border-t-grey p-2 children:(text-text text-sm font-500 text-center)"
+		class="flex flex-col justify-center sm:flex-row gap-1 border-t border-t-solid border-t-grey p-3 text-sm"
 	>
-		<span>© 2021 - present, Project Segfault <a href="/team">team</a></span>
-		<span
-			>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and
-			released under the
-			<a href="https://opensource.org/licenses/MIT/">MIT license</a
-			>.</span
-		>
-		<span
-			><a href="https://github.com/ProjectSegfault/website">Source code</a
-			></span
-		>
+		<span class="flex flex-row items-center gap-1">Made with <div class="i-simple-icons:svelte" />SvelteKit <span class="hidden sm:block">-</span></span>
+		<a href="https://github.com/ProjectSegfault/website">Source code</a>
 	</div>
 </footer>

src/lib/Form/Captcha.svelte

@@ -13,7 +13,7 @@
 
 <Note
 	content="The submit button will be visible when you complete the Captcha."
-	icon="i-fa6-solid:circle-info"
+	icon="i-ic:outline-info text-xl"
 />
 <HCaptcha
 	{sitekey}

src/lib/Nav.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import ThemeToggle from "./ThemeToggle.svelte";
 	import { page } from "$app/stores";
+	import { slide } from "svelte/transition";
+	import { quintOut } from 'svelte/easing';
 
 	$: currentPage = $page.url.pathname;
 
@@ -14,6 +16,8 @@
 
 	$: menuOpen = innerWidth > 1030;
 
+	$: menuOpenMobile = innerWidth < 1030 && menuOpen;
+
 	let showThemeToggle: boolean = true;
 
 	const toggleMenu = () => {
@@ -53,7 +57,8 @@
 <svelte:window bind:innerWidth />
 
 <nav
-	class="bg-primary border-b border-b-solid border-b-grey flex p-2 flex-col justify-between nav:(flex-row items-center)"
+	class="bg-primary {menuOpenMobile ? "" : "border-b border-b-solid border-b-grey"} flex p-2 flex-col justify-between nav:(flex-row items-center)"
+	class:hasJSNav={typeof Window !== "undefined"}
 >
 	<div class="flex flex-row items-center justify-between">
 		<a
@@ -71,7 +76,7 @@
 		{#if showMenuButton}
 			<button
 				on:click={toggleMenu}
-				class="i-fa6-solid:bars cursor-pointer mr-2"
+				class="{menuOpen ? "i-ic:outline-close" : "i-ic:outline-menu"} h-4 w-4 cursor-pointer mr-2"
 			/>
 		{/if}
 	</div>
@@ -81,6 +86,7 @@
 			class="links"
 			class:hasJS={typeof Window !== "undefined"}
 			class:noJS={typeof Window === "undefined"}
+			transition:slide="{{duration: 300, easing: quintOut }}"
 		>
 			{#each menus as { url, name, external }}
 				<a
@@ -91,7 +97,7 @@
 					on:click={handleNavigation}
 					>{#if external}
 						<div
-							class="i-fa6-solid:arrow-up-right-from-square mr-2"
+							class="i-ic:outline-open-in-new mr-2 h-4 w-4"
 						/>
 					{/if}
 					{name}
@@ -138,17 +144,30 @@
 	}
 
 	.hasJS {
-		@apply flex flex-col pt-2 gap-2;
+		@apply flex flex-col pt-2 gap-2 fixed bg-primary w-full left-0 top-[2.8rem] p-2 z-50 border-b-solid border-b border-b-grey shadow shadow-secondary;
 	}
 
 	.noJS {
 		@apply grid grid-cols-2 gap-2 pt-2 w-fit;
 	}
 
+	.hasJSNav {
+		@apply sticky top-0 z-50;
+	}
+
 	@media (min-width: 1030px) {
 		.hasJS {
 			flex-direction: row;
 			padding-top: 0;
+			position: initial;
+			background-color: initial;
+			width: initial;
+			left: initial;
+			top: initial;
+			padding: initial;
+			z-index: initial;
+			border-bottom: initial;
+			box-shadow: initial;
 		}
 
 		.noJS {

src/lib/ThemeToggle.svelte

@@ -19,6 +19,6 @@
 	on:click={toggle}
 	class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-primary color-text"
 >
-	<div class="i-fa6-solid:{theme === 'dark' ? 'sun' : 'moon'}" />
+	<div class="i-ic:{theme === 'dark' ? 'outline-light-mode' : 'outline-dark-mode'} h-4 w-4" />
 	<span class="ml-2 nav:(hidden ml-1)">Toggle theme</span>
 </button>