Cards: Replace with data-grid

Author: lamATnginx

assets/css/v2/style.css

@@ -880,6 +880,9 @@ nav {
     [data-grid="last-third"] {
       grid-column: 1;
     }
+    [data-grid="halve"] {
+      grid-column: 1;
+    }
 
     @media (min-width: 55rem) {
       max-width: var(--content-max-width);
@@ -905,6 +908,10 @@ nav {
       [data-grid="last-third"] {
         grid-column: 8 / -1;
       }
+
+      [data-grid="halve"] {
+        grid-column: span 6;
+      }
     }
   }
 
@@ -1451,7 +1458,7 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-.text-content .card-layout {
+.card-layout {
   grid-column: 1;
 
   .card-section {
@@ -1463,65 +1470,53 @@ h6:has(a):hover {
       font-weight: 500;
     }
 
-    /* Hide all the cards past 3 if it is a featured card section */
     &.featured-section {
-      .card-section-content.card-grid
-        > *:nth-child(n + 4 of div.card-container) {
+      /* Hide all the cards past 3 if it is a featured card section */
+      .card-section-content > *:nth-child(n + 4 of div.card) {
         display: none;
       }
     }
   }
-}
 
-/* Optional grid layout */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
-  gap: 1.5rem;
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
 
-  .card-container {
-    border: 1px solid oklch(var(--color-codeblock-border));
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem;
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
 
-    &.featured-card {
-      /* If there is a need for a featured card, only the featured card should be full length */
-      grid-column: 1 / -1;
+      .card-brand-icon {
+        height: 20px;
+        width: auto;
+      }
 
-      /* If there is a featured card AND two cards, the last one should be full length */
-      ~ .card-container:nth-child(2n):last-child {
-        grid-column: 1 / -1;
+      h2 {
+        padding: 0;
+        margin: 0;
+        font-size: 1rem;
       }
     }
   }
-
-  /* If there is no featured card, last card that is the 3rd one should be full width */
-  &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
-    grid-column: 1 / -1;
-  }
 }
 
-.card-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-
-  .card-header {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
+/* Optional grid layout */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: 1.5rem;
 
-    .card-brand-icon {
-      height: 20px;
-      width: auto;
-    }
+  @media (max-width: 68rem) {
+    grid-template-columns: 1fr;
+  }
 
-    h2 {
-      padding: 0;
-      margin: 0;
-      font-size: 1rem;
-    }
+  .card {
+    border: 1px solid oklch(var(--color-codeblock-border));
+    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+    padding: 1rem;
   }
 }
 

layouts/shortcodes/card.html

@@ -3,17 +3,30 @@
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
 {{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
+{{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
+
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $isFeaturedParam) -}}
   {{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
 {{- end -}}
 {{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
-{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
-{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
-{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
+
+{{- if not (in (slice "true" "false") $isFullSizeParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}}
+{{- end -}}
+{{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}}
+
+{{- /* Set up the positioning */ -}}
+{{ $dataGrid := "" }}
+{{ if or (eq $isFullSize "true") (eq $isFeatured "true") }}
+  {{ $dataGrid = "wide"}}
+{{ else }}
+  {{ $dataGrid = "halve"}}
+{{ end }}
+
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
-  <div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
+  <div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}">
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}