From bbe6267c7f40c3577b1b0204a5375363245c24cf Mon Sep 17 00:00:00 2001
From: madkarmaa <madkarma99@gmail.com>
Date: Wed, 7 May 2025 12:11:33 +0200
Subject: [PATCH] feat: style footer

---
 src/lib/components/atoms/DmcaBadge.svelte     |   8 +
 .../components/molecules/FooterSection.svelte |  49 ++++++
 src/lib/components/organisms/Footer.svelte    | 157 ++++++++++++++----
 3 files changed, 179 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/atoms/DmcaBadge.svelte b/src/lib/components/atoms/DmcaBadge.svelte
index 967c3b3..ab0769c 100644
--- a/src/lib/components/atoms/DmcaBadge.svelte
+++ b/src/lib/components/atoms/DmcaBadge.svelte
@@ -15,3 +15,11 @@
 		alt="DMCA.com Protection Status"
 	/>
 </a>
+
+<style>
+	a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
diff --git a/src/lib/components/molecules/FooterSection.svelte b/src/lib/components/molecules/FooterSection.svelte
index ec51b0d..0e818be 100644
--- a/src/lib/components/molecules/FooterSection.svelte
+++ b/src/lib/components/molecules/FooterSection.svelte
@@ -33,3 +33,52 @@
 		</ul>
 	{/if}
 </div>
+ 
+<style>
+	span {
+		list-style: none;
+		color: var(--text-four);
+		font-size: 0.9rem;
+		font-weight: 600;
+	}
+
+	ul {
+		margin: 1.25rem 0rem;
+		display: flex;
+		gap: 1rem;
+		flex-direction: column;
+		width: max-content;
+	}
+
+	.title {
+		display: flex;
+		justify-content: space-between;
+		background-color: transparent;
+		border: none;
+		width: 100%;
+		margin: 1.5rem 0;
+		cursor: pointer;
+	}
+
+	.mobile-only:not(:last-child) {
+		border-bottom: 1px solid var(--border);
+	}
+
+	.mobile-only {
+		display: none;
+	}
+
+	.arrow {
+		transition: all 0.2s var(--bezier-one);
+		user-select: none;
+	}
+
+	@media screen and (max-width: 768px) {
+		.mobile-only {
+			display: block;
+		}
+		.desktop-only {
+			display: none;
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Footer.svelte b/src/lib/components/organisms/Footer.svelte
index 3f9d629..7a0baad 100644
--- a/src/lib/components/organisms/Footer.svelte
+++ b/src/lib/components/organisms/Footer.svelte
@@ -11,45 +11,132 @@
 
 <SquigglyDivider />
 <footer>
-	<div class="footer-top">
-		<section class="main-content">
-			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-			{#await api.general.getAbout() then data}
-				<div>
+	<div class="footer-wrapper">
+		<div class="footer-top">
+			<section class="main-content">
+				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+				{#await api.general.getAbout() then data}
 					<p>{data.about}</p>
-				</div>
-			{/await}
-		</section>
+				{/await}
+			</section>
 
-		<section class="links-container">
-			<FooterSection title="Pages">
-				<li><Button type="text" href="/">Home</Button></li>
-				<li><Button type="text" href="/download">Download</Button></li>
-				<li><Button type="text" href="/patches">Patches</Button></li>
-				<li><Button type="text" href="/contributors">Contributors</Button></li>
-				<li><Button type="text" href="/donate">Donate</Button></li>
-			</FooterSection>
-
-			{#await api.general.getAbout() then data}
-				<FooterSection title="Socials">
-					{#each data.socials as { name, url }}
-						<li>
-							<Button type="text" href={url} target="_blank">{name}</Button>
-						</li>
-					{/each}
+			<section class="links-container">
+				<FooterSection title="Pages">
+					<li><Button type="text" href="/">Home</Button></li>
+					<li><Button type="text" href="/download">Download</Button></li>
+					<li><Button type="text" href="/patches">Patches</Button></li>
+					<li><Button type="text" href="/contributors">Contributors</Button></li>
+					<li><Button type="text" href="/donate">Donate</Button></li>
 				</FooterSection>
+
+				{#await api.general.getAbout() then data}
+					<FooterSection title="Socials">
+						{#each data.socials as { name, url }}
+							<li>
+								<Button type="text" href={url} target="_blank">{name}</Button>
+							</li>
+						{/each}
+					</FooterSection>
+				{/await}
+			</section>
+		</div>
+
+		<div class="footer-bottom">
+			<div id="logo-name"><span>Re</span>Vanced</div>
+
+			<Button type="text" href="/donate">Donate</Button>
+			{#await api.general.getAbout() then data}
+				<Button type="text" href="mailto:{data.contact.email}">Email</Button>
 			{/await}
-		</section>
-	</div>
 
-	<div class="footer-bottom">
-		<div id="logo-name"><span>Re</span>Vanced</div>
-		<a href="/donate"><div>Donate</div></a>
-
-		{#await api.general.getAbout() then data}
-			<Button type="text" href="mailto:{data.contact.email}">Email</Button>
-		{/await}
-
-		<DmcaBadge guid={RV_DMCA_GUID} />
+			<DmcaBadge guid={RV_DMCA_GUID} />
+		</div>
 	</div>
 </footer>
+
+<style>
+	footer {
+		background-color: var(--background-one);
+	}
+
+	.footer-wrapper {
+		max-width: min(87%, 100rem);
+		padding: 5rem 0rem;
+		margin: 0 auto;
+	}
+
+	.footer-top {
+		display: flex;
+		gap: 8rem;
+		justify-content: space-between;
+		margin-bottom: 4rem;
+	}
+
+	.footer-bottom {
+		display: flex;
+		gap: 2rem;
+		align-items: center;
+	}
+
+	@media screen and (max-width: 768px) {
+		.footer-bottom {
+			flex-wrap: wrap;
+			gap: 1rem;
+		}
+	}
+
+	#logo-name {
+		font-size: 1.4rem;
+		color: var(--text-one);
+		font-weight: 600;
+	}
+
+	#logo-name span {
+		color: var(--primary);
+	}
+
+	li {
+		list-style: none;
+		color: var(--text-four);
+		font-size: 0.9rem;
+		font-weight: 500;
+	}
+
+	.main-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		align-items: flex-start;
+	}
+
+	.logo-image {
+		height: 2.5rem;
+	}
+
+	.links-container {
+		display: flex;
+		gap: 10rem;
+		margin-top: 1rem;
+	}
+
+	@media screen and (max-width: 1050px) {
+		.footer-top {
+			flex-direction: column;
+			gap: 2rem;
+		}
+
+		.links-container {
+			display: grid;
+			gap: 2rem;
+			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.links-container {
+			display: flex;
+			flex-direction: column;
+			gap: initial;
+		}
+	}
+</style>