Cards: Make cards fully clickable + small bug fix with grid ordering

Author: lamATnginx

assets/css/v2/style.css

@@ -779,6 +779,12 @@ nav {
     a {
       color: oklch(var(--color-foreground));
       text-decoration-color: oklch(var(--color-background));
+
+      &:hover {
+        box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
+        text-decoration-color: oklch(var(--color-background));
+        border: 1px solid oklch(var(--color-brand) / 0.8);
+      }
     }
 
     .headerlink {
@@ -791,17 +797,11 @@ nav {
     }
 
     > * {
-      grid-row: 1;
       grid-column: 1 / -1;
     }
 
-    p {
-      grid-row: 2;
-    }
-
-    .card-layout {
-      grid-row: 3;
-      grid-column: 1 / -1;
+    > p {
+      grid-column: 1;
     }
   }
 }
@@ -1489,9 +1489,11 @@ h6:has(a):hover {
   }
 
   .card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    .card-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
 
     .card-header {
       display: flex;

layouts/shortcodes/card-section.html

@@ -20,7 +20,7 @@
   <div class="card-section{{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
     {{- if $title -}}
       <strong class="card-section-title">{{- $title -}}</strong>
-      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{- .Inner -}}</div>    
+      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{ .Inner }}</div>    
     {{ else }}
       <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{ .Inner }}</div>    
     {{ end }}

layouts/shortcodes/card.html

@@ -1,5 +1,5 @@
 {{- $title := .Get "title" -}}
-{{- $titleUrl := .Get "titleUrl" | default "/" -}} 
+{{- $titleUrl := .Get "titleUrl" | default "." -}} 
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
 {{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
@@ -34,27 +34,23 @@
 
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
-  <div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}">
+<a href="{{- $titleUrl -}}" alt="{{- $title -}}" class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}">
+  <div class="card-container">
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
           <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
-        {{- else -}}
-          {{- if $icon -}}
-            {{ partial "lucide" (dict "context" . "icon" $icon) }}
-          {{- end -}}
-        {{- end -}}
-        {{- if $titleUrl -}}
-          <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
-        {{- else -}}
-          <h2 class="card-title">{{- $title -}}</h2>
+        {{- else if $icon -}}
+          {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}
+        <h2 class="card-title">{{- $title -}}</h2>
       </div>
     {{- else -}}
       {{ errorf "Mainframe: Missing param 'title'" }}
     {{- end -}}
-    {{ .Inner }}
+    <div class="card-content">{{ .Inner }}</div>
   </div>
+</a>
 {{- else -}}
   {{ errorf "The '<card>' must be nested directly inside the shortcode '<card-section>'. Please see the exampleSite for an example of usage." }}
 {{- end -}}