fix: follow Reveal.js best practices for slide layout

- 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>
This commit is contained in:
2026-04-14 01:03:37 +02:00
parent c01de466df
commit 10cd7d4364

View File

@@ -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>