better navbar

src/lib/BlogCard/Meta.svelte

@@ -5,21 +5,38 @@
 	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
+<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-ic:outline-bookmarks text-xl -ml-1" />
 			{#each post.tags as tag}
-				<a href="/blog/tags/{tag.slug}" class="no-underline rounded p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
+				<a
+					href="/blog/tags/{tag.slug}"
+					class="no-underline rounded 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-ic:outline-person text-xl -ml-1" />{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-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-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>
+	<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-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/BlogCard/PostContent.svelte

@@ -3,6 +3,10 @@
 </script>
 
 <div class="prose flex flex-col text-justify m-auto">
-	<img src={data.post.feature_image} alt="{data.post.title} image" class="rounded">
+	<img
+		src={data.post.feature_image}
+		alt="{data.post.title} image"
+		class="rounded"
+	/>
 	{@html data.post.html}
-</div>
+</div>

src/lib/BlogCard/PostOuter.svelte

@@ -3,10 +3,15 @@
 	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col gap-4 p-4 rounded {isPost ? "" : "w-110 bg-secondary"}">
+<div
+	class="flex flex-col gap-4 p-4 rounded {isPost ? '' : 'w-110 bg-secondary'}"
+>
 	<slot />
 
 	{#if url}
-		<a href={url} class="text-center">View on Ghost</a>
+		<a
+			href={url}
+			class="text-center">View on Ghost</a
+		>
 	{/if}
-</div>
+</div>

src/lib/BlogCard/PostsContainer.svelte

@@ -1,3 +1,3 @@
 <div class="flex flex-row flex-wrap gap-4">
 	<slot />
-</div>
+</div>

src/lib/BlogCard/ReadMore.svelte

@@ -3,4 +3,4 @@
 </script>
 
 <span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
-<a href="/blog/{post.slug}">Read more...</a>
+<a href="/blog/{post.slug}">Read more...</a>

src/lib/BlogCard/SingleWordLists.svelte

@@ -3,9 +3,11 @@
 	export let name: string;
 </script>
 
-
 <div class="flex flex-col gap-4">
 	{#each items as item}
-		<a href="/blog/{name}/{item.slug}" class="bg-secondary sm:w-md p-2 rounded no-underline">{item.name}</a>
+		<a
+			href="/blog/{name}/{item.slug}"
+			class="bg-secondary sm:w-md p-2 rounded no-underline">{item.name}</a
+		>
 	{/each}
-</div>
+</div>

src/lib/BlogCard/Title.svelte

@@ -5,10 +5,17 @@
 
 {#if !isPost}
 	{#if post.feature_image}
-		<img src={post.feature_image} alt="{post.title} image" class="rounded">
+		<img
+			src={post.feature_image}
+			alt="{post.title} image"
+			class="rounded"
+		/>
 	{/if}
-	<a href="/blog/{post.slug}" class="text-text no-underline hover:underline"><span class="text-xl font-bold">{post.title}</span></a>
+	<a
+		href="/blog/{post.slug}"
+		class="text-text no-underline hover:underline"
+		><span class="text-xl font-bold">{post.title}</span></a
+	>
 {:else}
 	<span class="text-xl font-bold">{post.title}</span>
 {/if}
-

src/lib/BlogCard/index.ts

@@ -4,4 +4,4 @@ export { default as Title } from "./Title.svelte";
 export { default as Meta } from "./Meta.svelte";
 export { default as ReadMore } from "./ReadMore.svelte";
 export { default as PostContent } from "./PostContent.svelte";
-export { default as SingleWordLists } from "./SingleWordLists.svelte";
+export { default as SingleWordLists } from "./SingleWordLists.svelte";

src/lib/Footer.svelte

@@ -1,7 +1,11 @@
 <footer class="sticky top-full">
-	<div class="flex flex-col justify-center sm:flex-row gap-1 border-t border-t-solid border-t-grey p-3 text-sm">
-		<p class="flex flex-row items-center gap-1">Made with <i class="i-simple-icons:svelte text-[#FF3E00] block" /> SvelteKit</p>
+	<div
+		class="flex flex-col justify-center sm:flex-row gap-1 border-t border-t-solid border-t-grey p-3 text-sm"
+	>
+		<p class="flex flex-row items-center gap-1">
+			Made with <i class="i-simple-icons:svelte text-[#FF3E00] block" /> SvelteKit
+		</p>
 		<span class="hidden sm:block">-</span>
 		<a href="https://github.com/ProjectSegfault/website">Source code</a>
 	</div>
-</footer>
+</footer>

src/lib/Hero.svelte

@@ -1,8 +1,20 @@
 <div class="flex flex-col gap-6 items-center text-center mt-[7%]">
-	<h1 class="text-5xl font-extrabold text-accent my-0 border-b-0 pb-0">Project Segfault</h1>
+	<h1 class="text-5xl font-extrabold text-accent my-0 border-b-0 pb-0">
+		Project Segfault
+	</h1>
 	<p class="text-2xl">Open source development and hosted services.</p>
 	<div class="flex flex-row gap-4">
-		<a href="/instances" class="button"><div class="i-ic:outline-computer" /> Instances</a>
-		<a href="/donate" class="button !bg-amber !text-black"><div class="i-ic:outline-attach-money" /> Donate</a>
+		<a
+			href="/instances"
+			class="button"
+			><div class="i-ic:outline-computer" />
+			 Instances</a
+		>
+		<a
+			href="/donate"
+			class="button !bg-amber !text-black"
+			><div class="i-ic:outline-attach-money" />
+			 Donate</a
+		>
 	</div>
-</div>
+</div>

src/lib/Nav/Nav.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import ThemeToggle from "./ThemeToggle.svelte";
+	import ThemeToggle from "$lib/Nav/ThemeToggle.svelte";
 	import { page } from "$app/stores";
-	import { slide } from "svelte/transition";
-	import { quintOut } from 'svelte/easing';
+	import { slide } from "svelte/transition"
+	import { quintOut } from "svelte/easing";
 
 	$: currentPage = $page.url.pathname;
 
@@ -14,15 +14,16 @@
 
 	$: showMenuButton = hasJS && isMobile;
 
-	$: menuOpen = !hasJS || hasJS && !isMobile;
+	$: menuOpen = !hasJS || (hasJS && !isMobile);
 
 	$: menuOpenMobile = isMobile && menuOpen;
 
 	$: showThemeToggle = hasJS;
 
-	const toggleMenu = () => menuOpen = !menuOpen;
+	const toggleMenu = () => (menuOpen = !menuOpen);
 
-	const handleNavigation = () => showMenuButton ? menuOpen = false : menuOpen = true;
+	const handleNavigation = () =>
+		showMenuButton ? (menuOpen = false) : (menuOpen = true);
 
 	const menus = [
 		{ name: "Instances", url: "/instances" },
@@ -48,13 +49,17 @@
 <svelte:window bind:innerWidth />
 
 <nav
-	class="bg-primary {menuOpenMobile ? "border-none" : "border-b border-b-solid border-b-grey"} {isMobile ? "py-2" : ""} flex px-2 flex-col justify-between nav:(flex-row items-center)"
-	class:hasJSNav={hasJS}
-	class:noJSNav={!hasJS}
+	class="bg-primary {menuOpenMobile
+		? 'border-none'
+		: 'border-b border-b-solid border-b-grey'} {isMobile
+		? 'py-2'
+		: ''} flex px-2 flex-col justify-between nav:(flex-row items-center) {hasJS
+		? 'sticky top-0 z-50'
+		: 'border-b border-b-solid border-b-grey'}"
 >
 	<div class="flex flex-row items-center justify-between">
 		<a
-			class="flex items-center decoration-none text-text gap-2 transition-opacity duration-250 hover:opacity-80"
+			class="flex items-center decoration-none text-text gap-2 transition-filter duration-250"
 			href="/"
 		>
 			<img
@@ -68,17 +73,21 @@
 		{#if showMenuButton}
 			<button
 				on:click={toggleMenu}
-				class="{menuOpen ? "i-ic:outline-close" : "i-ic:outline-menu"} h-4 w-4 cursor-pointer mr-2"
+				class="{menuOpen
+					? 'i-ic:outline-close'
+					: 'i-ic:outline-menu'} h-4 w-4 cursor-pointer mr-2"
 			/>
 		{/if}
 	</div>
 
 	{#if menuOpen}
 		<div
-			class="links {isMobile ? "!children:py-2" : ""}"
-			class:hasJS={hasJS}
-			class:noJS={!hasJS}
-			transition:slide="{{duration: 300, easing: quintOut }}"
+			class="links flex flex-row gap-2 {isMobile
+				? '!children:py-2'
+				: ''} {hasJS
+				? 'lt-nav:(flex flex-col pt-2 gap-2 fixed bg-primary w-full left-0 top-[2.75rem] p-2 z-50 border-b-solid border-b border-b-grey shadow shadow-secondary)'
+				: 'lt-nav:(grid grid-cols-2 gap-2 pt-2 w-fit)'}"
+			transition:slide={{ duration: 300, easing: quintOut }}
 		>
 			{#each menus as { url, name, external }}
 				<a
@@ -88,9 +97,7 @@
 					href={url}
 					on:click={handleNavigation}
 					>{#if external}
-						<div
-							class="i-ic:outline-open-in-new mr-2 h-4 w-4"
-						/>
+						<div class="i-ic:outline-open-in-new mr-2 h-4 w-4" />
 					{/if}
 					{name}
 				</a>
@@ -124,52 +131,14 @@
 	}
 
 	.links > * {
-		@apply py-4 px-2 cursor-pointer text-text decoration-none transition-color duration-250 text-sm font-500 flex items-center hover\:(text-accent);
+		@apply py-4 px-2 text-text decoration-none transition-filter duration-250 text-sm flex items-center;
 	}
 
 	.icon > span {
-		@apply flex text-sm nav\:hidden;
+		@apply text-sm nav\:hidden;
 	}
 
 	.icon {
-		@apply flex flex-row items-center gap-2 text-base;
-	}
-
-	.hasJS {
-		@apply flex flex-col pt-2 gap-2 fixed bg-primary w-full left-0 top-[2.75rem] 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;
-	}
-
-	.noJSNav {
-		@apply border-b border-b-solid border-b-grey;
-	}
-
-	@media (min-width: 1090px) {
-		.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 {
-			display: flex;
-			flex-direction: row;
-			padding-top: 0;
-		}
+		@apply flex items-center gap-2 text-base;
 	}
 </style>

src/lib/Nav/ThemeToggle.svelte

@@ -19,6 +19,10 @@
 	on:click={toggle}
 	class="text-text flex items-center text-sm"
 >
-	<div class="i-ic:{theme === 'dark' ? 'outline-light-mode' : 'outline-dark-mode'} h-4 w-4" />
+	<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/lib/PMargin.svelte

@@ -5,4 +5,4 @@
 
 <p class="my-4 {classes}">
 	<slot />
-</p>
+</p>

src/lib/PageTransition.svelte

@@ -4,7 +4,10 @@
 </script>
 
 {#key pathname}
-	<div in:fly={{ x: -10, duration: 250, delay: 250 }} out:fly={{ x: 5, duration: 250 }}>
+	<div
+		in:fly={{ x: -10, duration: 250, delay: 250 }}
+		out:fly={{ x: 5, duration: 250 }}
+	>
 		<slot />
 	</div>
-{/key}
+{/key}