Fix IDS theme heading and bar layout
The orange bar never reached the slide's top left corner and the headings
stayed centred, because several separate things were fighting:
- reveal.js keeps 4% of the display empty around the content (config
`margin`, default 0.04). No CSS inside the slide can escape that box.
Default it to 0 and add the breathing room back as slide padding.
- Draw the bar as two ::before segments, one on the title and one on the
subtitle, each sized as a percentage of its own heading box. The bar
then always ends at the bottom of the last heading, follows a wrapped
heading, and needs no fixed heights. Slides without a subtitle reserve
the room one would take, so the bar does not change height between
slides.
- Reaching the window's physical left edge needs viewport / scale, and
CSS cannot divide a length by a length. The template now publishes the
letter-/pillarbox bands as --ids-band-left / --ids-band-top and the bar
shifts out by that much; it falls back to 0px, which is already correct
whenever the deck and display aspect ratios agree.
- Headings rendered in a regular-weight, regular-width fallback because
korap.ids-mannheim.de/font/fira-condensed.css returns a 404 page rather
than CSS. Load Fira Sans Extra Condensed from Google Fonts, weight 700.
- Paint the bar as flat #f6a800. orange_bar.png is two-toned, so
stretching it over each segment left a pale seam where they met.
- Left-align body content with the heading text and put the IDS logo's
top on the heading's cap line.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: I199cb4f0c3b766c0774351922d05f171fdbd4e79
diff --git a/inst/reveal.js-5.1.0/dist/theme/ids.css b/inst/reveal.js-5.1.0/dist/theme/ids.css
index 3ee7189..96bc70f 100644
--- a/inst/reveal.js-5.1.0/dist/theme/ids.css
+++ b/inst/reveal.js-5.1.0/dist/theme/ids.css
@@ -4,7 +4,7 @@
* By Marc Kupietz
*/
@import url("https://code.cdn.mozilla.net/fonts/fira.css");
-@import url("https://korap.ids-mannheim.de/font/fira-condensed.css");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;800&family=Fira+Sans:wght@200;300;400;700&family=Fira+Sans+Extra+Condensed:wght@300;700&display=swap");
@import url("https://korap.ids-mannheim.de/font/libertinus.css");
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
@@ -21,13 +21,13 @@
--r-main-color: #222;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
- --r-heading-font: Fira Sans Condensed, Fira Sans, Helvetica, sans-serif;
+ --r-heading-font: Fira Sans Extra Condensed, Fira Sans Condensed, Fira Sans, Helvetica, sans-serif;
--r-heading-color: #f6a800;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: 0.05ex;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
- --r-heading-font-weight: 600;
+ --r-heading-font-weight: 700;
--r-heading1-text-shadow: none;
--r-heading1-size: 2em;
--r-heading2-size: 1.35em;
@@ -361,11 +361,85 @@
}
}
-body {
- background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg"), url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/orange_bar.png") !important;
- background-repeat: no-repeat !important;
- background-position: top 20px right 20px, top 20px left !important;
- background-size: 25vH auto, 4vH 16vH !important;
+.reveal .slides section:not(.stack) {
+ box-sizing: border-box !important;
+ padding-left: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
+ padding-right: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
+}
+
+.reveal .slides section:not(.stack):not(.title-frame) {
+ text-align: left !important;
+}
+
+.reveal .slides section:not(.title-frame) ul,
+.reveal .slides section:not(.title-frame) ol {
+ display: block !important;
+ text-align: left !important;
+ margin-left: 0 !important;
+ padding-left: 0.7em !important;
+}
+
+.reveal .slides section:not(.title-frame) pre {
+ width: auto !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+}
+
+.reveal .slides {
+ background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg");
+ background-repeat: no-repeat;
+ background-position: top 10px right 8px;
+ background-size: calc(var(--slide-height) * 0.25) auto;
+}
+
+.reveal .slides section:not(.title-frame) > h1:first-child,
+.reveal .slides section:not(.title-frame) > h2:first-child {
+ position: relative !important;
+ display: block !important;
+ text-align: left !important;
+ margin: 0 calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) 8px calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) !important;
+ padding: 0 0 0 calc(calc(var(--slide-height) * 0.05) + 24px) !important;
+ font-weight: var(--r-heading-font-weight) !important;
+}
+
+.reveal .slides section:not(.title-frame) > h1:first-child::before,
+.reveal .slides section:not(.title-frame) > h2:first-child::before,
+.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
+ content: "" !important;
+ position: absolute !important;
+ width: calc(var(--slide-height) * 0.05) !important;
+ background: #f6a800 !important;
+}
+
+.reveal .slides section:not(.title-frame) > h1:first-child::before,
+.reveal .slides section:not(.title-frame) > h2:first-child::before {
+ top: 0 !important;
+ left: calc(-1 * var(--ids-band-left, 0px)) !important;
+ height: 100% !important;
+}
+
+.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3)),
+.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3)) {
+ margin-bottom: calc(8px + 45.36px + 20px) !important;
+}
+
+.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3))::before,
+.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3))::before {
+ height: calc(100% + 8px + 45.36px) !important;
+}
+
+.reveal .slides section:not(.title-frame) > h2:first-child + h3 {
+ position: relative !important;
+ text-align: left !important;
+ margin-top: 0 !important;
+ margin-left: 0 !important;
+ margin-bottom: 20px !important;
+}
+
+.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
+ top: calc(-1 * (8px + 2px)) !important;
+ left: calc(-1 * (calc(calc(var(--slide-height) * 0.05) + 24px) + var(--ids-band-left, 0px))) !important;
+ height: calc(100% + 8px + 2px) !important;
}
:root {
@@ -457,17 +531,16 @@
transition: opacity 800ms ease-in-out;
}
-.title-frame div.slide-background-content {
- text-align: right !important;
- background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/Mitglied_WGL_transparent.svg") !important;
+.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 15px bottom 5px !important;
- background-size: 7vH auto !important;
+ background-position: right 15px bottom 5px;
+ background-size: calc(var(--slide-height) * 0.07) auto;
}
@media only screen {
- .title-frame div.slide-background-content {
- background-position: right 45px bottom 5px !important;
+ .reveal .slides section.title-frame {
+ background-position: right 45px bottom 5px;
}
}
@@ -524,10 +597,6 @@
margin-top: -0.5em !important;
}
-.reveal h1:last-child {
- margin-top: 250px;
-}
-
.title-frame h1,
.title-frame h2 {
margin: 0 0 0 0;