refactor(ui): migrate to lucide icon set and update styles

src/components/AGENTS.md

@@ -38,6 +38,6 @@ Reusable `.astro` components for layout, content rendering, theming, search, and
 ## Dependencies
 
 ### External
-- `astro-icon` (`mdi` icon set) for SVG icons.
+- `astro-icon` for SVG icons — `lucide` for UI icons, `simple-icons` for brand/social logos (`@iconify-json/*` sets). Programming-language logos should use `devicon` (not yet installed — no consumer yet).
 
 <!-- MANUAL: -->

src/components/TagList.astro

@@ -11,7 +11,7 @@ const { tags, class: className } = Astro.props;
 
 {
 	tags.length > 0 && (
-		<ul class:list={["flex flex-wrap gap-x-3 gap-y-1", className]}>
+		<ul class:list={["flex flex-wrap gap-x-3 gap-y-2", className]}>
 			{tags.map((tag) => (
 				<li>
 					<a

src/components/blog/webmentions/Comments.astro

@@ -71,7 +71,7 @@ const comments = mentions.filter(
 										aria-hidden="true"
 										class="h-5 w-5"
 										focusable="false"
-										name="mdi:open-in-new"
+										name="lucide:external-link"
 									/>
 								</a>
 							</div>

src/components/layout/Footer.astro

@@ -22,12 +22,12 @@ const year = new Date().getFullYear();
 	</nav>
 
 	{/* Row 2: social icons */}
-	<ul class="flex items-center justify-center gap-x-4">
+	<ul class="flex flex-wrap items-center justify-center gap-1">
 		{
 			socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
 				<li class="flex">
 					<a
-						class="hover:text-link inline-block"
+						class="hover:text-link inline-flex rounded-md p-2 transition-colors"
 						href={link}
 						rel={`me noreferrer ${isWebmention ? "authn" : ""}`}
 						target={link.startsWith("mailto:") ? undefined : "_blank"}

src/components/layout/Header.astro

@@ -5,7 +5,7 @@ import { menuLinks } from "@/site.config";
 import { siteConfig } from "../../site.config";
 ---
 
-<header class="group relative mb-28 flex items-center sm:ps-28" id="main-header">
+<header class="group relative mb-12 flex items-center sm:mb-28 sm:ps-28" id="main-header">
 	<div class="flex sm:flex-col">
 		<a
 			aria-current={Astro.url.pathname === "/" ? "page" : false}

src/components/project/Project.astro

@@ -61,7 +61,7 @@ const expEntries = experiences.length ? await getEntries(experiences) : [];
 	</div>
 	{
 		!isPreview && tags.length > 0 && (
-			<TagList tags={tags} class="border-global-text/10 mt-4 border-t pt-3" />
+			<TagList tags={tags} class="border-global-text/10 mt-6 border-t pt-6" />
 		)
 	}
 </article>