From f28fe5a682138bf755ab13ff1cdd06872bfc3fa7 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Fri, 13 Dec 2024 00:39:23 +0600
Subject: [PATCH] fix: no spacing from the ads

---
 .../src/lib/components/markdown/layout.svelte |   2 +-
 website/src/routes/+page.svelte               | 166 ++++++++++--------
 website/src/routes/blog/[slug]/+page.svelte   |   2 +-
 website/src/routes/downloads/+page.svelte     |   5 +-
 website/svelte.config.js                      |   2 +
 5 files changed, 97 insertions(+), 80 deletions(-)

diff --git a/website/src/lib/components/markdown/layout.svelte b/website/src/lib/components/markdown/layout.svelte
index 54426420..a8a13182 100644
--- a/website/src/lib/components/markdown/layout.svelte
+++ b/website/src/lib/components/markdown/layout.svelte
@@ -1,3 +1,3 @@
-<article class="prose lg:prose-lg dark:prose-invert max-w-3xl">
+<article class="prose lg:prose-lg dark:prose-invert max-w-5xl mx-auto">
 	<slot />
 </article>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 7e26b4c2..53dbce4c 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -33,87 +33,99 @@
 	<meta name="theme-color" content="#1DB954" />
 </svelte:head>
 
-<section class="flex flex-col gap-4 ps-4 pt-16 md:ps-24 md:pt-24">
-	<div>
-		<h1 class="h1">Spotube</h1>
-		<br />
-		<h3 class="h3">
-			An Open Source <Fa class="inline text-[#1DB954]" icon={faSpotify} /> Spotify Client for every platform
-			<div class="inline-flex gap-3 items-center">
-				<Fa class="inline text-[#3DDC84]" icon={faAndroid} />
-				<Fa class="inline text-[#00A2F0]" icon={faWindows} />
-				<Fa class="inline" icon={faLinux} />
-				<Fa class="inline" icon={faApple} />
+<section class="ps-4 pt-16 md:ps-24 md:pt-24">
+	<div class="flex flex-col gap-4">
+		<div>
+			<h1 class="h1">Spotube</h1>
+			<br />
+			<h3 class="h3">
+				An Open Source <Fa class="inline text-[#1DB954]" icon={faSpotify} /> Spotify Client for every
+				platform
+				<div class="inline-flex gap-3 items-center">
+					<Fa class="inline text-[#3DDC84]" icon={faAndroid} />
+					<Fa class="inline text-[#00A2F0]" icon={faWindows} />
+					<Fa class="inline" icon={faLinux} />
+					<Fa class="inline" icon={faApple} />
+				</div>
+			</h3>
+			<p class="text-surface-500">
+				And it's <span class="text-error-500 underline decoration-dashed">not</span>
+				built with Electron (web technologies)
+			</p>
+			<br />
+			<div class="flex items-center">
+				<a
+					href="https://play.google.com/store/apps/details?id=oss.krtirtho.spotube"
+					target="_blank"
+				>
+					<img
+						class="-m-2"
+						src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
+						alt="Google PlayStore"
+						width="200"
+					/>
+				</a>
+				<a href="https://flathub.org/apps/com.github.KRTirtho.Spotube" target="_blank">
+					<img
+						width="160"
+						alt="Download on Flathub"
+						src="https://flathub.org/api/badge?locale=en"
+					/>
+				</a>
 			</div>
-		</h3>
-		<p class="text-surface-500">
-			And it's <span class="text-error-500 underline decoration-dashed">not</span>
-			built with Electron (web technologies)
-		</p>
-		<br />
-		<div class="flex items-center">
-			<a href="https://play.google.com/store/apps/details?id=oss.krtirtho.spotube" target="_blank">
-				<img
-					class="-m-2"
-					src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
-					alt="Google PlayStore"
-					width="200"
-				/>
-			</a>
-			<a href="https://flathub.org/apps/com.github.KRTirtho.Spotube" target="_blank">
-				<img width="160" alt="Download on Flathub" src="https://flathub.org/api/badge?locale=en" />
+			<br />
+			<a href="https://news.ycombinator.com/item?id=39066136" target="_blank">
+				<img src="https://hackerbadge.vercel.app/api?id=39066136" alt="HackerNews" />
 			</a>
 		</div>
