From ee7ff03d65f79e8e99c3595c92a0c48a770a3f65 Mon Sep 17 00:00:00 2001
From: Kawsar Ahmed <prokawsar@gmail.com>
Date: Sun, 29 Sep 2024 19:32:26 +0600
Subject: [PATCH] Responsiveness fix

---
 src/lib/components/elements/ScrollContainer.svelte | 2 +-
 src/lib/components/layouts/Footer.svelte           | 2 +-
 src/lib/components/layouts/Header.svelte           | 2 +-
 src/lib/components/sections/Blog.svelte            | 2 +-
 src/lib/components/sections/Contribute.svelte      | 4 ++--
 src/lib/components/sections/Hero.svelte            | 6 +++---
 src/lib/components/sections/OurApps.svelte         | 2 +-
 src/lib/components/sections/Support.svelte         | 2 +-
 src/lib/components/sections/Youtube.svelte         | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/elements/ScrollContainer.svelte b/src/lib/components/elements/ScrollContainer.svelte
index e4a4157..db99941 100644
--- a/src/lib/components/elements/ScrollContainer.svelte
+++ b/src/lib/components/elements/ScrollContainer.svelte
@@ -65,7 +65,7 @@
 
 <div
 	bind:this={containerRef}
-	class="flex w-full flex-col overflow-y-auto scroll-smooth rounded-xl"
+	class="flex w-full flex-col overflow-y-auto scroll-smooth rounded-xl lg:h-[317px] xl:h-full"
 	style="max-height: {maxHeight};"
 >
 	<div bind:this={contentRef} class="flex flex-col gap-2">
diff --git a/src/lib/components/layouts/Footer.svelte b/src/lib/components/layouts/Footer.svelte
index c155445..e84abce 100644
--- a/src/lib/components/layouts/Footer.svelte
+++ b/src/lib/components/layouts/Footer.svelte
@@ -4,7 +4,7 @@
 	import Icon from '@iconify/svelte'
 </script>
 
-<footer class="bg-white px-5 pb-10 pt-40 md:px-0">
+<footer class="bg-white px-5 pb-10 pt-40 lg:px-5 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-row">
 		<div class="flex flex-1 flex-col gap-5">
 			<div>
diff --git a/src/lib/components/layouts/Header.svelte b/src/lib/components/layouts/Header.svelte
index 2faf3f0..c4fe8dd 100644
--- a/src/lib/components/layouts/Header.svelte
+++ b/src/lib/components/layouts/Header.svelte
@@ -11,7 +11,7 @@
 	let showMobileMenu = false
 </script>
 
-<header class="sticky top-0 z-10 bg-arkGray bg-opacity-95 px-5 md:px-0 dark:bg-gray-900">
+<header class="sticky top-0 z-10 bg-arkGray bg-opacity-95 px-5 xl:px-0 dark:bg-gray-900">
 	<div class="mx-auto flex h-[72px] items-center justify-between sm:px-8 lg:px-0 xl:max-w-7xl">
 		<div class="flex flex-row items-center">
 			<a href="{base}/" aria-label={config.headerTitle}>
diff --git a/src/lib/components/sections/Blog.svelte b/src/lib/components/sections/Blog.svelte
index ba20af2..44383a5 100644
--- a/src/lib/components/sections/Blog.svelte
+++ b/src/lib/components/sections/Blog.svelte
@@ -3,7 +3,7 @@
 	import BlogItem from '$lib/components/elements/BlogItem.svelte'
 </script>
 
-<section class="relative flex items-center py-10 lg:py-24">
+<section class="relative flex items-center py-10 lg:px-5 lg:py-24 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 px-5 lg:gap-10 lg:px-0">
 		<div class="flex w-full flex-col gap-4">
 			<p class="text-center text-4xl font-bold lg:text-6xl">Blog</p>
diff --git a/src/lib/components/sections/Contribute.svelte b/src/lib/components/sections/Contribute.svelte
index 5732f4b..1ca0c2c 100644
--- a/src/lib/components/sections/Contribute.svelte
+++ b/src/lib/components/sections/Contribute.svelte
@@ -7,7 +7,7 @@
 	import Icon from '@iconify/svelte'
 </script>
 
