From 50a19055a0d4972688ba9c9a012f5f9a3edfc9c9 Mon Sep 17 00:00:00 2001
From: srgg <srggal@gmail.com>
Date: Fri, 12 Sep 2025 20:51:26 -0600
Subject: [PATCH] feat(resume-skills): add dynamic columns with responsive
 breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement configurable columns parameter (default 2) with progressive responsive grid: 1→2→3→4→5 columns across breakpoints. Replace the fixed flex layout with CSS Grid for better multi-column control.
---
 modules/blox-tailwind/blox/resume-languages/block.html | 2 +-
 modules/blox-tailwind/blox/resume-skills/block.html    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/modules/blox-tailwind/blox/resume-languages/block.html b/modules/blox-tailwind/blox/resume-languages/block.html
index 190cdd1d7..ebd0bebc5 100644
--- a/modules/blox-tailwind/blox/resume-languages/block.html
+++ b/modules/blox-tailwind/blox/resume-languages/block.html
@@ -31,7 +31,7 @@
                   class="text-gray-200 dark:text-gray-700" />
           <circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
                   class="text-primary-600 dark:text-primary-300"
-                  style=stroke-dasharray: calc(2 * 22 / 7 * 120); stroke-dashoffset: calc((2 * 22 / 7 * 120) - ((2 * 22 / 7 * 120) * {{.percent}}/100))" />
+                  style="stroke-dasharray: calc(2 * 22 / 7 * 120); stroke-dashoffset: calc((2 * 22 / 7 * 120) - ((2 * 22 / 7 * 120) * {{.percent}}/100))" />
         </svg>
         <span class="absolute text-3xl">{{.percent}}%</span>
       </div>
diff --git a/modules/blox-tailwind/blox/resume-skills/block.html b/modules/blox-tailwind/blox/resume-skills/block.html
index 530078064..4fe4bdfdd 100644
--- a/modules/blox-tailwind/blox/resume-skills/block.html
+++ b/modules/blox-tailwind/blox/resume-skills/block.html
@@ -24,12 +24,13 @@
   {{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
 </div>
 
-<div class="flex flex-col lg:flex-row items-start max-w-prose mx-auto gap-3 px-6 md:px-0">
+{{ $columns := $block.design.columns | default 2 }}
+<div class="grid grid-cols-1 {{ if ge $columns 2 }}md:grid-cols-2{{ end }} {{ if ge $columns 3 }}lg:grid-cols-3{{ end }} {{ if ge $columns 4 }}xl:grid-cols-4{{ end }} {{ if ge $columns 5 }}2xl:grid-cols-5{{ end }} items-start max-w-prose mx-auto gap-3 px-6 md:px-0">
 
   {{ range $skills }}
   {{ $color := .color | default "" }}
   {{ $color_border := .color_border | default "" }}
-  <div class="w-full lg:w-1/2">
+  <div class="w-full">
     <div class="mb-5 text-xl font-bold text-gray-900 dark:text-white">
       {{ .name | markdownify | emojify }}
       {{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}