From 5d506325232ef33b009fffde04cd1623d10affca Mon Sep 17 00:00:00 2001
From: Ruben <post@rubensolvang.no>
Date: Wed, 15 Oct 2025 19:28:40 +0200
Subject: [PATCH] Add list-card-grid template and update metadata

Update brosjyrer and FAQ pages to use new list-card-grid template
instead of deprecated list_style grid option
---
 content/brosjyrer/metadata.ini      |  2 +-
 content/faq/metadata.ini            |  2 +-
 custom/templates/list-card-grid.php | 94 +++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 custom/templates/list-card-grid.php

diff --git a/content/brosjyrer/metadata.ini b/content/brosjyrer/metadata.ini
index 071a448..d784f42 100644
--- a/content/brosjyrer/metadata.ini
+++ b/content/brosjyrer/metadata.ini
@@ -1,2 +1,2 @@
-list_style = grid
+page_template = list-card-grid
 show_date = false
diff --git a/content/faq/metadata.ini b/content/faq/metadata.ini
index 586c5e5..9a9093c 100644
--- a/content/faq/metadata.ini
+++ b/content/faq/metadata.ini
@@ -1,4 +1,4 @@
 menu = true
 title = "FAQ"
-list_style = grid
+page_template = list-card-grid
 show_date = false
\ No newline at end of file
diff --git a/custom/templates/list-card-grid.php b/custom/templates/list-card-grid.php
new file mode 100644
index 0000000..e3ef835
--- /dev/null
+++ b/custom/templates/list-card-grid.php
@@ -0,0 +1,94 @@
+<?php if (!empty($pageContent)): ?>
+    <article class="list-intro">
+        <?= $pageContent ?>
+    </article>
+<?php endif; ?>
+
+<section class="list-card-grid-wrapper">
+    <div class="list-card-grid">
+        <?php foreach ($items as $item): ?>
+            <article>
+                <?php if ($item['cover']): ?>
+                    <a href="<?= htmlspecialchars($item['url']) ?>">
+                        <img src="<?= htmlspecialchars($item['cover']) ?>" alt="<?= htmlspecialchars($item['title']) ?>">
+                    </a>
+                <?php endif; ?>
+                <h1>
+                    <a href="<?= htmlspecialchars($item['url']) ?>">
+                        <?= htmlspecialchars($item['title']) ?>
+                    </a>
+                </h1>
+                <?php if (($metadata['show_date'] ?? true) && !empty($item['date'])): ?>
+                    <p><?= htmlspecialchars($item['date']) ?></p>
+                <?php endif; ?>
+                <?php if ($item['summary']): ?>
+                    <p><?= htmlspecialchars($item['summary']) ?></p>
+                <?php endif; ?>
+                <div class="card-actions">
+                    <?php if (!empty($item['pdf'])): ?>
+                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="btn-download" download>Last ned PDF</a>
+                    <?php endif; ?>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="btn-read-more">Les mer</a>
+                </div>
+            </article>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<style>
+main > section.list-card-grid-wrapper {
+  margin-top: 1.3em;
+
+  .list-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 45%, 20rem), 1fr));
+    gap: clamp(1rem, 3vw, 2rem);
+  }
+
+  .list-card-grid > article {
+    background-color: white;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    > :not(img, a) {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    h1 {
+      margin-top: 1rem;
+      font-size: clamp(1.5rem, 4vw, 2rem);
+    }
+
+    .card-actions {
+      margin-top: auto;
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+      padding-bottom: 1rem;
+
+      a {
+        margin-top: 1.3rem;
+        border-radius: 1rem;
+        background-color: var(--color-grey);
+        padding: 0.35rem 1rem;
+        color: white;
+        text-decoration: none;
+
+        &:hover {
+          background-color: var(--color-green);
+          color: white;
+        }
+
+        &:focus {
+          outline: 0.1rem var(--color-green) solid;
+          color: var(--color-grey);
+          background-color: white;
+        }
+      }
+    }
+  }
+}
+</style>