change icons to md, change nav and footer

package.json

@@ -10,7 +10,7 @@
 		"format": "prettier -w --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@iconify-json/fa6-solid": "^1.1.10",
+		"@iconify-json/ic": "^1.1.12",
 		"@iconify-json/simple-icons": "^1.1.40",
 		"@sveltejs/adapter-node": "1.0.0",
 		"@sveltejs/kit": "1.0.1",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@auth/core': ^0.2.4
   '@auth/sveltekit': ^0.1.11
-  '@iconify-json/fa6-solid': ^1.1.10
+  '@iconify-json/ic': ^1.1.12
   '@iconify-json/simple-icons': ^1.1.40
   '@sveltejs/adapter-node': 1.0.0
   '@sveltejs/kit': 1.0.1
@@ -39,7 +39,7 @@ dependencies:
   sequelize: 6.28.0_pg-hstore@2.3.4+pg@8.8.0
 
 devDependencies:
-  '@iconify-json/fa6-solid': 1.1.10
+  '@iconify-json/ic': 1.1.12
   '@iconify-json/simple-icons': 1.1.40
   '@sveltejs/adapter-node': 1.0.0_@sveltejs+kit@1.0.1
   '@sveltejs/kit': 1.0.1_svelte@3.55.0+vite@4.0.3
@@ -318,8 +318,8 @@ packages:
       '@hapi/hoek': 9.3.0
     dev: false
 
-  /@iconify-json/fa6-solid/1.1.10:
+  /@iconify-json/ic/1.1.12:
-    resolution: {integrity: sha512-BJDDO8wiFQopALfmgUpTTINapfpYMw4aklJu96zolJSHYzLQTs05Db/bxvKeBeDArn9SMVIY4pA+ExinJqFT/g==}
+    resolution: {integrity: sha512-J0rDxdAc9GjJ1iS95hPXseN76ioZr9olGmdu9H+NKrmYAHanaeMIfWZ6PlANA5kCc+lNOFcDySSvQQ7DLMMoRQ==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true

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-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-fa6-solid:book-open-reader" /> {post.reading_time} minute read</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>

src/routes/+page.svelte

@@ -26,11 +26,11 @@
 		<LinkButton
 			url="/instances"
 			title="Explore our instances"
-			icon="i-fa6-solid:bell-concierge"
+			icon="i-ic:outline-room-service text-xl"
 		/>
 		<LinkButton
 			url="/donate"
-			icon="i-fa6-solid:money-bill"
+			icon="i-ic:outline-attach-money text-xl"
 			title="Donate"
 			bg="#F6C915"
 			color="#151515"

src/routes/Announcements.svelte

@@ -19,31 +19,31 @@
 				>
 					{#if announcements.severity === "info"}
 						<div class="flex items-center gap-2">
-							<div class="i-fa6-solid:circle-info" />
+							<div class="i-ic:outline-info text-xl" />
 							<span>Info</span>
 						</div>
 					{:else if announcements.severity === "low"}
 						<div class="flex items-center gap-2">
-							<div class="i-fa6-solid:check" />
+							<div class="i-ic:outline-check-circle text-xl" />
 							<span>Resolved</span>
 						</div>
 					{:else if announcements.severity === "medium"}
 						<div class="flex items-center gap-2">
-							<div class="i-fa6-solid:triangle-exclamation" />
+							<div class="i-ic:outline-priority-high text-xl" />
 							<span>Attention</span>
 						</div>
 					{:else if announcements.severity === "high"}
 						<div class="flex items-center gap-2">
-							<div class="i-fa6-solid:ban" />
+							<div class="i-ic:outline-block text-xl" />
 							<span>Attention</span>
 						</div>
 					{/if}
 					<span class="flex items-center gap-2">
-						<div class="i-fa6-solid:user" />
+						<div class="i-ic:outline-person text-xl" />
 						{announcements.author}
 					</span>
 					<span class="flex items-center gap-2">
-						<div class="i-fa6-solid:calendar" />
+						<div class="i-ic:outline-calendar-month text-xl" />
 						{dayjs
 							.unix(announcements.created)
 							.format("DD/MM/YYYY HH:mm")}

src/routes/blog/+page.svelte

@@ -24,12 +24,12 @@
 		<LinkButton
 			url="/blog/tags"
 			title="Tags"
-			icon="i-fa6-solid:tags"
+			icon="i-ic:outline-bookmarks"
 		/>
 		<LinkButton
 			url="/blog/authors"
 			title="Authors"
-			icon="i-fa6-solid:user"
+			icon="i-ic:outline-people text-xl"
 		/>
 		<LinkButton
 			url="https://blog.projectsegfau.lt/rss/"

src/routes/contact/+page.svelte

@@ -22,7 +22,7 @@
 	>
 		<Note
 			content="Your IP will be logged for anti-abuse measures."
-			icon="i-fa6-solid:lock"
+			icon="i-ic:outline-lock text-xl"
 		/>
 		<Meta
 			inputType="email"
@@ -59,7 +59,7 @@
 <noscript>
 	<Note
 		content="The contact form does not work without JavaScript enabled."
-		icon="i-fa6-solid:circle-info"
+		icon="i-ic:outline-info text-xl"
 	/>
 	<style>
 		.contact-form {

src/routes/instances/InstanceLink.svelte

@@ -28,8 +28,8 @@
 		<div class="flex items-center gap-2 text-base">
 			<div
 				class={item === 200
-					? "i-fa6-solid:arrow-up-right-from-square"
+					? "i-ic:outline-open-in-new text-xl"
-					: "i-fa6-solid:xmark"}
+					: "i-ic:outline-close"}
 			/>
 			<span>
 				{#if item !== 200}

src/routes/team/+page.svelte

@@ -61,7 +61,7 @@
 						url={website}
 						class="web"
 					>
-						<div class="i-fa6-solid:globe" />
+						<div class="i-ic:outline-language" />
 					</Link>
 				{/if}
 
@@ -70,7 +70,7 @@
 						url="mailto:{email}"
 						class="email"
 					>
-						<div class="i-fa6-solid:envelope" />
+						<div class="i-ic:outline-mail" />
 					</Link>
 				{/if}
 
@@ -79,7 +79,7 @@
 						url={pgp}
 						class="pgp"
 					>
-						<div class="i-fa6-solid:key" />
+						<div class="i-ic:outline-vpn-key" />
 					</Link>
 				{/if}
 
@@ -88,7 +88,7 @@
 						url={picture}
 						class="picture"
 					>
-						<div class="i-fa6-solid:camera" />
+						<div class="i-ic:outline-photo-camera" />
 					</Link>
 				{/if}
 			</LinksOuter>

uno.config.ts

@@ -56,5 +56,5 @@ export default defineConfig({
 
 	transformers: [transformerVariantGroup(), transformerDirectives()],
 
-	safelist: ["i-fa6-solid:moon", "i-fa6-solid:sun"]
+	safelist: ["i-ic:outline-dark-mode", "i-ic:outline-light-mode"]
 });