arnault/Talks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance index.html and home.css for improved presentation layout and functionality

Browse Source 
- Updated index.html to include an introductory section, quick links with QR codes, and a structured layout for presentations.
- Added styling in home.css for new sections, including .masthead-lead, .intro, and .qr-section, to improve visual hierarchy and user experience.
- Implemented QR code generation for easy access to the code repository and presentation slides.
This commit is contained in:
Le Prévost-Corvellec Arnault
2026-04-08 23:44:26 +02:00
parent da748c2cae
commit 4b45521f01
2 changed files with 196 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
content/index.html
View File

@@ -12,21 +12,84 @@
<div class="page">
<header class="masthead">
<h1>Talks</h1>
<p>Présentations (Reveal.js) — même charte visuelle que le site Specificat.</p>
<p class="masthead-lead">
Présentations techniques au format <strong><a href="https://revealjs.com/" target="_blank" rel="noopener noreferrer">Reveal.js</a></strong>
</p>
</header>
<main class="talks-grid" aria-label="Liste des présentations">
<a class="talk-card" href="kubernetes-hell-to-heaven/">
<h2>Kubernetes Operators</h2>
<p>De l’enfer au paradis — Kubernetes, opérateurs et boucle de réconciliation.</p>
<span class="meta">Dossier · kubernetes-hell-to-heaven</span>
</a>
</main>
<section class="intro" aria-labelledby="intro-heading">
<h2 id="intro-heading" class="section-title">À propos de ce site</h2>
<p>
Ce site regroupe les slides utilisées pour nos conférences et ateliers : navigation clavier, mode plein écran,
export PDF possible selon les thèmes. Le contenu vit dans le dépôt Git <em>Talks</em> ; les mises à jour du
dossier <code>content/</code> sont déployées automatiquement.
</p>
<p>
En salle ou en visio, vous pouvez partager l’URL des slides ou le dépôt source pour que le public récupère les
liens et le code — les QR codes ci-dessous facilitent l’accès depuis un téléphone.
</p>
</section>
<section class="qr-section" aria-labelledby="qr-heading">
<h2 id="qr-heading" class="section-title">Liens rapides</h2>
<div class="qr-grid">
<article class="qr-card">
<h3>Dépôt de code</h3>
<p class="qr-card-desc">Sources, CI et configuration du site.</p>
<a class="qr-link" href="https://git.specificat.io/arnault/Talks">git.specificat.io/arnault/Talks</a>
<div id="qrcode-repo" class="qrcode-wrap" aria-hidden="true"></div>
</article>
<article class="qr-card">
<h3>Ce site (slides)</h3>
<p class="qr-card-desc">URL à projeter ou à partager pendant une présentation.</p>
<a class="qr-link" id="qr-site-link" href="./">…</a>
<div id="qrcode-site" class="qrcode-wrap" aria-hidden="true"></div>
</article>
</div>
</section>
<section class="talks-section" aria-labelledby="talks-heading">
<h2 id="talks-heading" class="section-title">Présentations</h2>
<div class="talks-grid">
<a class="talk-card" href="kubernetes-hell-to-heaven/">
<h2>Kubernetes Operators</h2>
<p>De l’enfer au paradis — Kubernetes, opérateurs et boucle de réconciliation.</p>
<span class="meta">Dossier · kubernetes-hell-to-heaven</span>
</a>
</div>
</section>
<footer class="site-footer">
Contenu servi depuis le dépôt <em>Talks</em> (dossier <code>content/</code>).
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<script>
(function () {
var u = new URL(window.location.href);
u.hash = "";
var siteUrl = u.href;
var siteLink = document.getElementById("qr-site-link");
if (siteLink) {
siteLink.href = siteUrl;
siteLink.textContent = siteUrl.replace(/^https?:\/\//, "");
}
new QRCode(document.getElementById("qrcode-repo"), {
text: "https://git.specificat.io/arnault/Talks",
width: 200,
height: 200,
});
new QRCode(document.getElementById("qrcode-site"), {
text: siteUrl,
width: 200,
height: 200,
});
})();
</script>
</body>
</html>