Fix mobile

Author: averageksp

src/components/Footer.astro

@@ -77,7 +77,7 @@ const icons: Record<string, string> = {
 				<p class="text-gray-400 text-sm max-w-md mb-4">
 					A fan-made continuation patch for Kerbal Space Program 2, focused on bug fixing, performance work, UI cleanup, and the larger systems still planned on the roadmap.
 				</p>
-				<div class="flex space-x-4">
+				<div class="footer-social-links">
 					{socialLinks.map(link => (
 						<a 
 							href={link.url}
@@ -143,6 +143,16 @@ const icons: Record<string, string> = {
 </footer>
 
 <style>
+	.footer-social-links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem !important;
+	}
+
+	.footer-social-links > * {
+		margin-left: 0 !important;
+	}
+
 	.footer-social-icon {
 		display: block;
 		width: 1.5rem;

src/components/Header.astro

@@ -80,6 +80,8 @@ const isActive = (href: string) => {
 				id="mobile-menu-button"
 				class="md:hidden text-gray-300 hover:text-white focus:outline-none"
 				aria-label="Toggle menu"
+				aria-controls="mobile-menu"
+				aria-expanded="false"
 			>
 				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -92,7 +94,14 @@ const isActive = (href: string) => {
 	<div id="mobile-menu" class="hidden md:hidden pb-4 px-4 border-t border-white/10">
 		<div class="flex flex-col space-y-3 pt-4">
 			{navItems.map(item => (
-				<a href={item.href} class="text-gray-300 hover:text-white transition-colors py-2">
+				<a
+					href={item.href}
+					class:list={[
+						"transition-colors py-2 font-medium",
+						isActive(item.href) ? "text-ksp-red" : "text-gray-300 hover:text-white"
+					]}
+					aria-current={isActive(item.href) ? 'page' : undefined}
+				>
 					{item.label}
 				</a>
 			))}
@@ -105,8 +114,29 @@ const isActive = (href: string) => {
 	// Mobile menu toggle
 	const button = document.getElementById('mobile-menu-button');
 	const menu = document.getElementById('mobile-menu');
+	const menuLinks = menu?.querySelectorAll('a');
+
+	const setMenuExpanded = (expanded) => {
+		button?.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+	};
+
+	const closeMenu = () => {
+		menu?.classList.add('hidden');
+		setMenuExpanded(false);
+	};
 
 	button?.addEventListener('click', () => {
-		menu?.classList.toggle('hidden');
+		const isHidden = menu?.classList.toggle('hidden');
+		setMenuExpanded(!isHidden);
+	});
+
+	menuLinks?.forEach((link) => {
+		link.addEventListener('click', closeMenu);
+	});
+
+	document.addEventListener('keydown', (event) => {
+		if (event.key === 'Escape') {
+			closeMenu();
+		}
 	});
 </script>

src/styles/global.css

@@ -147,11 +147,6 @@
 		font-weight: 700 !important;
 	}
 
-	button {
-		color: #ffffff !important;
-		font-weight: 700 !important;
-	}
-
 	/* Starlight button styling */
 	.sl-button,
 	[class*='button'][class*='primary'],
@@ -1129,6 +1124,38 @@ body:has(#starlight__sidebar a[aria-current="page"][href^="/blog/"]) main[data-p
 	margin-left: 0.75rem !important;
 }
 
+nav[aria-label='Main'] button[aria-label='Menu'] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid rgba(255, 255, 255, 0.16) !important;
+	border-radius: 999px;
+	background-color: #0a0a0a !important;
+	color: #ffffff !important;
+	-webkit-text-fill-color: #ffffff !important;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+
+:root[data-theme='light'] nav[aria-label='Main'] button[aria-label='Menu'] {
+	border-color: rgba(10, 10, 10, 0.16) !important;
+	background-color: #ffffff !important;
+	color: #0a0a0a !important;
+	-webkit-text-fill-color: #0a0a0a !important;
+}
+
+nav[aria-label='Main'] button[aria-label='Menu'] svg,
+nav[aria-label='Main'] button[aria-label='Menu'] path {
+	color: inherit !important;
+	stroke: #ffffff !important;
+	fill: none !important;
+}
+
+:root[data-theme='light'] nav[aria-label='Main'] button[aria-label='Menu'] svg,
+:root[data-theme='light'] nav[aria-label='Main'] button[aria-label='Menu'] path {
+	color: #0a0a0a !important;
+	stroke: #0a0a0a !important;
+}
+
 /* Footer styling overrides for Starlight compatibility */
 .site-footer {
 	margin-top: 4rem;
@@ -1138,13 +1165,17 @@ body:has(#starlight__sidebar a[aria-current="page"][href^="/blog/"]) main[data-p
 
 .site-footer .grid {
 	display: grid !important;
-	grid-template-columns: 1fr !important;
+	grid-template-columns: minmax(0, 1fr) !important;
 	gap: 2rem !important;
 }
 
+.site-footer .grid > * {
+	min-width: 0;
+}
+
 @media (min-width: 768px) {
 	.site-footer .grid {
-		grid-template-columns: 2fr 1fr 1fr !important;
+		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
 	}
 }