feat: configurable cols for feature-grid shortcode (#342)

* feat: configurable cols for feature-grid shortcode

* chore: update css files

* chore: add hextra prefix to cards css var

* chore: rebuild css

Author: imfing

assets/css/compiled/main.css

@@ -836,9 +836,6 @@ video {
      -moz-appearance: none;
           appearance: none;
 }
-.hx-grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
 .hx-flex-col {
   flex-direction: column;
 }
@@ -2227,7 +2224,7 @@ article details > summary::before {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
 }
 .hextra-cards {
-  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
 }
 .hextra-card img {
   -webkit-user-select: none;
@@ -2552,6 +2549,11 @@ nav .search-wrapper {
     --tw-bg-opacity: 0.8;
   }
 }
+@media (min-width: 1024px) {
+.hextra-feature-grid {
+    grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr))
+}
+  }
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
@@ -3381,6 +3383,12 @@ body {
     transform: translate3d(0,-100%,0);
   }
 }
+@media not all and (min-width: 640px) {
+
+  .max-sm\:hx-grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:hx-block {
@@ -3395,17 +3403,20 @@ body {
     width: 110%;
   }
 
-  .sm\:hx-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .sm\:hx-items-start {
     align-items: flex-start;
   }
 
   .sm\:hx-text-xl {
     font-size: 1.25rem;
   }
+
+  @media not all and (min-width: 1024px) {
+
+    .sm\:max-lg\:hx-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
 }
 @media (min-width: 768px) {
 
@@ -3482,12 +3493,6 @@ body {
     right: auto;
   }
 }
-@media (min-width: 1024px) {
-
-  .lg\:hx-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
 @media (min-width: 1280px) {
 
   .xl\:hx-block {

assets/css/components/cards.css

@@ -1,5 +1,5 @@
 .hextra-cards {
-  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
 }
 
 .hextra-card img {

assets/css/components/hextra/feature-grid.css

@@ -0,0 +1,5 @@
+.hextra-feature-grid {
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr));
+  }
+}

assets/css/styles.css

@@ -9,6 +9,7 @@
 @import "components/navbar.css";
 @import "components/scrollbar.css";
 @import "components/code-copy.css";
+@import "components/hextra/feature-grid.css";
 
 html {
   @apply hx-text-base hx-antialiased;

exampleSite/hugo_stats.json

@@ -216,6 +216,7 @@
       "hextra-code-copy-btn",
       "hextra-code-copy-btn-container",
       "hextra-feature-card",
+      "hextra-feature-grid",
       "hextra-filetree",
       "hextra-filetree-folder",
       "hextra-footer",
@@ -303,7 +304,6 @@
       "hx-gap-x-1.5",
       "hx-gap-y-2",
       "hx-grid",
-      "hx-grid-cols-1",
       "hx-group",
       "hx-group/code",
       "hx-group/copybtn",
@@ -509,7 +509,6 @@
       "language-options",
       "language-switcher",
       "last-of-type:hx-mb-0",
-      "lg:hx-grid-cols-3",
       "lntable",
       "lntd",
       "ltr:before:hx-left-0",
@@ -539,6 +538,7 @@
       "max-md:[transform:translate3d(0,-100%,0)]",
       "max-md:hx-hidden",
       "max-md:hx-min-h-[340px]",
+      "max-sm:hx-grid-cols-1",
       "max-xl:hx-hidden",
       "md:hx-aspect-[1.1/1]",
       "md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
@@ -596,10 +596,10 @@
       "sidebar-container",
       "sm:hx-block",
       "sm:hx-flex",
-      "sm:hx-grid-cols-2",
       "sm:hx-items-start",
       "sm:hx-text-xl",
       "sm:hx-w-[110%]",
+      "sm:max-lg:hx-grid-cols-2",
       "steps",
       "subheading-anchor",
       "success-icon",

layouts/shortcodes/cards.html

@@ -1,5 +1,5 @@
-{{ $rows := .Get "rows" | default "3" }}
+{{- $cols := .Get "cols" | default 3 -}}
 
-<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--rows: {{ $rows }};">
+<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
   {{- .Inner -}}
 </div>

layouts/shortcodes/hextra/feature-grid.html

@@ -1,9 +1,12 @@
-{{- $style := .Get "style" -}}
+{{- $cols := .Get "cols" | default 3 -}}
+{{- $style := .Get "style" | default "" -}}
+
+{{- $css := printf "--hextra-feature-grid-cols: %v; %s" $cols $style -}}
 
 
 <div
-  class="hx-grid sm:hx-grid-cols-2 lg:hx-grid-cols-3 hx-grid-cols-1 hx-gap-4 hx-w-full not-prose"
-  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  class="hextra-feature-grid hx-grid sm:max-lg:hx-grid-cols-2 max-sm:hx-grid-cols-1 hx-gap-4 hx-w-full not-prose"
+  {{ with $css }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner }}
 </div>