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
*********************************************/