fix: move blue strip outside Reveal.js container

Pseudo-elements on sections don't render reliably due to Reveal.js transforms creating stacking contexts. Use a fixed div outside the .reveal container instead (same pattern as the OVHcloud logo). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-04-14 01:10:11 +02:00
parent 27f40806b5
commit 1d750a4c9f
1 changed files with 6 additions and 5 deletions
--- a/index.html
+++ b/index.html
@@ -29,16 +29,16 @@
      --strip-color: var(--ods-blue-500);
    }

-    /* Blue accent strip — pseudo-element doesn't interfere with Reveal.js layout */
-    .reveal .slides section::before {
-      content: '';
-      position: absolute;
+    /* Blue accent strip — fixed outside Reveal.js, always visible */
+    .top-strip {
+      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: var(--strip-color);
-      z-index: 10;
+      z-index: 50;
+      pointer-events: none;
    }

    .reveal .slides section {
@@ -96,6 +96,7 @@
  </style>
 </head>
 <body>
+<div class="top-strip"></div>
 <img src="vendor/ovhcloud-logo.svg" alt="OVHcloud" class="ovh-logo-global">
 <div class="reveal">
 <div class="slides">