-<section class="relative flex items-center bg-arkGray py-24">
+<section class="relative flex items-center bg-arkGray py-24 lg:px-5 xl:px-0">
 	<div
 		class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 px-5 lg:flex-row lg:items-start lg:px-0"
 	>
@@ -41,7 +41,7 @@
 			</ContributeCard>
 
 			<ContributeCard title="Replace alphabetical sorting by un-sorting">
-				<div class="flex flex-row gap-2" slot="title-tag">
+				<div class="flex flex-row flex-wrap gap-2" slot="title-tag">
 					<Tag>
 						<Icon icon="ri:svelte-line" />
 						Svelte</Tag
diff --git a/src/lib/components/sections/Hero.svelte b/src/lib/components/sections/Hero.svelte
index 9c6962b..64a6901 100644
--- a/src/lib/components/sections/Hero.svelte
+++ b/src/lib/components/sections/Hero.svelte
@@ -35,7 +35,7 @@
 	<div class="relative flex w-full flex-row items-center justify-between gap-1 py-10 md:mb-10">
 		<!-- BG Images -->
 		<div class="flex-1">
-			<img class="hidden max-w-[60%] md:block" src="{base}/images/left.png" alt="left" />
+			<img class="hidden md:block xl:max-w-[60%]" src="{base}/images/left.png" alt="left" />
 			<img class="sm:hidden" src="{base}/images/mob-left.png" alt="left" />
 		</div>
 
@@ -100,12 +100,12 @@
 
 		<!-- BG Images -->
 		<div class="flex flex-1 justify-end">
-			<img class="hidden max-w-[50%] md:block" src="{base}/images/right.png" alt="right" />
+			<img class="hidden md:block xl:max-w-[50%]" src="{base}/images/right.png" alt="right" />
 			<img class="sm:hidden" src="{base}/images/mob-right.png" alt="right" />
 		</div>
 	</div>
 
-	<div class="mx-auto flex w-full max-w-7xl flex-row sm:px-8 lg:px-0">
+	<div class="mx-auto flex w-full max-w-7xl flex-row sm:px-8 lg:px-5 xl:px-0">
 		{#if browser}
 			<ScrollContainer>
 				{#each slides as { color, text, animation }, i}
diff --git a/src/lib/components/sections/OurApps.svelte b/src/lib/components/sections/OurApps.svelte
index 6572c9d..c0a41af 100644
--- a/src/lib/components/sections/OurApps.svelte
+++ b/src/lib/components/sections/OurApps.svelte
@@ -6,7 +6,7 @@
 	let activeApp = appList[0]
 </script>
 
-<section class="relative flex py-12">
+<section class="relative flex py-12 lg:px-5 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 lg:gap-10 lg:px-0">
 		<div class="flex w-full flex-col gap-4">
 			<p class="text-center text-4xl font-bold lg:text-6xl">Our Apps</p>
diff --git a/src/lib/components/sections/Support.svelte b/src/lib/components/sections/Support.svelte
index 570e7df..62cbb39 100644
--- a/src/lib/components/sections/Support.svelte
+++ b/src/lib/components/sections/Support.svelte
@@ -43,7 +43,7 @@
 	}
 </script>
 
-<section class="relative flex items-center bg-arkOrangeLight py-14">
+<section class="relative flex items-center bg-arkOrangeLight py-14 lg:px-5 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 lg:items-start">
 		<div class="flex flex-col gap-3 px-10 md:px-0">
 			<p class="text-center text-xl font-semibold uppercase text-arkOrange lg:text-start">
diff --git a/src/lib/components/sections/Youtube.svelte b/src/lib/components/sections/Youtube.svelte
index 8326b6b..76e56cc 100644
--- a/src/lib/components/sections/Youtube.svelte
+++ b/src/lib/components/sections/Youtube.svelte
@@ -10,7 +10,7 @@
 	]
 </script>
 
-<section class="relative flex items-center pb-16">
+<section class="relative flex items-center pb-16 lg:px-5 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-col gap-5 rounded-xl bg-[#FC0D1B]/20 p-5">
 		<div class="flex flex-row items-center justify-between">
 			<div class="flex flex-col items-start gap-2 sm:flex-row sm:items-center">