style: remove all emoji, fix tool logos to match OVHcloud pattern
- 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>
This commit is contained in:
43
index.html
43
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>
|
||||
|
||||
Reference in New Issue
Block a user