ids theme: size title-slide branding for the transcript view
The transcript ("reading mode") clones each slide's children into
#ids-transcript, which hangs off document.body -- outside .reveal, where
the title frame's sizing rules do not reach. Both graphics are svgs
without intrinsic dimensions (the funder logo carries only a viewBox, the
QR is sized by css), so they filled the transcript's whole width: on a
phone the QR and the funder logo took up two screens before the first
line of text.
Give both a reading size inside #ids-transcript: the QR 140px (at most
40% of the width) on its white plate, so it stays tappable and scannable,
and the funder logo 2.5em, about a line of text.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: I2b724515c452f710af49a7838a001c2464c4bf31
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 d121a90..e0a7634 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
@@ -1210,3 +1210,31 @@
#ids-transcript img, #ids-transcript video, #ids-transcript iframe {
max-width: 100%;
}
+
+// The title slide's branding is cloned into the transcript along with the
+// rest of the slide, but outside .reveal, where neither the title frame's
+// sizing rules nor the svg's own (absent) intrinsic dimensions constrain it
+// -- both would fill the transcript's whole width. Give them a size that
+// suits a page one reads rather than presents: the QR stays tappable and
+// scannable, the funder logo shrinks to a line of text.
+#ids-transcript .title-qr {
+ box-sizing: border-box;
+ width: 140px;
+ max-width: 40%;
+ padding: #{$idsLogoInset};
+ background: #fff;
+}
+
+#ids-transcript .title-qr a.qrcode,
+#ids-transcript .title-qr svg {
+ display: block;
+ width: 100%;
+ height: auto;
+ padding: 0;
+}
+
+#ids-transcript img.funder-logo {
+ height: 2.5em;
+ width: auto;
+ margin: 0.6em 0;
+}
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 4798e59..43fe710 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -1224,4 +1224,31 @@
max-width: 100%;
}
+/* The title slide's branding is cloned into the transcript along with the
+ rest of the slide, but outside .reveal, where neither the title frame's
+ sizing rules nor the svg's own (absent) intrinsic dimensions constrain it
+ -- both would fill the transcript's whole width. Give them a size that
+ suits a page one reads rather than presents. */
+#ids-transcript .title-qr {
+ box-sizing: border-box;
+ width: 140px;
+ max-width: 40%;
+ padding: 8px;
+ background: #fff;
+}
+
+#ids-transcript .title-qr a.qrcode,
+#ids-transcript .title-qr svg {
+ display: block;
+ width: 100%;
+ height: auto;
+ padding: 0;
+}
+
+#ids-transcript img.funder-logo {
+ height: 2.5em;
+ width: auto;
+ margin: 0.6em 0;
+}
+
/*# sourceMappingURL=ids.css.map */