95 lines
2.7 KiB
PHP
95 lines
2.7 KiB
PHP
|
<?php if (!empty($pageContent)): ?>
|
||
|
|
<article class="list-intro">
|
||
|
|
<?= $pageContent ?>
|
||
|
|
</article>
|
||
|
|
<?php endif; ?>
|
||
|
|
|
||
|
|
<section class="list-grid-wrapper">
|
||
|
|
<div class="list-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="grid-actions">
|
||
|
|
<?php if (!empty($item['pdf'])): ?>
|
||
|
|
<a href="<?= htmlspecialchars($item['pdf']) ?>" class="button" download><?= htmlspecialchars($translations['download_pdf'] ?? 'Download PDF') ?></a>
|
||
|
|
<?php endif; ?>
|
||
|
|
<a href="<?= htmlspecialchars($item['url']) ?>" class="button"><?= htmlspecialchars($translations['read_more'] ?? 'Read more') ?></a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
main > section.list-grid-wrapper {
|
||
|
|
margin-top: 1.3em;
|
||
|
|
|
||
|
|
.list-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 45%, 20rem), 1fr));
|
||
|
|
gap: clamp(1rem, 3vw, 2rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-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);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-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-primary);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: 0.1rem var(--color-primary) solid;
|
||
|
|
color: var(--color-grey);
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|