Title slide: align all four corners, make QR codes scalable
qrcode::generate_svg() paints the code into a fixed 300x300 canvas and
emits no viewBox, so the svg could not be resized by CSS: given a smaller
box it kept drawing at full size and only its top left corner stayed
visible. qr_svg_fit() adds a viewBox cropped to the dark modules, so the
code scales to whatever box it is placed in and its quiet zone becomes
the surrounding layout's business -- the white plate behind the title
slide's code, and padding on a.qrcode elsewhere.
With that in place all four title-slide corners share one 8px inset
measured to the visible ink: IDS (plus partner) logo top right, website
QR top left, funder logo bottom left, WGL membership logo bottom right.
The funder logo previously sat 20px lower than intended, because
reveal.js' default image margin adds itself to the offset of an
absolutely positioned image.
Also point the documented repository url at gitlab rather than gerrit,
and give the ids example deck an Overview slide.
Change-Id: I27447527345b71572a9e952bc21f542eba1ec352
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 c55b95f..4691a64 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
@@ -224,10 +224,12 @@
// The IDS logo stays a slide-wide watermark (top right of every slide,
// including the title page). The SVG carries no internal padding of its own,
-// so it needs an explicit inset from the slide's right edge; the top offset is
-// chosen so the logo's cap line meets the top of the heading text.
-$idsLogoTop: 6px;
-$idsLogoRight: 8px;
+// so it needs an explicit inset from the slide's edges. That inset is shared
+// by everything that sits in a corner of the slide -- IDS (+ partner) logo
+// top right, website QR top left, funder logo bottom left, WGL membership
+// logo bottom right -- and is used for both edges of each corner, so all
+// four keep exactly the same distance to the slide's borders.
+$idsLogoInset: 8px;
.reveal .slides {
// Second layer: the optional partner institution logo (--partner-logo is
@@ -236,8 +238,8 @@
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},
- top #{$idsLogoTop} right calc(#{$idsLogoRight} + var(--slide-height) * #{$idsLogoWidthRatio} + #{$idsPartnerGap});
+ background-position: top #{$idsLogoInset} right #{$idsLogoInset},
+ top #{$idsLogoInset} right calc(#{$idsLogoInset} + var(--slide-height) * #{$idsLogoWidthRatio} + #{$idsPartnerGap});
background-size: calc(var(--slide-height) * #{$idsLogoWidthRatio}) auto,
auto calc(var(--slide-height) * #{$idsPartnerHeightRatio});
}
@@ -558,47 +560,51 @@
// 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;
+ background-position: right #{$idsLogoInset} 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
// bottom-right corner instead of the browser window's. Its margin mirrors
-// the IDS logo's (top 6px / right 8px of the slide), so the two sit on
-// one shared inset.
+// the IDS logo's, so the two sit on one shared inset.
.reveal .slides section.title-frame {
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/Mitglied_WGL_transparent.svg");
background-repeat: no-repeat;
- background-position: right 8px bottom 10px;
+ background-position: right #{$idsLogoInset} bottom #{$idsLogoInset};
background-size: calc(var(--slide-height) * 0.1) auto;
/* full slide height, so "bottom" really is the slide's bottom edge */
height: 100%;
}
+// qrlink() codes placed anywhere else in a deck: qr_svg_fit() crops the svg
+// to the dark modules, so the quiet zone the code needs to stay scannable is
+// this padding (which also keeps a code readable on a dark background).
+.reveal a.qrcode {
+ display: inline-block;
+ padding: 0.5em;
+ background: #fff;
+}
+
// 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.
+// `website` and `funder_logo`): top-left and bottom-left corners. Like the
+// two logos on the right, they keep $idsLogoInset to both slide edges --
+// measured to the visible ink, so that all four corners look alike. 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.
+//
+// qrlink() crops the svg to the dark modules, so the quiet zone the code
+// needs to stay scannable is this white plate's padding -- which is also
+// what puts the modules themselves at $idsLogoInset from the slide's edges,
+// the plate sitting flush in the corner (invisible on the white slide).
.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).
+ top: 0;
+ left: 0;
box-sizing: border-box;
width: calc(var(--slide-height) * 0.28);
- padding: calc(var(--slide-height) * 0.025);
+ padding: #{$idsLogoInset};
background: #fff;
}
@@ -608,13 +614,18 @@
width: 100%;
height: auto;
margin: 0;
+ // the quiet zone comes from the plate around it here
+ padding: 0;
}
.reveal .slides section.title-frame img.funder-logo {
position: absolute;
- left: #{$idsLogoRight};
- bottom: 10px;
+ left: #{$idsLogoInset};
+ bottom: #{$idsLogoInset};
height: calc(var(--slide-height) * 0.07);
+ // reveal.js gives images a vertical margin, which for an absolutely
+ // positioned one would add itself to the inset above.
+ margin: 0;
width: auto;
}