styling and content fixes

src/components/Header.astro

@@ -89,86 +89,13 @@ const pathname = Astro.url.pathname.replace(/\/+$/, '') || '/';
 				<span class="brand-text">{SITE_TITLE}</span>
 			</a>
 
-			<nav class="desktop-nav" aria-label="Primary">
+			<nav class="main-nav" aria-label="Primary">
 				{NAV_LINKS.map((link) => <HeaderLink href={link.path}>{link.name}</HeaderLink>)}
 			</nav>
-
-			<button
-				class="menu-toggle"
-				aria-label="Toggle menu"
-				aria-controls="mobile-nav"
-				aria-expanded="false"
-				type="button"
-			>
-				<svg
-					class="icon menu-open"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					aria-hidden="true"
-				>
-					<line x1="4" x2="20" y1="6" y2="6"/>
-					<line x1="4" x2="20" y1="12" y2="12"/>
-					<line x1="4" x2="20" y1="18" y2="18"/>
-				</svg>
-				<svg
-					class="icon menu-close"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					aria-hidden="true"
-				>
-					<path d="M18 6 6 18"/>
-					<path d="m6 6 12 12"/>
-				</svg>
-			</button>
 		</div>
-
-		<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile" hidden>
-			{
-				NAV_LINKS.map((link) => {
-					const active =
-						link.path === '/'
-							? pathname === '/'
-							: pathname === link.path || pathname.startsWith(link.path + '/');
-					return (
-						<a href={link.path} class:list={['mobile-nav-link', { active }]}>
-							{link.name}
-						</a>
-					);
-				})
-			}
-		</nav>
 	</div>
 </header>
 
-<script>
-	const toggle = document.querySelector<HTMLButtonElement>('.menu-toggle');
-	const mobileNav = document.getElementById('mobile-nav');
-	const header = document.querySelector('.site-header');
-	if (toggle && mobileNav && header) {
-		toggle.addEventListener('click', () => {
-			const open = header.classList.toggle('menu-open');
-			toggle.setAttribute('aria-expanded', String(open));
-			if (open) {
-				mobileNav.removeAttribute('hidden');
-			} else {
-				mobileNav.setAttribute('hidden', '');
-			}
-		});
-	}
-</script>
-
 <style>
 	.site-header {
 		display: flex;
@@ -228,13 +155,6 @@ const pathname = Astro.url.pathname.replace(/\/+$/, '') || '/';
 		border-bottom: 1px solid var(--border);
 	}
 
-	.nav-inner {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 4rem;
-	}
-
 	.brand {
 		display: inline-flex;
 		align-items: center;
@@ -261,72 +181,57 @@ const pathname = Astro.url.pathname.replace(/\/+$/, '') || '/';
 		font-weight: 700;
 	}
 
