new home page

makes vert logo clickable on both desktop and mobile

src/app.scss

@@ -45,20 +45,10 @@
 	// backgrounds
 	--bg: hsl(0, 0%, 95%);
 	--bg-gradient: linear-gradient(
-			to bottom left,
+		to bottom,
-			hsla(235, 100%, 50%, 0.3),
+		var(--accent-pink),
-			hsla(235, 100%, 50%, 0) 75%
+		hsla(303, 100%, 50%, 0) 100%
-		),
+	);
-		linear-gradient(
-			to bottom right,
-			hsla(353, 100%, 50%, 0.4),
-			hsla(353, 100%, 50%, 0) 50%
-		),
-		linear-gradient(
-			to bottom,
-			hsla(287, 100%, 50%, 0.2),
-			hsla(287, 100%, 50%, 0)
-		);
 	--bg-gradient-pink: linear-gradient(
 		to bottom,
 		var(--accent-pink),
@@ -106,20 +96,10 @@
 	// backgrounds
 	--bg: hsl(220, 5%, 12%);
 	--bg-gradient: linear-gradient(
-			to bottom,
+		to bottom,
-			hsla(287, 100%, 50%, 0.1),
+		hsla(303, 100%, 50%, 0.1),
-			hsla(287, 100%, 50%, 0)
+		hsla(303, 100%, 50%, 0) 100%
-		),
+	);
-		linear-gradient(
-			to bottom left,
-			hsla(235, 100%, 50%, 0.07),
-			hsla(235, 100%, 50%, 0) 50%
-		),
-		linear-gradient(
-			to bottom right,
-			hsla(353, 100%, 50%, 0.07),
-			hsla(353, 100%, 50%, 0) 50%
-		);
 	--bg-gradient-pink: linear-gradient(
 		to bottom,
 		hsla(303, 100%, 50%, 0.1),

src/lib/assets/vert-bg.svg

@@ -1,22 +1,7 @@
-<svg width="1389" height="1080" viewBox="0 0 1389 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<path d="M418.719 1080L0.480804 0H2.62554L420.863 1080H418.719Z" fill="url(#paint0_linear_6_220)" fill-opacity="0.1"/>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<path d="M829.044 1080L412.359 0H410.215L826.9 1080H829.044Z" fill="url(#paint1_linear_6_220)" fill-opacity="0.1"/>
+<svg width="100%" height="100%" viewBox="0 0 382 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-<path d="M788.673 555.925L987.856 0H989.981L790.985 555.402L1064.61 827.169L1386.13 0H1388.27L1065.37 830.741L788.673 555.925Z" fill="url(#paint2_linear_6_220)" fill-opacity="0.1"/>
+    <g transform="matrix(0.836581,0,0,0.836581,489.292,-1056.51)">
-<defs>
+        <path d="M-237.415,1365.74L-343.006,1337.94L-327.12,1262.89L-129.419,1327.24L-146.976,1409.51L-371.65,1473.83L-355.043,1393.57L-237.415,1365.74ZM-354.366,1394.23L-370.603,1472.7L-147.656,1408.87L-130.348,1327.77L-326.524,1263.92L-342.069,1337.36L-234.128,1365.79L-354.366,1394.23ZM-353.43,1527.47L-326.582,1500.63L-272.886,1554.32L-299.734,1581.17C-329.97,1611.41 -371.734,1630.11 -417.831,1630.11C-510.023,1630.11 -584.871,1555.27 -584.871,1463.07C-584.871,1370.88 -510.023,1296.03 -417.831,1296.03L-379.862,1296.03L-379.862,1371.97L-417.831,1371.97C-468.111,1371.97 -508.933,1412.79 -508.933,1463.07C-508.933,1513.35 -468.111,1554.17 -417.831,1554.17C-392.692,1554.17 -369.92,1543.96 -353.43,1527.47ZM-352.867,1528.04C-369.501,1544.67 -392.472,1554.97 -417.831,1554.97C-468.551,1554.97 -509.73,1513.79 -509.73,1463.07C-509.73,1412.35 -468.551,1371.17 -417.831,1371.17L-380.659,1371.17L-380.659,1296.83L-417.831,1296.83C-509.583,1296.83 -584.074,1371.32 -584.074,1463.07C-584.074,1554.83 -509.583,1629.32 -417.831,1629.32C-371.954,1629.32 -330.39,1610.7 -300.297,1580.61L-274.013,1554.32L-326.582,1501.75L-352.867,1528.04Z"/>
-<linearGradient id="paint0_linear_6_220" x1="694.377" y1="0" x2="694.377" y2="1080" gradientUnits="userSpaceOnUse">
+    </g>
-<stop stop-color="white"/>
-<stop offset="0.75" stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_6_220" x1="694.377" y1="0" x2="694.377" y2="1080" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.75" stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_6_220" x1="694.377" y1="0" x2="694.377" y2="1080" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.75" stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
 </svg>

src/lib/components/functional/Navbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { duration, fade } from "$lib/animation";
 	import { setTheme } from "$lib/store/index.svelte";
 	import clsx from "clsx";
@@ -31,7 +31,7 @@
 	const linkRects = $derived(links.map((l) => l.getBoundingClientRect()));
 
 	const selectedIndex = $derived(
-		items.findIndex((i) => i.activeMatch($page.url.pathname)),
+		items.findIndex((i) => i.activeMatch(page.url.pathname)),
 	);
 </script>
 
@@ -45,7 +45,7 @@
 			"w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
 			{
 				"bg-panel-accented":
-					item.activeMatch($page.url.pathname) && !browser,
+					item.activeMatch(page.url.pathname) && !browser,
 			},
 		)}
 		draggable={false}
@@ -116,13 +116,14 @@
 						0)}px; transition: left var(--transition) {duration}ms, top var(--transition) {duration}ms;"
 			></div>
 		{/if}
