mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-11 03:12:56 +00:00
feat(resume-skills): add dynamic columns with responsive breakpoints (#3260)
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.
Example to change the default layout from 2 cols to 3 cols:
```
- block: skills
content:
title: Skills & Hobbies
username: admin
design:
show_skill_percentage: false
columns: 3
```
This commit is contained in:
2 files changed
+4
-3
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
Reference in new issue
Block a user