-	.desktop-nav {
-		display: none;
-		gap: 2rem;
-		align-items: center;
-	}
-	@media (min-width: 768px) {
-		.desktop-nav {
-			display: flex;
-		}
-	}
-
-	.menu-toggle {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		background: transparent;
-		border: 0;
-		color: var(--muted);
-		cursor: pointer;
-		padding: 0.5rem;
-	}
-	.menu-toggle:hover {
-		color: var(--text-strong);
-	}
-	@media (min-width: 768px) {
-		.menu-toggle {
-			display: none;
-		}
-	}
-	.menu-toggle .menu-close {
-		display: none;
-	}
-	.site-header.menu-open .menu-toggle .menu-open {
-		display: none;
-	}
-	.site-header.menu-open .menu-toggle .menu-close {
-		display: inline-block;
-	}
-
-	.mobile-nav {
+	.nav-inner {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		padding: 0.5rem 1.5rem 1.5rem;
-		background: var(--panel);
-		border-top: 1px solid var(--border);
+		align-items: stretch;
+		padding-top: 0.75rem;
+		padding-bottom: 0.75rem;
+		gap: 0.75rem;
 	}
 	@media (min-width: 768px) {
-		.mobile-nav {
-			display: none !important;
+		.nav-inner {
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			height: 4rem;
+			padding-top: 0;
+			padding-bottom: 0;
+			gap: 0;
 		}
 	}
-	.mobile-nav-link {
-		display: block;
-		padding: 0.625rem 0.5rem;
-		margin: 0 -0.5rem;
-		color: var(--muted);
-		font-weight: 500;
-		border-radius: 4px;
+
+	.main-nav {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 0.25rem;
 	}
-	.mobile-nav-link:hover {
-		color: var(--text-strong);
+	@media (min-width: 768px) {
+		.main-nav {
+			display: flex;
+			gap: 2rem;
+		}
+	}
+	.main-nav :global(.header-link) {
+		text-align: center;
+		padding: 0.5rem 0.25rem;
+		border-radius: 4px;
+		background: var(--panel);
+	}
+	@media (min-width: 768px) {
+		.main-nav :global(.header-link) {
+			text-align: left;
+			padding: 0;
+			background: transparent;
+			border-radius: 0;
+		}
+	}
+	.main-nav :global(.header-link:hover) {
 		background: #1f2937;
 	}
-	.mobile-nav-link.active {
-		color: var(--accent-bright);
-		background: #111827;
+	@media (min-width: 768px) {
+		.main-nav :global(.header-link:hover) {
+			background: transparent;
+		}
 	}
 </style>

src/components/HeaderLink.astro

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'astro/types';
 type Props = HTMLAttributes<'a'>;
 
 const { href, class: className, ...props } = Astro.props;
-const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '').replace(/\/+$/, '') || '/';
+const pathname = Astro.url.pathname.replace(/\/+$/, '') || '/';
 const target = (typeof href === 'string' ? href : '').replace(/\/+$/, '') || '/';
 const isActive = target === '/' ? pathname === '/' : pathname === target || pathname.startsWith(target + '/');
 ---
@@ -26,6 +26,7 @@ const isActive = target === '/' ? pathname === '/' : pathname === target || path
 	}
 	.header-link.active {
 		color: var(--accent-bright);
+		font-weight: 700;
 		text-decoration: underline;
 		text-decoration-thickness: 2px;
 		text-underline-offset: 4px;

src/pages/about.astro

@@ -57,13 +57,11 @@ open. Issues and PRs welcome.
 </ul>
 
 <h2>Get in touch</h2>
-<p>
-The best way to reach me is on
-<a href={SOCIAL_LINKS.github} target="_blank" rel="noopener noreferrer">GitHub</a>
-or
-<a href={SOCIAL_LINKS.mastodon} target="_blank" rel="noopener noreferrer">Mastodon</a>.
-For anything sensitive, ping me for a PGP key.
-</p>
+<ul>
+    <li><strong>Recruiters</strong> &mdash; <a href={SOCIAL_LINKS.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
+    <li><strong>Technical Practitioners</strong> &mdash; <a href={SOCIAL_LINKS.mastodon} target="_blank" rel="noopener noreferrer">Mastodon</a></li>
+    <li><strong>Developers / Contributors</strong> &mdash; <a href={SOCIAL_LINKS.github} target="_blank" rel="noopener noreferrer">GitHub</a></li>
+</ul>
 </section>
 </main>
 <Footer />
@@ -80,6 +78,7 @@ max-width: 42rem;
 .page-header {
 display: flex;
 flex-direction: column;
+align-items: flex-start;
 gap: 1rem;
 border-bottom: 1px solid var(--border);
 padding-bottom: 1.5rem;
@@ -117,4 +116,12 @@ color: var(--muted);
 .prose ul li {
 margin-bottom: 0.5em;
 }
+.prose a {
+color: var(--accent-bright);
+text-decoration: underline;
+text-underline-offset: 3px;
+}
+.prose a:hover {
+color: var(--accent);
+}
 </style>

src/pages/blog/index.astro

@@ -23,7 +23,7 @@ description="Disclosures, deep-dives, and field notes on application security an
 <Header />
 <main class="articles animate-in">
 <header class="page-header">
-<h1>Disclosures</h1>
+<h1>Articles</h1>
 <p class="lede">
 Field notes on application security, performance, and resilient systems.
 </p>