Fix print to pdf
Change-Id: I27f134c1ee74fe06a7f4579f9f4845da5d5c7ef1
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 41a1e43..de961f5 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
@@ -107,7 +107,12 @@
// body content lines up with the heading text rather than with the bar.
$idsContentInset: calc(#{$idsBarWidth} + #{$idsHeadingGap});
-.reveal .slides section:not(.stack) {
+// The html prefix is solely about specificity: reveal's print styles
+// (html.reveal-print .reveal .slides section { padding: 0 !important }) would
+// otherwise beat this rule and flatten the inset on ?print-pdf pages. An html
+// prefix ties that specificity, and since the theme is loaded after
+// reveal.css, this rule wins both on screen and in print.
+html .reveal .slides section:not(.stack) {
box-sizing: border-box !important;
padding-left: #{$idsContentInset} !important;
padding-right: #{$idsContentInset} !important;
@@ -481,6 +486,70 @@
transition: opacity 800ms ease-in-out;
}
+/* In print, the footer's negative stacking drops it behind the .pdf-page
+ * backgrounds (z-index 1); lift it above them. position: fixed repeats it at
+ * the bottom of every printed page. */
+html.reveal-print #ids-footer {
+ z-index: 100 !important;
+}
+
+// reveal's print CSS gives every .pdf-page z-index:1, which forms a separate
+// stacking context per page. The slide-number-pdf lives INSIDE such a page, so
+// its own z-index only competes within the page: the footer (z-index 100 at
+// root level) always paints over it, and raising the number's z-index alone
+// cannot help. Remove the per-page stacking context in print (the pages are
+// separated by page-break-after:always anyway, so nothing needs stacking), and
+// the number's z-index 200 wins against the footer globally. Position stays
+// the theme's screen rule (right:29px / bottom:22px), which puts the number
+// inside the footer band with its white background cutting the dotted line --
+// the same look as on screen.
+html.reveal-print .reveal .slides .pdf-page {
+ z-index: auto !important;
+}
+
+// On screen the number is flanked by the arrow buttons, so its slightly raised
+// baseline reads as deliberate; in print it shares the footer band with the
+// author/title/date line, whose vertically centered text has its baseline
+// ~19px above the page bottom. The number's screen offset (bottom:22px, 14px
+// font from reveal's print rule) puts its baseline ~25px up. 15px aligns the
+// two baselines. Print-only: the screen rule keeps its 22px.
+html.reveal-print div.slide-number-pdf {
+ z-index: 200 !important;
+ bottom: 15px !important;
+}
+
+// On screen the bar segments shift left by --ids-band-left so the bar reaches
+// the window's physical edge when the slide is pillarboxed. In print there are
+// no bands (.pdf-page == slide box), and if the band values are ever stale
+// (e.g. an outdated template script), a nonzero band-left would push the
+// segments outside the pdf-page, whose overflow:hidden then clips them.
+// Pin the geometry explicitly for print instead of trusting the custom
+// property: title segments start at the heading's (== pdf-page's) left edge,
+// the subtitle segment (which lives in the text column, inset by
+// $idsContentInset) reaches back out by exactly the inset, and the level1
+// divider bar starts at the section's left edge. Widths stay the normal bar
+// width, so the visible result is pixel-identical to the on-screen bar.
+html.reveal-print .reveal .slides section:not(.title-frame) > h1:first-child::before,
+html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child::before {
+ left: 0 !important;
+}
+
+html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
+ left: calc(-1 * #{$idsContentInset}) !important;
+}
+
+html.reveal-print .reveal .slides section.level1:not(.title-frame)::before {
+ left: 0 !important;
+}
+
+// The WGL membership logo sits at bottom:10px of the title frame -- inside
+// the footer's ~46px band on print pages (the footer is force-shown on every
+// page in print view and cannot be hidden per page, position:fixed). Lift the
+// logo above the footer in print only; the screen layout stays put.
+html.reveal-print .reveal .slides section.title-frame {
+ background-position: right 8px bottom 55px;
+}
+
// Like the orange bar/IDS logo above, this is painted on the slide itself
// (rather than on .slide-background-content, which spans the raw,
// unscaled viewport) so it stays pinned to the title slide's true