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