-		<br />
-		<a href="https://news.ycombinator.com/item?id=39066136" target="_blank">
-			<img src="https://hackerbadge.vercel.app/api?id=39066136" alt="HackerNews" />
-		</a>
-	</div>
-	<br class="hidden md:block" />
-	<div class="flex justify-center">
-		<a href="/downloads" class="flex gap-2 btn variant-filled-primary">
-			Download
-			<Download />
-		</a>
-	</div>
-
-	<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
-
-	<br /><br />
-
-	<h2 class="h2">
-		Supporters
-		<Heart class="inline-block" color="red" />
-	</h2>
-	<p class="text-surface-500">
-		We are grateful for the support of individuals and organizations who have made Spotube possible.
-	</p>
-
-	<div class="flex justify-center">
-		<a href="https://opencollective.com/spotube/donate" target="_blank">
-			<img
-				src="https://opencollective.com/webpack/donate/button@2x.png?color=blue"
-				width="300"
-				alt="Open Collective"
-			/>
-		</a>
-	</div>
-
-	<div class="flex flex-wrap gap-4">
-		{#each data.props.members as member}
-			<a href={member.profile} target="_blank">
-				<div
-					class="flex flex-col items-center gap-2 overflow-ellipsis w-40 btn variant-ghost-secondary rounded-lg"
-				>
-					<Avatar src={member.image} initials={member.name} class="w-12 h-12" />
-					<p>{member.name}</p>
-					<p class="capitalize text-sm underline decoration-dotted">
-						{formatter.format(member.totalAmountDonated)}
-						({member.role.toLowerCase()})
-					</p>
-				</div>
+		<br class="hidden md:block" />
+		<div class="flex justify-center">
+			<a href="/downloads" class="flex gap-2 btn variant-filled-primary">
+				Download
+				<Download />
 			</a>
-		{/each}
+		</div>
 	</div>
+
+	<br />
+	<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
+	<br />
+
+	<div class="flex flex-col gap-4">
+		<h2 class="h2">
+			Supporters
+			<Heart class="inline-block" color="red" />
+		</h2>
+		<p class="text-surface-500">
+			We are grateful for the support of individuals and organizations who have made Spotube
+			possible.
+		</p>
+		<div class="flex justify-center">
+			<a href="https://opencollective.com/spotube/donate" target="_blank">
+				<img
+					src="https://opencollective.com/webpack/donate/button@2x.png?color=blue"
+					width="300"
+					alt="Open Collective"
+				/>
+			</a>
+		</div>
+		<div class="flex flex-wrap gap-4">
+			{#each data.props.members as member}
+				<a href={member.profile} target="_blank">
+					<div
+						class="flex flex-col items-center gap-2 overflow-ellipsis w-40 btn variant-ghost-secondary rounded-lg"
+					>
+						<Avatar src={member.image} initials={member.name} class="w-12 h-12" />
+						<p>{member.name}</p>
+						<p class="capitalize text-sm underline decoration-dotted">
+							{formatter.format(member.totalAmountDonated)}
+							({member.role.toLowerCase()})
+						</p>
+					</div>
+				</a>
+			{/each}
+		</div>
+	</div>
+	<br />
 	<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
 </section>
diff --git a/website/src/routes/blog/[slug]/+page.svelte b/website/src/routes/blog/[slug]/+page.svelte
index 444c3a4a..c6c3e2cb 100644
--- a/website/src/routes/blog/[slug]/+page.svelte
+++ b/website/src/routes/blog/[slug]/+page.svelte
@@ -13,7 +13,7 @@
 	<title>Blog | {title}</title>
 </svelte:head>
 
-<article class="p-4 md:p-16 flex flex-grow flex-col">
+<article class="p-4 md:p-16">
 	<section
 		class={cover_img
 			? 'bg-black/30 h-56 md:h-80 xl:h-96 bg-cover bg-center flex flex-col justify-end p-4 pb-0 md:p-8 md:pb-0 rounded-lg'
diff --git a/website/src/routes/downloads/+page.svelte b/website/src/routes/downloads/+page.svelte
index 9ee994c8..2ecaddda 100644
--- a/website/src/routes/downloads/+page.svelte
+++ b/website/src/routes/downloads/+page.svelte
@@ -23,7 +23,9 @@
 
 	<DownloadItems links={extendedDownloadLinks} />
 
+	<br />
 	<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
+	<br />
 
 	<h2 class="h2">Other Downloads</h2>
 	<br /><br />
@@ -37,5 +39,6 @@
 			</a>
 		{/each}
 	</div>
-  <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
+	<br />
+	<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
 </section>
diff --git a/website/svelte.config.js b/website/svelte.config.js
index 2fd859f4..cecec177 100644
--- a/website/svelte.config.js
+++ b/website/svelte.config.js
@@ -44,6 +44,7 @@ const config = {
 					rehypeAutoAds,
 					{
 						adCode: `
+              <br/>
               <ins class="adsbygoogle"
                 style="display:block; text-align:center;"
                 data-ad-layout="in-article"
@@ -51,6 +52,7 @@ const config = {
                 data-ad-client="ca-pub-6419300932495863"
                 data-ad-slot="6788673194"
               ></ins>
+              <br/>
               <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
               </script>