mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
cca3d08f05
- Convert .apropos-toc <nav> to <details class="toc" open> in all three templates - Add caret-down icon to summary (visible only on mobile via media queries) - Desktop (≥768px): sticky sidebar via CSS grid, force-open via pointer-events:none, hide caret - Mobile (≤767px): single column, collapsible TOC with rotating caret, margin-top below search bar - Rename .apropos-toc-link to .toc-sidebar-link - Merge 900px and 600px breakpoints into single 600px mobile media query - Rename apropos.css → content-page.css; update 3 controller references
118 lines
5.0 KiB
PHP
118 lines
5.0 KiB
PHP
<?php
|
|
/**
|
|
* Render a comma-separated list of entries with links.
|
|
* Entries joined with comma, last two joined with " & ".
|
|
*/
|
|
function renderEntries(array $entries): string
|
|
{
|
|
if (empty($entries)) {
|
|
return "";
|
|
}
|
|
$parts = [];
|
|
foreach ($entries as $e) {
|
|
$text = htmlspecialchars($e["text"] ?? "");
|
|
$url = $e["url"] ?? "";
|
|
if (!empty($url)) {
|
|
$parts[] =
|
|
'<span class="apropos-entry"><a href="' .
|
|
htmlspecialchars($url) .
|
|
'" target="_blank" rel="noopener">' .
|
|
$text .
|
|
"</a></span>";
|
|
} else {
|
|
$parts[] = '<span class="apropos-entry">' . $text . "</span>";
|
|
}
|
|
}
|
|
$count = count($parts);
|
|
if ($count === 1) {
|
|
return $parts[0];
|
|
}
|
|
$prefix = implode(", ", array_slice($parts, 0, $count - 2));
|
|
$suffix = implode(" & ", array_slice($parts, -2));
|
|
return $prefix !== "" ? $prefix . ", " . $suffix : $suffix;
|
|
} ?>
|
|
<main class="page-content" id="main-content">
|
|
|
|
<!-- Table of contents: collapsible on mobile, force-open on desktop -->
|
|
<details class="toc" open>
|
|
<summary><?= icon('caret-down', 0, 'toc-caret') ?> PARTIES</summary>
|
|
<ul>
|
|
<li><a href="#apropos-intro">À propos</a></li>
|
|
<?php if (!empty($contacts)): ?>
|
|
<li><a href="#apropos-contacts">Contacts</a></li>
|
|
<?php endif; ?>
|
|
<li><a href="#apropos-credits">Crédits</a></li>
|
|
</ul>
|
|
<?php if (!empty($sidebarLinks)): ?>
|
|
<?php foreach ($sidebarLinks as $sl): ?>
|
|
<div class="toc-sidebar-link">
|
|
<a href="<?= htmlspecialchars($sl['url'] ?? '#') ?>" target="_blank" rel="noopener">
|
|
<?= htmlspecialchars($sl['label'] ?? 'Lien') ?> ↗
|
|
</a>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</details>
|
|
|
|
<!-- Intro text from DB -->
|
|
<section class="content-section" id="apropos-intro">
|
|
<?= $aboutHtml ?>
|
|
</section>
|
|
|
|
<?php if (!empty($contacts)): ?>
|
|
<section class="content-section" id="apropos-contacts">
|
|
<h2 class="content-section-title">Contacts</h2>
|
|
<div class="apropos-contacts-grid">
|
|
<?php foreach ($contacts as $group): ?>
|
|
<address class="apropos-contact-card">
|
|
<?= renderEntries($group["entries"] ?? []) ?>
|
|
<?php if (!empty($group["role"])): ?>
|
|
<span><?= htmlspecialchars($group["role"]) ?></span>
|
|
<?php endif; ?>
|
|
<?php
|
|
$emails = array_filter(
|
|
array_column($group["entries"] ?? [], "email"),
|
|
fn($e) => !empty($e),
|
|
);
|
|
foreach ($emails as $email): ?>
|
|
<a href="<?= EmailObfuscator::mailto($email) ?>"><?= EmailObfuscator::email($email) ?></a>
|
|
<?php endforeach;
|
|
?>
|
|
</address>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- Credits section (hardcoded) -->
|
|
<section class="content-section" id="apropos-credits">
|
|
<h2 class="content-section-title">Crédits</h2>
|
|
<dl class="apropos-credits-list">
|
|
<div class="apropos-credit-row">
|
|
<dt>Design & développement</dt>
|
|
<dd>
|
|
<a class="apropos-entry" target="_blank" href='mailto:oli98marly@gmail.com
'>Olivia Marly</a>,
|
|
<a class="apropos-entry" target="_blank" href='https://tgm.happyngreen.fr'>Théophile Gerveau-Mercier</a> &
|
|
<a class="apropos-entry" target="_blank" href='https://theohennequin.com'>Théo Hennequin</a>
|
|
</dd>
|
|
</div>
|
|
<div class="apropos-credit-row">
|
|
<dt>Typographies</dt>
|
|
<dd>
|
|
<a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/ductus'><b>Ductus</b> - Amélie Dumont</a> &
|
|
<a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/bbb-dm-sans'><b>BBB DM Sans</b> - Camille Circlude, Eugénie Bidaut, Mariel Nils, Bérénice Bouin</a>
|
|
</dd>
|
|
</div>
|
|
<div class="apropos-credit-row">
|
|
<dt>Iconographie</dt>
|
|
<dd>
|
|
<a class="apropos-entry" target="_blank" href="https://phosphoricons.com/">Phosphor Icons</a> —
|
|
<a class="apropos-entry" target="_blank" href="https://mit-license.org/">MIT</a>,
|
|
par Helena Zhang et Tobias Fried
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
</main>
|