From 3fe02dd53b0a1bbd20fd95597d1bd22fcd3899bb Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Wed, 25 Jun 2025 08:39:54 -0700
Subject: [PATCH 1/2] Cards: Added back data-mf to fix old theme

---
 layouts/partials/list-main.html      | 25 +++++++++++++++++++++++++
 layouts/shortcodes/card-section.html |  6 ++++--
 layouts/shortcodes/card.html         |  6 +++---
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/list-main.html b/layouts/partials/list-main.html
index 48a1a28..3f350d1 100644
--- a/layouts/partials/list-main.html
+++ b/layouts/partials/list-main.html
@@ -13,6 +13,31 @@ <h1 class="bd-title">
             {{ partial "banner" .}}
             {{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
             {{ if $hasCustomContent }} 
+              {{ $cards := .Page.Scratch.Get "cards" }}
+              <section data-mf="false">
+                <div class="row">
+                  <div class="card-deck">
+                    {{ range .Pages.GroupBy "Section" }}
+                      {{ range .Pages.ByWeight }}
+                        {{ $title := .Title }}
+                        <div class="col-md-5 card">
+                            <div class="card-body">
+                              <h3 class="card-title" style="display: flex; align-items: center; gap: 5px;">
+                                  <i class="fas fa-{{if eq .Kind "page"}}file-alt{{else}}book{{end}} fa-lg card-img-top"></i>
+                                  <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
+                              </h3>
+                              {{ range $cards }}
+                                {{ if eq .title $title }}
+                                  <p>{{ .content }}</p>
+                                {{ end }}
+                              {{ end }}
+                          </div>
+                        </div>
+                      {{ end }}
+                    {{ end }}
+                  </div>
+                </div>  
+              </section>
               {{ .Content }}
             {{ else }}
               <section data-mf="false">
diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html
index c2df99b..593d3af 100644
--- a/layouts/shortcodes/card-section.html
+++ b/layouts/shortcodes/card-section.html
@@ -17,7 +17,7 @@
 {{- $class := "card-grid" -}}
 {{- /* Validate that the parent is card-layout */ -}}
 {{ if eq .Parent.Name "card-layout"}}
-  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
+  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}" data-mf="true" style="display: none;">
     {{- if $title -}}
       <strong class="card-section-title">{{- $title -}}</strong>
       <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>    
@@ -28,7 +28,9 @@
   <div class="row" data-mf="false">
     {{- if $title -}}
         <strong class="card-section-title">{{- $title -}}</strong>
-        <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }} card-deck">{{- .Inner -}}</div>    
+        <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }} card-deck">{{- .Inner -}}</div>   
+    {{- else -}} 
+      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }} card-deck">{{- .Inner -}}</div>   
     {{ end }}
   </div>
 {{ else }}
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index 8f62cf2..38066bc 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -13,7 +13,7 @@
 {{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
 {{- /* 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-container {{ if eq $isFeatured "true" }}featured-card{{ end }}" data-mf="true" style="display: none;">
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
@@ -37,8 +37,8 @@ <h2 class="card-title">{{- $title -}}</h2>
   <div class="col-md-5 card" data-mf="false">
     <div class="card-body">
       <h3 class="card-title" style="display: flex; align-items: center; gap: 5px;">
-        {{- if $icon -}}
-          <img class="card-img-top" src="{{ .Site.BaseURL }}/images/icons/{{ $icon }}.png"/>
+        {{- if $brandIcon -}}
+          <img class="card-img-top" src="{{ .Site.BaseURL }}/images/icons/{{ $brandIcon }}.png"/>
         {{- end -}}
         {{- if ($title) -}}
           <a href="{{- $titleUrl -}}">{{- $title -}}</a>

From fce318ff1d989af1efce5a4d7a941c207cc82474 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Wed, 25 Jun 2025 09:00:35 -0700
Subject: [PATCH 2/2] Cards: Updated styling to be more robust

---
 assets/css/v2/style.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 7d3875c..fdf42d1 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1214,7 +1214,8 @@ h6:has(a):hover {
 
     /* Hide all the cards past 3 if it is a featured card section */
     &.featured-section {
-      .card-section-content.card-grid > *:nth-child(n + 4) {
+      .card-section-content.card-grid
+        > *:nth-child(n + 4 of div.card-container) {
         display: none;
       }
     }
@@ -1244,7 +1245,7 @@ h6:has(a):hover {
   }
 
   /* If there is no featured card, last card that is the 3rd one should be full width */
-  &:not(:has(.featured-card)) .card-container:nth-child(3n):last-child {
+  &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
     grid-column: 1 / -1;
   }
 }