fix: v1.4.2 — mobile card spacing and footer nav layout

- tighten card-grid gaps on mobile across every portfolio section (home, tools, projects, articles, about x2, lab, project case study), restoring the original spacing once each grid switches to its multi-column layout — none of them had a responsive gap before
- footer: replace the nav columns' flex-row with a grid so they spread across the full width at sm instead of clustering left and leaving half the footer empty; mobile now pairs Explorer+Site on one row and Outils+Liens on the next
- add a footer "Outils" column linking to all 4 tools, sourced from the same list /tools renders from

Author: Randy-R-code

CHANGELOG.md

@@ -9,6 +9,31 @@ InfraLens's history as a standalone product (2026-01-06 to 2026-08-10) is
 frozen in [`docs/infralens/CHANGELOG.md`](docs/infralens/CHANGELOG.md).
 InfraLens changes since its native migration are recorded here.
 
+## [1.4.2] — 2026-08-16
+
+### Added
+
+- **Footer "Outils" column**, linking to all four tools (InfraLens, Cron
+  Builder, JSON Studio, MetaLens), sourced from the same list `/tools`
+  itself renders from.
+
+### Changed
+
+- **Card-grid spacing on mobile** — every portfolio section with a card
+  grid or list (home, tools, projects, articles, about ×2, lab, a project
+  case study) used the same gap at every viewport; each now starts tighter
+  on mobile and opens back up to its original spacing once the layout
+  switches to multiple columns.
+
+### Fixed
+
+- **Footer nav columns collapsed to the left at the `sm` breakpoint**,
+  leaving roughly half the footer empty — the columns switched to a flex
+  row before the section around them did, and flex items don't stretch to
+  fill unclaimed space. Replaced with a grid (2 columns on mobile, pairing
+  Explorer+Site and Outils+Liens; 4 across from `sm` up), which spreads
+  across the full width by construction.
+
 ## [1.4.1] — 2026-08-16
 
 ### Added

app/about/page.tsx

@@ -162,7 +162,7 @@ export default function AboutPage() {
       {/* Valeurs */}
       <section className="mb-12">
         <h2 className="mb-4 text-xl font-semibold text-white">Ma méthode</h2>
-        <div className="grid gap-4 md:grid-cols-3">
+        <div className="grid gap-3 md:grid-cols-3 md:gap-4">
           {values.map(({ icon: Icon, title, desc }) => (
             <div
               key={title}
@@ -220,7 +220,7 @@ export default function AboutPage() {
           </p>
         </div>
 
-        <div className="grid gap-4 md:grid-cols-2">
+        <div className="grid gap-3 md:grid-cols-2 md:gap-4">
           {domains.map(({ icon: Icon, title, tagline, intro, points }) => (
             <div
               key={title}

app/articles/page.tsx

@@ -22,7 +22,7 @@ export default function BlogPage() {
       color={brand.colors.blue[400]}
       icon="bookOpen"
     >
-      <div className="grid gap-6 sm:grid-cols-2">
+      <div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
         {posts.map((post, i) => (
           <Link
             key={post.slug}

app/lab/page.tsx

@@ -45,7 +45,7 @@ export default function LabPage() {
       color={brand.colors.blue[400]}
       icon="flask"
     >
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-3 sm:gap-5">
         {experiments.map((exp) => (
           <article
             key={exp.id}

app/page.tsx

@@ -21,7 +21,7 @@ export default function Home() {
           <h2 className="mb-6 text-xl font-semibold text-white">
             Projets phares
           </h2>
-          <div className="grid gap-4 sm:grid-cols-2">
+          <div className="grid gap-3 sm:grid-cols-2 sm:gap-4">
             {featuredProjects.map((project) => (
               <div
                 key={project.slug}

app/projects/[slug]/page.tsx

@@ -86,7 +86,7 @@ export default async function ProjectPage({ params }: Props) {
         </header>
 
         {/* Contenu */}
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-4 sm:gap-6">
           {(project.caseStudy
             ? [
                 { label: "Contexte", text: project.caseStudy.context },

app/projects/page.tsx

@@ -21,7 +21,7 @@ export default function ProjectsPage() {
       color={brand.colors.blue[400]}
       icon="building2"
     >
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
         {projects.map((project) => (
           <article
             key={project.slug}

app/tools/page.tsx

@@ -21,7 +21,7 @@ export default function ToolsPage() {
       color={brand.colors.green[500]}
       icon="wrench"
     >
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className="grid gap-4 md:grid-cols-2 md:gap-6">
         {tools.map((tool) => (
           <section
             key={tool.slug}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "randy-code",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "private": true,
   "packageManager": "pnpm@10.7.0",
   "scripts": {

src/components/layout/site-footer.tsx

@@ -1,5 +1,6 @@
 import { GitHubIcon } from "@/components/github-icon";
 import { primaryNav } from "@/lib/nav";
+import { tools } from "@/lib/tools";
 import { ExternalLink } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -37,7 +38,7 @@ export function SiteFooter() {
           <p className="text-xs text-zinc-400">© {year} Randy Code</p>
         </div>
 
-        <div className="flex flex-col gap-8 sm:flex-row sm:gap-16">
+        <div className="grid grid-cols-2 gap-x-8 gap-y-8 sm:grid-cols-4 sm:gap-x-10">
           <nav aria-label="Explorer">
             <p className="mb-3 font-mono text-[11px] uppercase tracking-widest text-zinc-400">
               Explorer
@@ -74,6 +75,24 @@ export function SiteFooter() {
             </ul>
           </nav>
 
+          <nav aria-label="Outils">
+            <p className="mb-3 font-mono text-[11px] uppercase tracking-widest text-zinc-400">
+              Outils
+            </p>
+            <ul className="flex flex-col gap-2">
+              {tools.map((tool) => (
+                <li key={tool.slug} className="flex">
+                  <Link
+                    href={tool.href}
+                    className="inline-flex items-center text-xs font-medium text-zinc-400 transition-colors hover:text-white"
+                  >
+                    <span>{tool.name}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
           <div>
             <p className="mb-3 font-mono text-[11px] uppercase tracking-widest text-zinc-400">
               Liens