From 8a11fde086b2567f6c0330b3700a09cd00e7b797 Mon Sep 17 00:00:00 2001
From: ministicraft <worldtocraft@gmail.com>
Date: Tue, 14 Apr 2026 01:06:22 +0200
Subject: [PATCH] refactor: align CSS with Reveal.js best practices per docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes based on revealjs.com docs and demo:
- Strip: use ::before pseudo-element instead of box-shadow + padding
  (pseudo-elements don't interfere with Reveal.js layout engine)
- Remove all global font-size overrides (h1, h2, p, li, code, pre)
  — let Reveal.js theme handle default sizing
- Use <small> for secondary text (Reveal.js idiom, see demo)
- Margin: 0.08 → 0.04 (Reveal.js default)
- Section CSS: only text-align:left, nothing else
  (no position, padding, box-shadow, or border overrides)

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

diff --git a/index.html b/index.html
index 0ab9b7e..cb47e49 100644
--- a/index.html
+++ b/index.html
@@ -29,24 +29,26 @@
       --strip-color: var(--ods-blue-500);
     }
 
-    /* Blue accent strip via box-shadow so it doesn't affect layout */
+    /* Blue accent strip — pseudo-element doesn't interfere with Reveal.js layout */
+    .reveal .slides section::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 6px;
+      background: var(--strip-color);
+    }
+
     .reveal .slides section {
       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; }
-    .reveal code { font-size: 0.7em; }
-    .reveal pre { width: 100%; }
 
-    .title-slide { text-align: center !important; }
-    .title-slide h1 { text-align: center; font-size: 2em; margin-bottom: 0.2em; }
-    .title-slide .subtitle { font-size: 1em; color: var(--ods-text); }
-    .title-slide .meta { font-size: 0.7em; color: var(--ods-text); margin-top: 1em; }
+    .title-slide, .title-slide h1 { text-align: center !important; }
+    .title-slide .subtitle { color: var(--ods-text); }
+    .title-slide .meta { font-size: 0.6em; color: var(--ods-text); margin-top: 1em; }
     .title-slide .meta a { color: var(--strip-color); }
 
     .puppet-col  { color: var(--puppet-color); }
@@ -60,7 +62,7 @@
       margin-bottom: 0.2em;
     }
 
-    /* Tool logos — positioned within Reveal's slide coordinate system */
+    /* Tool logos — absolute within Reveal.js's positioned sections */
     .slide-logo {
       position: absolute;
       bottom: 12px;
@@ -109,7 +111,7 @@
   <section>
     <h2>Arnaud Prémel-Cabic</h2>
     <p>Tech Lead @ OVHCloud</p>
-    <p style="color:var(--ods-text); font-size:0.75em;">arnaud.premel-cabic@ovhcloud.com</p>
+    <p><small style="color:var(--ods-text);">arnaud.premel-cabic@ovhcloud.com</small></p>
     <img src="vendor/ovhcloud-logo.svg" alt="OVHcloud" style="height:32px; width:auto; margin-top:1em;">
   </section>
 
@@ -162,7 +164,7 @@
   <section>
     <h2>Configuration as Code</h2>
     <p>Managing infrastructure through machine-readable files, stored in version control.</p>
-    <p style="margin-top:0.8em; color:var(--ods-neutral-600);">Reproducible &nbsp;·&nbsp; Versionable &nbsp;·&nbsp; Auditable</p>
+    <p><small style="color:var(--ods-neutral-600);">Reproducible &nbsp;·&nbsp; Versionable &nbsp;·&nbsp; Auditable</small></p>
   </section>
 
   <!-- ─── SLIDE 11 ──────────────────────────────────────────────────── -->
@@ -434,7 +436,7 @@ class webserver {
   Reveal.initialize({
     width: 1280,
     height: 720,
-    margin: 0.08,
+    margin: 0.04,
     minScale: 0.2,
     maxScale: 2.0,
     hash: true,