From 346f48df3950901be42ee2b8d23350ad3ac925f5 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Tue, 28 Apr 2026 13:06:49 +0200
Subject: feat: adaptive repo grid with CSS auto-fit and :only-child centering

---
 assets/css/main.css            | 15 +++++++++++++++
 layouts/repository/single.html |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index ab41a7d..8921966 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -583,6 +583,21 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
     @apply flex items-center justify-between gap-4;
   }
 
+  /* =====================
+     Repository Grid
+     ===================== */
+
+  .repo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .repo-card:only-child {
+    max-width: 50%;
+    margin-inline: auto;
+  }
+
   /* =====================
      Timeline Layout
      ===================== */
diff --git a/layouts/repository/single.html b/layouts/repository/single.html
index ce2c305..0d6ee83 100644
--- a/layouts/repository/single.html
+++ b/layouts/repository/single.html
@@ -28,9 +28,9 @@
     <section class="mt-16">
       <h2 class="text-3xl font-bold mb-8">{{ i18n "githubReposTitle" }}</h2>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div class="repo-grid">
         {{ range $.Site.Data.repos.repos }}
-        <div class="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
+        <div class="repo-card border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
           <!-- Card Image -->
           <img
             src="{{ .image }}"
-- 
cgit v1.2.3