0e19040473
button Add a features section with icons and descriptions Include a stats section with live data Add a responsive design with modern CSS features
48 lines
1 KiB
PHP
48 lines
1 KiB
PHP
<?php if (!empty($pageContent)): ?>
|
|
<div class="list-intro">
|
|
<?= $pageContent ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="grid">
|
|
<?php foreach ($items as $item): ?>
|
|
<article class="card">
|
|
<?php if (!empty($item['cover'])): ?>
|
|
<img src="<?= htmlspecialchars($item['cover']) ?>" alt="">
|
|
<?php endif; ?>
|
|
|
|
<h3><a href="<?= htmlspecialchars($item['url']) ?>"><?= htmlspecialchars($item['title']) ?></a></h3>
|
|
|
|
<?php if (($metadata['show_date'] ?? true) && !empty($item['date'])): ?>
|
|
<time><?= htmlspecialchars($item['date']) ?></time>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($item['summary'])): ?>
|
|
<p><?= htmlspecialchars($item['summary']) ?></p>
|
|
<?php endif; ?>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
|
|
gap: var(--space-m);
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: var(--space-s);
|
|
|
|
& img {
|
|
margin-block-end: var(--space-s);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
& h3 {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|
|
</style>
|