From 10cd7d4364c4caafec78b483e5fe2a33bbd427ec Mon Sep 17 00:00:00 2001
From: ministicraft <worldtocraft@gmail.com>
Date: Tue, 14 Apr 2026 01:03:37 +0200
Subject: [PATCH] fix: follow Reveal.js best practices for slide layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove position:relative from sections (was overriding Reveal.js's
  position:absolute, breaking slide stacking)
- Replace border-top with box-shadow (doesn't affect box model/layout)
- Add padding-top:24px for content clearance below the strip
- Switch center:false → center:true for proper vertical centering
- Use px for global logo positioning (immune to Reveal.js scaling)

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

diff --git a/index.html b/index.html
index d0b7d6f..0ab9b7e 100644
--- a/index.html
+++ b/index.html
@@ -29,16 +29,14 @@
       --strip-color: var(--ods-blue-500);
     }
 
+    /* Blue accent strip via box-shadow so it doesn't affect layout */
     .reveal .slides section {
       text-align: left;
-      border-top: 6px solid var(--strip-color);
-      position: relative;
-    }
-
-    .reveal h1, .reveal h2 {
-      text-align: left;
+      box-shadow: inset 0 6px 0 0 var(--strip-color);
+      padding-top: 24px;
     }
 
+    .reveal h1, .reveal h2 { text-align: left; }
     .reveal h1 { font-size: 1.8em; }
     .reveal h2 { font-size: 1.4em; line-height: 1.2; }
     .reveal p, .reveal li { font-size: 0.85em; }
@@ -62,6 +60,7 @@
       margin-bottom: 0.2em;
     }
 
+    /* Tool logos — positioned within Reveal's slide coordinate system */
     .slide-logo {
       position: absolute;
       bottom: 12px;
@@ -80,10 +79,11 @@
       margin-right: auto;
     }
 
+    /* Persistent logo — outside Reveal container, fixed to viewport */
     .ovh-logo-global {
       position: fixed;
-      bottom: 1em;
-      left: 1em;
+      bottom: 16px;
+      left: 16px;
       height: 28px;
       width: auto;
       opacity: 0.7;
@@ -443,7 +443,7 @@ class webserver {
     backgroundTransition: 'fade',
     controls: true,
     progress: true,
-    center: false,
+    center: true,
     plugins: [ RevealNotes, RevealHighlight ]
   });
 </script>