Added back data-mf to fix old theme (#285)

* Cards: Added back data-mf to fix old theme

* Cards: Updated styling to be more robust

Author: lamATnginx

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;
   }
 }

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">

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 }}

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>