From c406e8c116cae3f3dd0733d41753f7015c112366 Mon Sep 17 00:00:00 2001
From: ministicraft <worldtocraft@gmail.com>
Date: Tue, 14 Apr 2026 01:19:26 +0200
Subject: [PATCH] style: remove all emoji, fix tool logos to match OVHcloud
 pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove emoji from title (⚙️), Ansible (⚡), Puppet (🐾) slides
- Tool logos now use position:fixed outside Reveal container
  (same pattern as OVHcloud logo — top-left corner)
- Show/hide correct logo via Reveal.js slidechanged event
- Logos are no longer appended inside sections

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 index.html | 43 +++++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

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 @@
 
   <!-- ─── SLIDE 1 : Title ─────────────────────────────────────────── -->
   <section class="title-slide">
-    <h1>⚙️ Configuration as Code</h1>
+    <h1>Configuration as Code</h1>
     <p class="subtitle">
       <img src="https://cdn.simpleicons.org/puppet/C17F00" alt="Puppet" style="height:0.9em; vertical-align:middle;"> Puppet ·
       <img src="https://cdn.simpleicons.org/ansible" alt="Ansible" style="height:0.9em; vertical-align:middle;"> Ansible ·
@@ -242,7 +245,7 @@ output "public_ip" {
 
   <!-- ─── SLIDE 19 : Ansible intro ─────────────────────────────────── -->
   <section class="s-ansible">
-    <h2>⚡ <span class="ansible-col">Ansible</span></h2>
+    <h2><span class="ansible-col">Ansible</span></h2>
     <p>Your servers are provisioned. Now make them do something.</p>
   </section>
 
@@ -313,7 +316,7 @@ output "public_ip" {
 
   <!-- ─── SLIDE 25 : Puppet intro ─────────────────────────────────── -->
   <section class="s-puppet">
-    <h2>🐾 <span class="puppet-col">Puppet</span></h2>
+    <h2><span class="puppet-col">Puppet</span></h2>
     <p>Your servers are configured. Now keep them that way.</p>
   </section>
 
@@ -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);
 </script>
 </body>
 </html>