ids theme: adaptive vertical centering of slide content
Slides with little content look lost when everything is glued below the
title bar, while packed slides must start at the top. reveal.js' own
center option cannot express this -- it also vertically centers the
headings.
Instead the template groups each slide's body content (everything after
the heading block except speaker notes) into a div.ids-slide-content,
and the theme turns such slides into flex columns of full slide height:
the heading block stays pinned to the top and the wrapper's auto margins
center the content in the remaining space. Auto margins collapse to zero
when there is no free space, so packed slides still start directly below
the heading and overflow downwards exactly as before -- no measuring and
no resize handling involved. The wrapper also reserves the footer band
(--ids-footer-reserve, published from the actual footer height in slide
coordinates), so centered content never covers the footer; slides too
packed to fit above it may, as they always could.
Heading-only section-divider slides keep their dedicated centered-title
layout, the transcript view treats the wrapper transparently, and the
new rules are screen-scoped so the pdf export keeps laying out slides
itself.
Change-Id: Iccfbebebbf18ec860c1ccd950043a84f638c33da
diff --git a/inst/reveal.js-5.2.1/css/theme/source/ids.scss b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
index e833b8f..f431662 100644
--- a/inst/reveal.js-5.2.1/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
@@ -366,6 +366,44 @@
background: #{$idsOrange} !important;
}
+// Adaptive vertical centering of slide content: the template groups each
+// slide's body content (everything after the heading block except speaker
+// notes) into a div.ids-slide-content. Slides carrying such a wrapper become
+// flex columns of full slide height: the heading block stays pinned to the
+// top and the wrapper's auto margins center the content in the remaining
+// space. Auto margins collapse to zero when there is no free space, so
+// packed slides still start directly below the heading and overflow
+// downwards as before -- the drawback that makes reveal.js' own `center`
+// option unusable here (it would also center the headings). The wrapper
+// keeps the footer band free (--ids-footer-reserve, published by the
+// template from the actual footer height), so centered content never
+// covers the footer; slides too packed to fit above it may, as they always
+// could. Display only ever changes for slides reveal.js is actually
+// showing, mirroring the section-divider rule above, which works the same
+// way; screen-only, so the pdf export keeps laying out slides itself.
+@media screen {
+ html .reveal .slides section:not(.stack):not(.title-frame) {
+ height: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ }
+
+ .reveal .slides section:not(.stack):not(.title-frame) > .ids-slide-content {
+ flex: none;
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+ padding-bottom: var(--ids-footer-reserve, 48px);
+
+ // under block layout the first content element's margin-top collapsed
+ // with the heading's margin-bottom; as flex items the two would add up
+ // instead, so drop it and let the heading spacing rule alone define
+ // the gap, as before
+ > :first-child {
+ margin-top: 0 !important;
+ }
+ }
+}
+
.reveal .slides section.level1:not(.title-frame) > h1:first-child {
text-align: center !important;
margin: 0 !important;
diff --git a/inst/reveal.js-5.2.1/dist/theme/ids.css b/inst/reveal.js-5.2.1/dist/theme/ids.css
index dd54e86..8d56808 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -523,6 +523,40 @@
content: none !important;
}
+/* Adaptive vertical centering of slide content: the template groups each
+ slide's body content (everything after the heading block except speaker
+ notes) into a div.ids-slide-content. Slides carrying such a wrapper become
+ flex columns of full slide height: the heading block stays pinned to the
+ top and the wrapper's auto margins center the content in the remaining
+ space. Auto margins collapse to zero when there is no free space, so
+ packed slides still start directly below the heading and overflow
+ downwards as before -- the drawback that makes reveal.js' own `center`
+ option unusable here (it would also center the headings). The wrapper
+ keeps the footer band free (--ids-footer-reserve, published by the
+ template from the actual footer height), so centered content never
+ covers the footer; slides too packed to fit above it may, as they always
+ could. Display only ever changes for slides reveal.js is actually
+ showing, mirroring the section-divider rule above, which works the same
+ way; screen-only, so the pdf export keeps laying out slides itself. */
+@media screen {
+ html .reveal .slides section:not(.stack):not(.title-frame) {
+ height: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ }
+
+ .reveal .slides section:not(.stack):not(.title-frame) > .ids-slide-content {
+ flex: none;
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+ padding-bottom: var(--ids-footer-reserve, 48px);
+ }
+
+ .reveal .slides section:not(.stack):not(.title-frame) > .ids-slide-content > :first-child {
+ margin-top: 0 !important;
+ }
+}
+
:root {
--r-bold-color: #f6a800;
--r-list-bullet-color: #f6a800;