Improve À propos page layout: sticky TOC nav, bordered contact rows, credits dl grid

This commit is contained in:
Pontoporeia
2026-04-07 14:21:38 +02:00
parent dddfc8554b
commit 11a665e096
3 changed files with 294 additions and 126 deletions

View File

@@ -44,46 +44,67 @@ $bodyClass = 'apropos-body';
<main class="apropos-main" id="main-content">
<div class="apropos-layout">
<!-- LEFT: main text (from DB, Markdown-rendered) -->
<div class="prose">
<?= $aboutHtml ?>
</div>
<!-- LEFT: sticky table of contents -->
<nav class="apropos-toc" aria-label="Sections de la page">
<p class="apropos-toc-label">Parties</p>
<ul>
<li><a href="#apropos-intro">À propos</a></li>
<?php if (!empty($apropos['contacts'])): ?>
<li><a href="#apropos-contacts">Contacts</a></li>
<?php endif; ?>
<?php if (!empty($apropos['credits'])): ?>
<li><a href="#apropos-credits">Crédits</a></li>
<?php endif; ?>
</ul>
<div class="apropos-toc-erg">
<a href="<?= htmlspecialchars($apropos['erg_url']) ?>" target="_blank" rel="noopener">
Site de l'erg ↗
</a>
</div>
</nav>
<!-- RIGHT: links, contacts, credits (data from config/apropos.php) -->
<aside class="apropos-aside">
<!-- MIDDLE: main prose + sections -->
<div class="apropos-content">
<section>
<h2 class="apropos-section-title">
<a href="<?= htmlspecialchars($apropos['erg_url']) ?>" target="_blank" rel="noopener">Site de l'erg</a>
</h2>
<!-- Intro text from DB -->
<section class="apropos-section" id="apropos-intro">
<div class="prose">
<?= $aboutHtml ?>
</div>
</section>
<?php if (!empty($apropos['contacts'])): ?>
<section>
<!-- Contacts section -->
<section class="apropos-section" id="apropos-contacts">
<h2 class="apropos-section-title">Contacts</h2>
<?php foreach ($apropos['contacts'] as $contact): ?>
<address>
<strong><?= htmlspecialchars($contact['name']) ?></strong>
<span><?= htmlspecialchars($contact['role']) ?></span>
<a href="mailto:<?= htmlspecialchars($contact['email']) ?>"><?= htmlspecialchars($contact['email']) ?></a>
</address>
<?php endforeach; ?>
<div class="apropos-contacts-grid">
<?php foreach ($apropos['contacts'] as $contact): ?>
<address class="apropos-contact-card">
<strong><?= htmlspecialchars($contact['name']) ?></strong>
<span><?= htmlspecialchars($contact['role']) ?></span>
<a href="mailto:<?= htmlspecialchars($contact['email']) ?>"><?= htmlspecialchars($contact['email']) ?></a>
</address>
<?php endforeach; ?>
</div>
</section>
<?php endif; ?>
<?php if (!empty($apropos['credits'])): ?>
<section>
<!-- Credits section -->
<section class="apropos-section" id="apropos-credits">
<h2 class="apropos-section-title">Crédits</h2>
<?php foreach ($apropos['credits'] as $credit): ?>
<p class="apropos-credits-text">
<?= htmlspecialchars($credit['label']) ?> : <?= htmlspecialchars($credit['value']) ?>
</p>
<?php endforeach; ?>
<dl class="apropos-credits-list">
<?php foreach ($apropos['credits'] as $credit): ?>
<div class="apropos-credit-row">
<dt><?= htmlspecialchars($credit['label']) ?></dt>
<dd><?= htmlspecialchars($credit['value']) ?></dd>
</div>
<?php endforeach; ?>
</dl>
</section>
<?php endif; ?>
</aside>
</div>
</div>
</main>