Render lone level 1 headings as section-divider slides
A level 1 heading alone on a slide (pandoc marks these .level1) is a
section divider. Follow the IDS reference decks: centre that title on the
slide and leave the bar in its usual top left corner, at the height it has
everywhere else. Since the heading moves to the middle of the slide the bar
cannot hang off it here, so it is painted on the slide itself instead.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: Id5a52aa063ee36d30e72d122589bd0bea5651479
diff --git a/inst/reveal.js-5.1.0/css/theme/source/ids.scss b/inst/reveal.js-5.1.0/css/theme/source/ids.scss
index 2f758c4..e97f0c7 100644
--- a/inst/reveal.js-5.1.0/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.1.0/css/theme/source/ids.scss
@@ -214,6 +214,41 @@
height: calc(100% + #{$idsHeadingSpacing} + #{$idsBarOverlap}) !important;
}
+// Section-divider slides: a level 1 heading alone on a slide (pandoc marks
+// these .level1). The IDS reference decks centre that title on the slide while
+// the bar stays in its usual top left corner, so here the bar cannot hang off
+// the heading -- it is painted on the slide itself, at the height it has on
+// every other slide, and the heading gets none of the top-left treatment.
+$idsTitleHeight: 1.35 * $mainFontSize * 1.2;
+$idsBarBlockHeight: $idsTitleHeight + $idsHeadingSpacing + $idsSubtitleHeight;
+
+.reveal .slides section.level1:not(.title-frame) {
+ height: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ justify-content: center !important;
+}
+
+.reveal .slides section.level1:not(.title-frame)::before {
+ content: "" !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: calc(-1 * #{$idsBandLeft}) !important;
+ width: #{$idsBarWidth} !important;
+ height: #{$idsBarBlockHeight} !important;
+ background: #{$idsOrange} !important;
+}
+
+.reveal .slides section.level1:not(.title-frame) > h1:first-child {
+ text-align: center !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+.reveal .slides section.level1:not(.title-frame) > h1:first-child::before {
+ content: none !important;
+}
+
// Define additional color effects based on Dracula spec
// https://spec.draculatheme.com/
:root {
diff --git a/inst/reveal.js-5.1.0/dist/theme/ids.css b/inst/reveal.js-5.1.0/dist/theme/ids.css
index 96bc70f..ef9e1f5 100644
--- a/inst/reveal.js-5.1.0/dist/theme/ids.css
+++ b/inst/reveal.js-5.1.0/dist/theme/ids.css
@@ -442,6 +442,33 @@
height: calc(100% + 8px + 2px) !important;
}
+.reveal .slides section.level1:not(.title-frame) {
+ height: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ justify-content: center !important;
+}
+
+.reveal .slides section.level1:not(.title-frame)::before {
+ content: "" !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: calc(-1 * var(--ids-band-left, 0px)) !important;
+ width: calc(var(--slide-height) * 0.05) !important;
+ height: 121.4px !important;
+ background: #f6a800 !important;
+}
+
+.reveal .slides section.level1:not(.title-frame) > h1:first-child {
+ text-align: center !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+.reveal .slides section.level1:not(.title-frame) > h1:first-child::before {
+ content: none !important;
+}
+
:root {
--r-bold-color: #f6a800;
--r-list-bullet-color: #f6a800;