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:
18
index.html
18
index.html
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user