From a85a91a701fa3aa2c36c41235697e984ecd877a0 Mon Sep 17 00:00:00 2001
From: Michael Bradley <michaelmbrad@gmail.com>
Date: Fri, 21 Feb 2025 02:48:48 -0500
Subject: [PATCH] Improve shrinking stability

---
 src/Body/Links.tsx |  4 ++--
 src/style.css      | 22 +++++++++-------------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/Body/Links.tsx b/src/Body/Links.tsx
index 01ad5cc..b51a52b 100644
--- a/src/Body/Links.tsx
+++ b/src/Body/Links.tsx
@@ -10,7 +10,7 @@ type ImageLinkProps = {
 };
 
 const ImageLink = ({ href, title, Image }: ImageLinkProps) => (
-	<a rel="me" href={href} title={title}>
+	<a rel="me" href={href} title={title} className="footerAction">
 		<Image width="100%" />
 	</a>
 );
@@ -21,7 +21,7 @@ const Links = () => (
 		<ImageLink href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account" Image={LinkedIn} />
 		<ImageLink href="https://mstdn.ca/@michaelbradley/" title="Mastodon account" Image={Mastodon} />
 		<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
-		<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode">
+		<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode" className="footerAction">
 			<DarkModeToggleIcon width="100%" />
 		</label>
 	</div>
diff --git a/src/style.css b/src/style.css
index 9da41a4..acdf8c2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -338,18 +338,20 @@ span {
 .links {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	column-gap: 1rem;
-	row-gap: 1rem;
-	width: min(40rem, 75%);
+	flex-wrap: nowrap;
+	justify-content: space-evenly;
+	column-gap: 2.5%;
+	width: min(40rem, 95%);
 
-	a {
-		flex: 1 1 1rem;
+	.footerAction {
+		flex: 1 0 2rem;
 		max-width: 5rem;
 		display: flex;
 		justify-content: center;
 		aspect-ratio: 1;
+	}
+
+	a {
 		svg {
 			transition: fill var(--anim-duration) ease;
 			fill: var(--foreground);
@@ -361,12 +363,6 @@ span {
 	}
 
 	#dark-mode-toggle-label {
-		flex: 1 1 1rem;
-		max-width: 5rem;
-		display: flex;
-		justify-content: center;
-		aspect-ratio: 1;
-
 		overflow: hidden;
 		border-radius: 50%;
 		cursor: grab;