feat: style footer

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>

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>

src/lib/components/organisms/Footer.svelte

@@ -11,13 +11,12 @@
 
 <SquigglyDivider />
 <footer>
+	<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}
-				<div>
 					<p>{data.about}</p>
-				</div>
 				{/await}
 			</section>
 
@@ -44,12 +43,100 @@
 
 		<div class="footer-bottom">
 			<div id="logo-name"><span>Re</span>Vanced</div>
-		<a href="/donate"><div>Donate</div></a>
 
+			<Button type="text" href="/donate">Donate</Button>
 			{#await api.general.getAbout() then data}
 				<Button type="text" href="mailto:{data.contact.email}">Email</Button>
 			{/await}
 
 			<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>