-		<div
+		<a
 			class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
+			href="/"
 		>
 			<div class="h-5 w-full">
 				<Logo />
 			</div>
-		</div>
+		</a>
 		{#each items as item, i (item.url)}
 			{@render link(item, i)}
 		{/each}

src/lib/sections/settings/Appearance.svelte

@@ -29,8 +29,8 @@
 		}
 	}
 
-	function setAnimation(motion: boolean) {
+	function setEffects(effects: boolean) {
-		if (motion) {
+		if (effects) {
 			enableMotionElement.classList.add("selected");
 			disableMotionElement.classList.remove("selected");
 			setMotion(true);
@@ -127,7 +127,7 @@
 					<div class="flex gap-3 w-full">
 						<button
 							bind:this={enableMotionElement}
-							onclick={() => setAnimation(true)}
+							onclick={() => setEffects(true)}
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PlayIcon size="24" class="inline-block mr-2" />
@@ -136,7 +136,7 @@
 
 						<button
 							bind:this={disableMotionElement}
-							onclick={() => setAnimation(false)}
+							onclick={() => setEffects(false)}
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PauseIcon size="24" class="inline-block mr-2" />

src/lib/store/index.svelte.ts

@@ -197,5 +197,4 @@ export const showGradient = writable(true);
 export const gradientColor = writable("");
 
 export const isMobile = writable(false);
-export const isFirefox = writable(false);
 export const motion = writable(true);

src/routes/+layout.svelte

@@ -173,12 +173,12 @@
 					in:fade={{
 						duration,
 						easing: quintOut,
-						delay: isMobile ? 0 : 100,
+						delay: $isMobile ? 0 : 100,
 					}}
 					out:fade={{
 						duration,
 						easing: quintOut,
-						delay: isMobile ? 0 : 200,
+						delay: $isMobile ? 0 : 200,
 					}}
 				>
 					{@render children()}
@@ -217,7 +217,7 @@
 	<div
 		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
 	>
-		<VertVBig class="fill-[--fg] opacity-50" />
+		<VertVBig class="fill-[--fg] opacity-10 w-[108%] h-[108%]"/>
 	</div>
 	<div
 		id="gradient-bg"
@@ -242,7 +242,7 @@
 			}}
 		>
 			<img
-				class="object-cover w-full {!isMobile
+				class="object-cover w-full {!$isMobile
 					? 'h-[calc(100%-66px)]'
 					: 'h-full'} blur-md"
 				src={files.files[0].blobUrl}