Introduce partner and funder logos
Change-Id: I71e00aaa51c2dffe74335c7c4f170e8d507356d6
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 9fd8e45..c55b95f 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
@@ -70,6 +70,11 @@
// doesn't exactly match the configured one.
$idsBarWidthRatio: 0.05;
$idsLogoWidthRatio: 0.25;
+// Partner (second institution) logo: shown next to the IDS logo on every
+// slide when the document sets the `partner_logo` yaml entry (the template
+// then publishes the URL as the --partner-logo custom property).
+$idsPartnerGap: 16px;
+$idsPartnerHeightRatio: 0.085;
$idsBarWidth: calc(var(--slide-height) * #{$idsBarWidthRatio});
$idsHeadingGap: 24px;
@@ -225,10 +230,16 @@
$idsLogoRight: 8px;
.reveal .slides {
- background-image: url('https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg');
+ // Second layer: the optional partner institution logo (--partner-logo is
+ // supplied by the template from the document's `partner_logo` yaml entry);
+ // paints as "none" without it, leaving a harmless empty layer.
+ background-image: url('https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg'),
+ var(--partner-logo, none);
background-repeat: no-repeat;
- background-position: top #{$idsLogoTop} right #{$idsLogoRight};
- background-size: calc(var(--slide-height) * #{$idsLogoWidthRatio}) auto;
+ background-position: top #{$idsLogoTop} right #{$idsLogoRight},
+ top #{$idsLogoTop} right calc(#{$idsLogoRight} + var(--slide-height) * #{$idsLogoWidthRatio} + #{$idsPartnerGap});
+ background-size: calc(var(--slide-height) * #{$idsLogoWidthRatio}) auto,
+ auto calc(var(--slide-height) * #{$idsPartnerHeightRatio});
}
// The orange bar is drawn as a ::before on the headings rather than on the
@@ -565,6 +576,72 @@
height: 100%;
}
+// Website QR code and funder logo on the title slide (document options
+// `website` and `funder_logo`): top-left and bottom-left corners. All
+// logos on the title slide keep the same distance to their respective
+// margins: top 6px / left 8px (QR), top 6px / right 8px (IDS [+ partner]
+// logo), bottom 10px / left 8px (funder), bottom 10px / right 8px (WGL
+// membership logo), so the four corners share one inset vocabulary. The QR
+// is sized generously (a quarter of the slide height) so it stays scannable
+// in all circumstances. Both are DOM elements injected into the title frame
+// by the pandoc template (the QR itself is generated in R by qrlink());
+// absolute positioning sticks to the slide, because reveal.js positions the
+// sections themselves.
+.reveal .slides section.title-frame .title-qr {
+ position: absolute;
+ top: #{$idsLogoTop};
+ left: #{$idsLogoRight};
+ // The generated QR matrix has no quiet zone of its own (dark modules reach
+ // the svg edges), which makes it unscannable; the white plate's padding of
+ // ~4 modules supplies it. The plate's edge is also the element's visual
+ // boundary for the uniform corner insets, hence an outer size of 28% of
+ // the slide height minus the padding on two sides (~23% of pattern).
+ box-sizing: border-box;
+ width: calc(var(--slide-height) * 0.28);
+ padding: calc(var(--slide-height) * 0.025);
+ background: #fff;
+}
+
+.reveal .slides section.title-frame .title-qr a.qrcode,
+.reveal .slides section.title-frame .title-qr svg {
+ display: block;
+ width: 100%;
+ height: auto;
+ margin: 0;
+}
+
+.reveal .slides section.title-frame img.funder-logo {
+ position: absolute;
+ left: #{$idsLogoRight};
+ bottom: 10px;
+ height: calc(var(--slide-height) * 0.07);
+ width: auto;
+}
+
+// Lift the funder logo above the print footer band, like the WGL logo above
+html.reveal-print .reveal .slides section.title-frame img.funder-logo {
+ bottom: 55px;
+}
+
+// The navigation chrome is hidden on the title slide (the template toggles
+// the ids-title-plain class when the title frame is the current slide). Use
+// opacity/visibility rather than display:none so the transition out of the
+// title slide fades the chrome in instead of popping it up, and so reveal.js'
+// own controls bookkeeping keeps working underneath.
+html.ids-title-plain .reveal .controls,
+html.ids-title-plain .reveal .slide-number,
+html.ids-title-plain .reveal .slide-menu-button {
+ opacity: 0 !important;
+ visibility: hidden !important;
+ pointer-events: none !important;
+}
+
+.reveal .controls,
+.reveal .slide-number,
+.reveal .slide-menu-button {
+ transition: opacity 0.4s;
+}
+
/*********************************************
* SLIDES MENU
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 8be1e80..982e0aa 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -430,10 +430,12 @@
}
.reveal .slides {
- background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg");
+ /* Second layer: the optional partner institution logo (--partner-logo is
+ supplied by the template from the document's partner_logo yaml entry) */
+ background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg"), var(--partner-logo, none);
background-repeat: no-repeat;
- background-position: top 6px right 8px;
- background-size: calc(var(--slide-height) * 0.25) auto;
+ background-position: top 6px right 8px, top 6px right calc(8px + var(--slide-height) * 0.25 + 16px);
+ background-size: calc(var(--slide-height) * 0.25) auto, auto calc(var(--slide-height) * 0.085);
}
.reveal .slides section:not(.title-frame) > h1:first-child,
@@ -674,6 +676,55 @@
height: 100%;
}
+.reveal .slides section.title-frame .title-qr {
+ position: absolute;
+ top: 6px;
+ left: 8px;
+ /* The generated QR matrix has no quiet zone of its own (dark modules
+ reach the svg edges); the white plate's padding supplies it. */
+ box-sizing: border-box;
+ width: calc(var(--slide-height) * 0.28);
+ padding: calc(var(--slide-height) * 0.025);
+ background: #fff;
+}
+
+.reveal .slides section.title-frame .title-qr a.qrcode,
+.reveal .slides section.title-frame .title-qr svg {
+ display: block;
+ width: 100%;
+ height: auto;
+ margin: 0;
+}
+
+.reveal .slides section.title-frame img.funder-logo {
+ position: absolute;
+ left: 8px;
+ bottom: 10px;
+ height: calc(var(--slide-height) * 0.07);
+ width: auto;
+}
+
+/* Lift the funder logo above the print footer band, like the WGL logo */
+html.reveal-print .reveal .slides section.title-frame img.funder-logo {
+ bottom: 55px;
+}
+
+/* The navigation chrome is hidden on the title slide (the template toggles
+ the ids-title-plain class when the title frame is the current slide) */
+html.ids-title-plain .reveal .controls,
+html.ids-title-plain .reveal .slide-number,
+html.ids-title-plain .reveal .slide-menu-button {
+ opacity: 0 !important;
+ visibility: hidden !important;
+ pointer-events: none !important;
+}
+
+.reveal .controls,
+.reveal .slide-number,
+.reveal .slide-menu-button {
+ transition: opacity 0.4s;
+}
+
/*********************************************
* SLIDES MENU
*********************************************/
diff --git a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
index 9d49602..cf56f8e 100644
--- a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
+++ b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
@@ -130,10 +130,18 @@
</style>
$for(css)$
- <link rel="stylesheet" href="$css$"/>
-$endfor$
+ <link rel="stylesheet" href="$css$"/>
+ $endfor$
+$if(theme-ids)$
+$if(partner_logo)$
+ <!-- partner institution logo: shown next to the IDS logo on every slide.
+ Only the URL is supplied here; the geometry lives in the IDS theme
+ (added as a second background layer on .reveal .slides) -->
+ <style>:root { --partner-logo: url("$partner-logo-src$"); }</style>
+$endif$
+$endif$
$for(header-includes)$
- $header-includes$
+ $header-includes$
$endfor$
</head>
<body>
@@ -145,6 +153,16 @@
$if(theme-ids)$
$if(title)$
<section class="title-frame" id="$idprefix$title-slide">
+$if(partner_logo)$
+ <!-- partner-logo: also shown together with the IDS logo on every slide
+ (via the injected background rule in <head>) -->
+$endif$
+$if(website-qr)$
+ <div class="title-qr">$website-qr$</div>
+$endif$
+$if(funder_logo)$
+ <img class="funder-logo" src="$funder-logo-src$" alt="" />
+$endif$
<div class="author">
$for(author)$
$if(author.name)$
@@ -765,6 +783,23 @@
$if(theme-ids)$
<script>
+ // IDS theme: the navigation chrome (arrows, slide number, menu button) is
+ // hidden on the title slide -- it already carries title, authors, logos and
+ // QR code, and the bare first impression follows the IDS reference decks.
+ (function () {
+ function toggle() {
+ var slide = Reveal.getCurrentSlide();
+ document.documentElement.classList.toggle('ids-title-plain',
+ !!(slide && slide.classList.contains('title-frame')));
+ }
+ Reveal.on('ready', toggle);
+ Reveal.on('slidechanged', toggle);
+ })();
+</script>
+$endif$
+
+$if(theme-ids)$
+<script>
// IDS theme: long slide headings should shrink onto one line instead of
// wrapping (and pushing the orange bar taller or overflowing the slide).
// Slide content is laid out in fixed slide coordinates and only ever scaled