chore: Merge branch dev to main (#284)

src/layout/Footer/FooterSection.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-
-	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
-
 	export let title: string;
-	let expanded: boolean = false;
 </script>
 
 <div class="desktop-only">
@@ -16,20 +10,14 @@
 </div>
 
 <div class="mobile-only">
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<button class="title" on:click={() => (expanded = !expanded)}>
+	<button class="title">
 		<span>
 			{title}
 		</span>
-		<div class="arrow" style:transform={expanded ? 'rotate(180deg)' : 'rotate(0deg)'}>
-			<ChevronDown size="24px" color="var(--surface-six)" />
-		</div>
 	</button>
-	{#if expanded}
-		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
-			<slot />
-		</ul>
-	{/if}
+	<ul>
+		<slot />
+	</ul>
 </div>
 
 <style lang="scss">

src/layout/Hero/HeroImage.svelte

@@ -20,7 +20,7 @@
 		background-color: var(--surface-seven);
 		user-select: none;
 	}
-	@media (max-width: 1700px) {
+	@media screen and (max-width: 1700px) {
 		.hero-img {
 			height: 100vh;
 			right: 6rem;

src/layout/Hero/HeroSection.svelte

@@ -46,10 +46,9 @@
 	}
 
 	.social-buttons {
-		justify-content: center;
+		max-width: 30rem;
 		position: absolute;
 		bottom: 1rem;
-		z-index: 1;
 		transition: opacity 0.1s var(--bezier-one);
 	}
 
@@ -69,18 +68,41 @@
 	span {
 		color: var(--primary);
 	}
-	@media (max-width: 1700px) {
+
+	@media screen and (max-width: 1700px) {
 		.hero {
 			height: 80vh;
 		}
 	}
 
+	@media screen and (max-height: 820px) {
+		.social-buttons {
+			bottom: initial;
+			left: initial;
+			position: initial;
+			width: initial;
+			opacity: 100% !important;
+		}
+	}
+	@media screen and (max-width: 1100px) or (min-height: 820px) {
+		.social-buttons {
+			transform: translateX(-50%);
+			width: 100%;
+			position: absolute;
+			justify-content: center;
+		}
+	}
+
 	@media screen and (max-width: 450px) {
 		.internal-buttons {
 			flex-direction: column;
 			gap: 1rem;
 		}
 
+		.social-buttons {
+			justify-content: center;
+		}
+
 		.hero {
 			height: initial;
 		}

src/layout/Navbar/NavHost.svelte

@@ -202,6 +202,7 @@
 	}
 
 	#nav-container {
+		z-index: 1;
 		top: 0;
 		position: sticky;
 		width: 100%;

src/lib/components/Wave.svelte

@@ -16,11 +16,18 @@
 	svg {
 		transition: opacity 0.1s var(--bezier-one);
 		position: absolute;
-		bottom: 0rem;
+		bottom: -1px;
+		z-index: -1;
 		width: 100%;
 		height: 40vh;
 	}
 
+	@media screen and (max-height: 820px) {
+		svg {
+			opacity: 0 !important;
+		}
+	}
+
 	.wave {
 		animation: wave-anim 30s;
 		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);

src/routes/+page.svelte

@@ -11,7 +11,7 @@
 	onMount(() => {
 		const checkVisibility = () => {
 			const wave = document.querySelector('.wave');
-			bottomVisibility = !(wave && wave.getBoundingClientRect().bottom < window.innerHeight);
+			bottomVisibility = !(wave && wave.getBoundingClientRect().bottom < window.innerHeight - 1);
 		};
 
 		window.addEventListener('scroll', checkVisibility, { passive: true });
@@ -165,10 +165,10 @@
 	}
 
 	.hero-img-container {
-		z-index: 1;
+		z-index: 0;
 	}
 
-	@media (max-width: 1100px) {
+	@media screen and (max-width: 1100px) {
 		.hero-img-container {
 			display: none;
 		}