From d033f925e005fe1f8f662f8ca5dccb8c3a038068 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Fri, 12 May 2023 20:02:04 +0200
Subject: [PATCH] fix(websites/guide): remove flex-basis

---
 apps/guide/src/components/Footer.tsx   | 100 +++++++++++++------------
 apps/website/src/components/Footer.tsx | 100 +++++++++++++------------
 2 files changed, 102 insertions(+), 98 deletions(-)

diff --git a/apps/guide/src/components/Footer.tsx b/apps/guide/src/components/Footer.tsx
index a868ef935..b07ec0494 100644
--- a/apps/guide/src/components/Footer.tsx
+++ b/apps/guide/src/components/Footer.tsx
@@ -5,8 +5,8 @@ import workersLogo from '~/assets/powered-by-workers.png';
 export default function Footer() {
 	return (
 		<footer className="md:pl-12 md:pr-12">
-			<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12">
-				<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto">
+			<div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
+				<div className="flex flex-wrap place-content-center place-items-center gap-4">
 					<a
 						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
@@ -40,54 +40,56 @@ export default function Footer() {
 						/>
 					</a>
 				</div>
-				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
-					<div className="text-lg font-semibold">Community</div>
-					<div className="flex flex-col gap-1">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord.gg/djs"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							Discord
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js/discussions"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							GitHub discussions
-						</a>
+				<div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Community</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.gg/djs"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								Discord
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js/discussions"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								GitHub discussions
+							</a>
+						</div>
 					</div>
-				</div>
-				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
-					<div className="text-lg font-semibold">Project</div>
-					<div className="flex flex-col gap-1">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							discord.js
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord.js.org/docs"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							discord.js documentation
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord-api-types.dev"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							discord-api-types
-						</a>
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Project</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord.js
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.js.org/docs"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								discord.js documentation
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord-api-types.dev"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord-api-types
+							</a>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index a868ef935..b07ec0494 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -5,8 +5,8 @@ import workersLogo from '~/assets/powered-by-workers.png';
 export default function Footer() {
 	return (
 		<footer className="md:pl-12 md:pr-12">
-			<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12">
-				<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto">
+			<div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
+				<div className="flex flex-wrap place-content-center place-items-center gap-4">
 					<a
 						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
@@ -40,54 +40,56 @@ export default function Footer() {
 						/>
 					</a>
 				</div>
-				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
-					<div className="text-lg font-semibold">Community</div>
-					<div className="flex flex-col gap-1">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord.gg/djs"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							Discord
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js/discussions"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							GitHub discussions
-						</a>
+				<div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Community</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.gg/djs"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								Discord
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js/discussions"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								GitHub discussions
+							</a>
+						</div>
 					</div>
-				</div>
-				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
-					<div className="text-lg font-semibold">Project</div>
-					<div className="flex flex-col gap-1">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							discord.js
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord.js.org/docs"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							discord.js documentation
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord-api-types.dev"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							discord-api-types
-						</a>
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Project</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord.js
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.js.org/docs"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								discord.js documentation
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord-api-types.dev"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord-api-types
+							</a>
+						</div>
 					</div>
 				</div>
 			</div>