From 2dba62549e1ece7d8565fe20e0dddeaa3dab8935 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 25 Oct 2026 13:14:59 +0200
Subject: [PATCH] Lay out footer link cards in an even grid with hover
 highlight

---
 app/components/layout/Footer.module.css  | 24 +++++-----
 app/components/layout/Footer.tsx         | 56 ++++++++++++------------
 changelog/2026-10-25-footer-card-grid.md |  4 ++
 3 files changed, 45 insertions(+), 39 deletions(-)
 create mode 100644 changelog/2026-10-25-footer-card-grid.md

diff --git a/app/components/layout/Footer.module.css b/app/components/layout/Footer.module.css
index 091742cda..7e5675475 100644
--- a/app/components/layout/Footer.module.css
+++ b/app/components/layout/Footer.module.css
@@ -127,17 +127,15 @@
 }
 
 .cards {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	max-width: 48rem;
+	display: grid;
+	width: 100%;
+	max-width: 60rem;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
 	gap: var(--s-2);
 	padding-inline: var(--s-4);
 
-	@container (max-width: 640px) {
-		display: grid;
-		align-self: stretch;
-		max-width: none;
+	@container (max-width: 60rem) {
+		max-width: 36rem;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
@@ -149,16 +147,20 @@
 .card {
 	display: flex;
 	align-items: center;
-	min-width: 10.5rem;
 	gap: var(--s-2);
 	padding: var(--s-2) var(--s-4);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-higher);
 	font-size: var(--font-sm);
 	font-weight: var(--weight-semi);
+	transition: background-color 0.15s;
 
-	@container (max-width: 640px) {
-		min-width: 0;
+	&:hover {
+		background-color: color-mix(
+			in oklch,
+			var(--color-bg-higher),
+			var(--color-fg-accent) 12%
+		);
 	}
 }
 
diff --git a/app/components/layout/Footer.tsx b/app/components/layout/Footer.tsx
index e64f8ab69..9d0224740 100644
--- a/app/components/layout/Footer.tsx
+++ b/app/components/layout/Footer.tsx
@@ -163,10 +163,28 @@ export function Footer() {
 		<footer className={styles.footer}>
 			<div className={styles.cards}>
 				<FooterCard
-					icon={<GitHubIcon className={styles.cardIcon} />}
-					title="GitHub"
-					subtitle={t("common:footer.github.subtitle")}
-					href={SENDOU_INK_GITHUB_URL}
+					icon={<Hand className={styles.cardIcon} />}
+					title={t("common:pages.welcome")}
+					subtitle={t("common:footer.welcome.subtitle")}
+					to={WELCOME_PAGE}
+				/>
+				<FooterCard
+					icon={<CircleHelp className={styles.cardIcon} />}
+					title={t("common:pages.faq")}
+					subtitle={t("common:footer.faq.subtitle")}
+					to={FAQ_PAGE}
+				/>
+				<FooterCard
+					icon={<BookOpen className={styles.cardIcon} />}
+					title={t("common:pages.docs")}
+					subtitle={t("common:footer.docs.subtitle")}
+					href={DOCS_SITE_URL}
+				/>
+				<FooterCard
+					icon={<Braces className={styles.cardIcon} />}
+					title={t("common:pages.api")}
+					subtitle={t("common:footer.api.subtitle")}
+					to={API_PAGE}
 				/>
 				<FooterCard
 					icon={<DiscordIcon className={styles.cardIcon} />}
@@ -174,6 +192,12 @@ export function Footer() {
 					subtitle={t("common:footer.discord.subtitle")}
 					href={SENDOU_INK_DISCORD_URL}
 				/>
+				<FooterCard
+					icon={<GitHubIcon className={styles.cardIcon} />}
+					title="GitHub"
+					subtitle={t("common:footer.github.subtitle")}
+					href={SENDOU_INK_GITHUB_URL}
+				/>
 				<FooterCard
 					icon={<PatreonIcon className={styles.cardIcon} />}
 					title="Patreon"
@@ -186,30 +210,6 @@ export function Footer() {
 					subtitle={t("common:footer.contributors.subtitle")}
 					to={CONTRIBUTIONS_PAGE}
 				/>
-				<FooterCard
-					icon={<CircleHelp className={styles.cardIcon} />}
-					title={t("common:pages.faq")}
-					subtitle={t("common:footer.faq.subtitle")}
-					to={FAQ_PAGE}
-				/>
-				<FooterCard
-					icon={<Hand className={styles.cardIcon} />}
-					title={t("common:pages.welcome")}
-					subtitle={t("common:footer.welcome.subtitle")}
-					to={WELCOME_PAGE}
-				/>
-				<FooterCard
-					icon={<Braces className={styles.cardIcon} />}
-					title={t("common:pages.api")}
-					subtitle={t("common:footer.api.subtitle")}
-					to={API_PAGE}
-				/>
-				<FooterCard
-					icon={<BookOpen className={styles.cardIcon} />}
-					title={t("common:pages.docs")}
-					subtitle={t("common:footer.docs.subtitle")}
-					href={DOCS_SITE_URL}
-				/>
 			</div>
 			<div className={styles.thanks}>
 				<Image alt="" path={SENDOU_LOVE_EMOJI_PATH} width={40} height={40} />
diff --git a/changelog/2026-10-25-footer-card-grid.md b/changelog/2026-10-25-footer-card-grid.md
new file mode 100644
index 000000000..c35083a76
--- /dev/null
+++ b/changelog/2026-10-25-footer-card-grid.md
@@ -0,0 +1,4 @@
+---
+type: feature
+---
+Tidier footer, the link cards are now an even grid and highlight on hover