diff --git a/index.html b/index.html index 9e71450..3d4a7e5 100644 --- a/index.html +++ b/index.html @@ -63,14 +63,17 @@ margin-bottom: 0.2em; } - /* Tool logos — top-left corner within Reveal.js's positioned sections */ - .slide-logo { - position: absolute; + /* Tool logos — fixed like OVHcloud logo, toggled by JS per slide */ + .tool-logo-global { + position: fixed; top: 16px; left: 16px; width: 40px; height: 40px; opacity: 0.8; + z-index: 50; + pointer-events: none; + display: none; } /* Persistent logo — outside Reveal container, fixed to viewport */ @@ -94,7 +97,7 @@
-

⚙️ Configuration as Code

+

Configuration as Code

Puppet Puppet · Ansible Ansible · @@ -242,7 +245,7 @@ output "public_ip" {

-

Ansible

+

Ansible

Your servers are provisioned. Now make them do something.

@@ -313,7 +316,7 @@ output "public_ip" {
-

🐾 Puppet

+

Puppet

Your servers are configured. Now keep them that way.

@@ -418,16 +421,26 @@ class webserver { 's-puppet': 'https://cdn.simpleicons.org/puppet/C17F00' }; const altNames = {'s-tf': 'Terraform', 's-ansible': 'Ansible', 's-puppet': 'Puppet'}; + + // Create fixed logo elements outside Reveal (like OVHcloud logo) + const logoElements = {}; Object.entries(toolLogos).forEach(([cls, src]) => { - document.querySelectorAll('section.' + cls).forEach(s => { - const img = document.createElement('img'); - img.src = src; - img.alt = altNames[cls]; - img.className = 'slide-logo'; - s.appendChild(img); - }); + const img = document.createElement('img'); + img.src = src; + img.alt = altNames[cls]; + img.className = 'tool-logo-global'; + document.body.appendChild(img); + logoElements[cls] = img; }); + // Show/hide the correct tool logo based on current slide's class + function updateToolLogo() { + const slide = Reveal.getCurrentSlide(); + Object.entries(logoElements).forEach(([cls, img]) => { + img.style.display = slide && slide.classList.contains(cls) ? 'block' : 'none'; + }); + } + Reveal.initialize({ width: 1280, height: 720, @@ -442,7 +455,9 @@ class webserver { progress: true, center: true, plugins: [ RevealNotes, RevealHighlight ] - }); + }).then(updateToolLogo); + + Reveal.on('slidechanged', updateToolLogo);