Enhance index.html and home.css for improved presentation layout and functionality
- 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
@@ -85,6 +85,131 @@ body::after {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
.masthead-lead {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
.masthead-lead strong {
|
||||
color: var(--accent-cyan);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
max-width: 52em;
|
||||
}
|
||||
|
||||
.intro p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.intro code {
|
||||
font-size: 0.9em;
|
||||
padding: 0.12em 0.35em;
|
||||
border-radius: 6px;
|
||||
background: var(--accent-cyan-bg);
|
||||
border: 1px solid var(--border-very-subtle);
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.qr-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.qr-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.qr-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.25rem 1.35rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: rgba(13, 17, 21, 0.55);
|
||||
box-shadow: var(--panel-glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.qr-card h3 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.qr-card-desc {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
color: var(--text-subtle);
|
||||
}
|
||||
|
||||
.qr-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
color: var(--accent-cyan);
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.qr-link:hover,
|
||||
.qr-link:focus-visible {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.qr-link:focus-visible {
|
||||
outline: 2px solid var(--accent-cyan);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.qrcode-wrap {
|
||||
align-self: center;
|
||||
margin-top: auto;
|
||||
padding: 0.5rem;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.qrcode-wrap canvas,
|
||||
.qrcode-wrap img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.talks-section .section-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.talks-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user