From f4b71d387fc90a672564d33519b871ad93e8dba6 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 23 Feb 2026 00:14:18 +0100
Subject: [PATCH] Layout masonry avec ordre de lecture naturel pour les
 recommandations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remplace CSS columns (ordre vertical) par deux colonnes flex avec
distribution en zigzag : les plus récentes en haut, lecture
gauche-droite ligne par ligne, hauteur naturelle des cartes préservée.
---
 src/pages/ar/برمجة/توصيات.astro         | 45 ++++++++++++++++++-------
 src/pages/code/recommandations.astro    | 45 ++++++++++++++++++-------
 src/pages/en/code/recommendations.astro | 45 ++++++++++++++++++-------
 3 files changed, 96 insertions(+), 39 deletions(-)

diff --git a/src/pages/ar/برمجة/توصيات.astro b/src/pages/ar/برمجة/توصيات.astro
index 8709147..26a61b0 100644
--- a/src/pages/ar/برمجة/توصيات.astro
+++ b/src/pages/ar/برمجة/توصيات.astro
@@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+
+const leftCol = recommendations.filter((_, i) => i % 2 === 0);
+const rightCol = recommendations.filter((_, i) => i % 2 === 1);
 ---
 
 <Layout
@@ -24,21 +27,37 @@ const recommendations = (await getCollection("recommendations"))
       <p class="mt-3 text-white/60 text-lg">ما يقوله الأشخاص الذين عملت معهم.</p>
     </div>
 
-    <div class="columns-1 sm:columns-2 gap-5 space-y-5">
-      {recommendations.map((rec) => (
-        <div class="break-inside-avoid">
-          <RecommendationCard
-            author={rec.data.author}
-            authorRole={rec.data.authorRole}
-            company={rec.data.company}
-            text={rec.body || ''}
-            date={rec.data.date}
-            avatar={rec.data.avatar}
-            url={rec.data.url}
-            lang={rec.data.lang}
-          />
+    <div class="hidden sm:grid grid-cols-2 gap-5 items-start">
+      {[leftCol, rightCol].map((col) => (
+        <div class="space-y-5">
+          {col.map((rec) => (
+            <RecommendationCard
+              author={rec.data.author}
+              authorRole={rec.data.authorRole}
+              company={rec.data.company}
+              text={rec.body || ''}
+              date={rec.data.date}
+              avatar={rec.data.avatar}
+              url={rec.data.url}
+              lang={rec.data.lang}
+            />
+          ))}
         </div>
       ))}
     </div>
+    <div class="sm:hidden space-y-5">
+      {recommendations.map((rec) => (
+        <RecommendationCard
+          author={rec.data.author}
+          authorRole={rec.data.authorRole}
+          company={rec.data.company}
+          text={rec.body || ''}
+          date={rec.data.date}
+          avatar={rec.data.avatar}
+          url={rec.data.url}
+          lang={rec.data.lang}
+        />
+      ))}
+    </div>
   </section>
 </Layout>
diff --git a/src/pages/code/recommandations.astro b/src/pages/code/recommandations.astro
index a30074a..398534f 100644
--- a/src/pages/code/recommandations.astro
+++ b/src/pages/code/recommandations.astro
@@ -5,6 +5,9 @@ import RecommendationCard from "../../components/code/RecommendationCard.astro";
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+
+const leftCol = recommendations.filter((_, i) => i % 2 === 0);
+const rightCol = recommendations.filter((_, i) => i % 2 === 1);
 ---
 
 <Layout
@@ -24,21 +27,37 @@ const recommendations = (await getCollection("recommendations"))
       <p class="mt-3 text-white/60 text-lg">Ce que disent les gens avec qui j'ai travaillé.</p>
     </div>
 
-    <div class="columns-1 sm:columns-2 gap-5 space-y-5">
-      {recommendations.map((rec) => (
-        <div class="break-inside-avoid">
-          <RecommendationCard
-            author={rec.data.author}
-            authorRole={rec.data.authorRole}
-            company={rec.data.company}
-            text={rec.body || ''}
-            date={rec.data.date}
-            avatar={rec.data.avatar}
-            url={rec.data.url}
-            lang={rec.data.lang}
-          />
+    <div class="hidden sm:grid grid-cols-2 gap-5 items-start">
+      {[leftCol, rightCol].map((col) => (
+        <div class="space-y-5">
+          {col.map((rec) => (
+            <RecommendationCard
+              author={rec.data.author}
+              authorRole={rec.data.authorRole}
+              company={rec.data.company}
+              text={rec.body || ''}
+              date={rec.data.date}
+              avatar={rec.data.avatar}
+              url={rec.data.url}
+              lang={rec.data.lang}
+            />
+          ))}
         </div>
       ))}
     </div>
+    <div class="sm:hidden space-y-5">
+      {recommendations.map((rec) => (
+        <RecommendationCard
+          author={rec.data.author}
+          authorRole={rec.data.authorRole}
+          company={rec.data.company}
+          text={rec.body || ''}
+          date={rec.data.date}
+          avatar={rec.data.avatar}
+          url={rec.data.url}
+          lang={rec.data.lang}
+        />
+      ))}
+    </div>
   </section>
 </Layout>
diff --git a/src/pages/en/code/recommendations.astro b/src/pages/en/code/recommendations.astro
index 78a35f5..1a7018d 100644
--- a/src/pages/en/code/recommendations.astro
+++ b/src/pages/en/code/recommendations.astro
@@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+
+const leftCol = recommendations.filter((_, i) => i % 2 === 0);
+const rightCol = recommendations.filter((_, i) => i % 2 === 1);
 ---
 
 <Layout
@@ -24,21 +27,37 @@ const recommendations = (await getCollection("recommendations"))
       <p class="mt-3 text-white/60 text-lg">What people I've worked with say about me.</p>
     </div>
 
-    <div class="columns-1 sm:columns-2 gap-5 space-y-5">
-      {recommendations.map((rec) => (
-        <div class="break-inside-avoid">
-          <RecommendationCard
-            author={rec.data.author}
-            authorRole={rec.data.authorRole}
-            company={rec.data.company}
-            text={rec.body || ''}
-            date={rec.data.date}
-            avatar={rec.data.avatar}
-            url={rec.data.url}
-            lang={rec.data.lang}
-          />
+    <div class="hidden sm:grid grid-cols-2 gap-5 items-start">
+      {[leftCol, rightCol].map((col) => (
+        <div class="space-y-5">
+          {col.map((rec) => (
+            <RecommendationCard
+              author={rec.data.author}
+              authorRole={rec.data.authorRole}
+              company={rec.data.company}
+              text={rec.body || ''}
+              date={rec.data.date}
+              avatar={rec.data.avatar}
+              url={rec.data.url}
+              lang={rec.data.lang}
+            />
+          ))}
         </div>
       ))}
     </div>
+    <div class="sm:hidden space-y-5">
+      {recommendations.map((rec) => (
+        <RecommendationCard
+          author={rec.data.author}
+          authorRole={rec.data.authorRole}
+          company={rec.data.company}
+          text={rec.body || ''}
+          date={rec.data.date}
+          avatar={rec.data.avatar}
+          url={rec.data.url}
+          lang={rec.data.lang}
+        />
+      ))}
+    </div>
   </section>
 </Layout>