escience_theme 0.2.0 → 0.3.0

package/README.md

@@ -49,9 +49,17 @@ Set the look of a slide with `data-state`, e.g. in reveal.js markdown:
 <!-- .slide: data-state="standard" -->
 ```
 
-Presets: `standard`, `title`, `two_pane`, `about`, `keepintouch`. Single
-decorations (`white_overlay`, `blue_overlay`, `purple_overlay`,
-`black_overlay`, `logo`, `yellow_flag`, …) can be combined freely.
+`data-state` is a space-separated list of words. Presets: `standard`,
+`title`, `two_pane`, `about`, `keepintouch` (or `touch`). Single decorations
+can be combined freely with them and with each other: `white_overlay`,
+`blue_overlay`, `purple_overlay`, `black_overlay`, `logo`, `yellow_flag`,
+`yellow_strip`, `blue_pane_left`, `blue_pane_right`, `touch_pane`,
+`purple_half_circle_top`, `purple_half_circle_bottom`, `purple_strip_bottom`,
+`yellow_half_strip`, `purple_blob`, `right_e_top`, `right_e_bottom`, and
+`clear_background` (moves overlays and panes away, e.g. for an interactive
+background iframe). A slide without `data-state` shows no decorations.
+
+A `<footer>` element in a slide is shown in a blue strip at the bottom right.
 
 A number from 0 to 10 sets the overlay opacity in tenths: `standard 6` lets a
 background image show through, `standard 10` is opaque. Without a number the
@@ -59,6 +67,49 @@ overlay is opaque, unless the slide has a background image, video or iframe
 (`data-background-image`, `-video`, `-iframe`); then it is 0.8, so the
 background stays faintly visible.
 
+## Layout classes
+
+For use inside slides, e.g. as HTML in reveal.js markdown.
+
+**`.columns`** lays its children out in a grid: two equal columns by default,
+or any `grid-template-columns` value in `--columns`. Further children wrap
+into new rows; `--gap` sets the gap. reveal.js's own `.items-center`,
+`.items-start` etc. align the columns vertically.
+
+```html
+<div class="columns items-center" style="--columns: 7fr 3fr">
+  <div>text</div>
+  <img src="photo.jpg">
+</div>
+```
+
+**`.card`** is a padded light-gray box with dark text. `.card.bordered` has a
+border only and keeps the slide's colours; `.card.highlight` has a blue
+border. A card inside a filled card is white.
+
+**`.stepper`** shows steps one by one. Its `.step` elements are the steps: the
+first one plain, the later ones fragments. The current step (the last one
+shown; the plugin marks it with `.current-step`) gets a blue border if it has
+a border, e.g. as `.step.card`, and only
+its `.detail` is displayed: the `.detail` right after the step, or one inside
+it. `.stepper.preview` shows upcoming steps faded instead of hidden.
+`--columns` and `--gap` on the stepper apply to its `.columns` rows.
+
+```html
+<div class="stepper" style="--columns: 7em repeat(2, 1fr)">
+  <div class="step card columns"><strong>Create</strong><span>Generate</span><span>Summarize</span></div>
+  <div class="detail columns"><em>e.g.</em><span>Text, code</span><span>Papers</span></div>
+  <div class="step card columns fragment"><strong>Find</strong><span>Search</span><span>Predict</span></div>
+  <div class="detail columns"><em>e.g.</em><span>Documents</span><span>Outcomes</span></div>
+</div>
+```
+
+## Printing
+
+Decks print with reveal.js's print view (`?print-pdf` in the URL, then print
+to PDF from the browser). Every page gets the decorations of its own slide.
+The overview (Esc) shows every slide with its decorations as well.
+
 ## Development
 
 ```sh
@@ -68,10 +119,27 @@ npm test
 
 `npm test` renders `test/fixture/deck.html` in Chromium (`CHROME` overrides
 the executable), screenshots every slide and overview mode, and compares them
-pixel by pixel with the theme at `BASELINE_REF` (default `1ef0fd0`, the last
-single-file version). Screenshots and diffs land in `test/output/`. Set
-`MAX_DIFF` to allow a number of differing pixels per screenshot, e.g. when a
-change is intentional.
+with the theme at `BASELINE_REF` (default `v0.2.0`; a revision before 0.2.0,
+such as `1ef0fd0`, loads the old single-file plugin). Each slide must match
+pixel by pixel, and the computed typography (font, weight, style, text
+transform) of every element on it must match too, as must that of the speaker
+notes panel.
+Screenshots and diffs land in `test/output/`. Set `MAX_DIFF` to allow a number
+of differing pixels per screenshot.
+
+Every stepper is walked fragment by fragment (exactly the last shown step is
+current, only its details are displayed), and in the overview every thumbnail
+must carry its slide's decorations, removed again when the overview closes.
+A second pass opens the deck in print view and checks that every page shows
+the decorations, logo, link colours and background classes its slide shows on
+screen, and that no decoration covers the slide's heading.
+
+Fixture slides can declare what they expect from the current theme:
+`data-expect-opacity` (overlay opacity), `data-expect-selection` (text
+selection colours), `data-fonts-differ` (elements whose typography may differ
+from the baseline) and `data-baseline-differs` (left out of both comparisons because the slide
+changes on purpose). `data-overview-differs` on `.reveal` leaves the overview
+screenshot out of the pixel comparison.
 
 ## License
 

package/escience.css

@@ -15,67 +15,47 @@
   --link-color: var(--nlesc-purple);
   --link-color-hover: var(--nlesc-yellow);
 
+  /* reveal.js theme variables (black.css reads these; this file loads after it) */
+  --r-main-font: "Assistant", sans-serif;
+  --r-heading-font: "Nunito", sans-serif;
+  --r-heading-font-weight: 700;
+  --r-heading-text-transform: none;
+  --r-code-font: "Fira Code", monospace;
+  --r-selection-color: #fff;
+  --r-selection-background-color: var(--nlesc-purple);
 }
 
 /*********************************************
  * GLOBAL STYLES
  *
- * Scoped to .reveal so that the page around an embedded deck (e.g. a
- * NEBULA site) keeps its own typography. Everything the theme draws,
- * decorations and speaker notes included, lives inside .reveal.
- * :where() keeps the specificity of the bare element selectors, so
- * rules like .hljs (code highlighting) still win where they did before.
+ * Fonts are set through the --r-* variables above, which the reveal.js
+ * theme applies to body text, headings and code. Slide content can
+ * override font and weight with ordinary CSS.
+ * Rules are scoped to .reveal so that the page around an embedded deck
+ * (e.g. a NEBULA site) keeps its own typography. :where() gives a rule
+ * the specificity of its bare element selector, so class rules such as
+ * .hljs (code highlighting) take precedence.
  *********************************************/
 
-:where(.reveal), :where(.reveal) p, :where(.reveal) div, :where(.reveal) ul {
-  font-family: "Assistant", sans-serif !important;
-  font-optical-sizing: auto;
-  font-weight: 400 !important;
-  font-style: normal;
-}
+.reveal {
+  font-size: 36px; }  /* make stuff smaller */
 
-:where(.reveal) h1, :where(.reveal) h2, :where(.reveal) h3 {
-  font-family: "Nunito" !important;
-  font-weight: 700 !important;
+/* reveal.css gives these Helvetica; keep them in the theme font */
+.reveal .speaker-notes,
+.reveal .slide-number,
+.reveal .r-overlay {
+  font-family: var(--r-main-font);
 }
 
-:where(.reveal) h4, :where(.reveal) h5, :where(.reveal) h6 {
-  font-family: "Assistant", sans-serif !important;
-  font-optical-sizing: auto;
-  font-weight: 700 !important;
-  font-style: normal;
+.reveal h4, .reveal h5, .reveal h6 {
+  font-family: var(--r-main-font);
 }
 
 :where(.reveal) code {
-  font-family: "Fira Code", monospace !important;
-  font-optical-sizing: auto !important;
   font-weight: 500;
-  font-style: normal;
   background-color: var(--gray-transparent);
 }
 
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  text-transform: none;
-}
-
-.reveal {
-  font-size: 36px; }  /* make stuff smaller */
-
-:where(.reveal) ::selection {
-  color: #0f0;
-  background: var(--nlesc-purple);
-  text-shadow: none; }
-
-:where(.reveal) ::-moz-selection {
-  color: #fff;
-  background: var(--nlesc-purple);
-  text-shadow: none; }
-
 
 /*********************************************
  * CUSTOM COLORS
@@ -93,6 +73,19 @@
 .reveal a:hover {
   color: var(--link-color-hover); }
 
+/* escience.js marks each slide with the background its links sit on */
+.reveal section[data-escience-links="on-light"] {
+  --link-color: var(--nlesc-blue);
+  --link-color-hover: var(--nlesc-yellow); }
+
+.reveal section[data-escience-links="on-dark"] {
+  --link-color: var(--nlesc-yellow);
+  --link-color-hover: var(--nlesc-blue); }
+
+.reveal section[data-escience-links="on-blue"] {
+  --link-color: var(--nlesc-yellow);
+  --link-color-hover: var(--nlesc-purple); }
+
 .reveal .roll span:after {
   color: #fff;
   background: var(--nlesc-blue); }
@@ -131,10 +124,82 @@
 
 .reveal .progress span {
   background: var(--nlesc-yellow);
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
+/*********************************************
+ * LAYOUT
+ *
+ * .columns   grid, two equal columns unless --columns gives a
+ *            grid-template-columns value ("7fr 3fr", "repeat(3, 1fr)");
+ *            further children wrap into new rows. --gap sets the gap.
+ *            Combine with reveal.js's .items-center etc. for alignment.
+ * .card      padded box in light gray, with even spacing between its
+ *            children; .bordered: border only; .highlight: blue border.
+ *            A card inside a filled card is white.
+ * .stepper   steps that appear one by one: .step elements, the first one
+ *            plain, later ones fragments. The current step (the last one
+ *            shown, marked .current-step by escience.js) gets a blue
+ *            border if it has one (e.g. .step.card), and
+ *            only its .detail is shown: the .detail right after the step or
+ *            inside it. When the steps are cards, the stepper's other rows
+ *            line up with the cards' content. .preview shows upcoming steps
+ *            faded instead of hidden. --columns and --gap on the stepper
+ *            apply to its .columns rows.
+ *
+ * --columns and --gap apply only to the element they are set on, so a
+ * nested .columns starts from the defaults again.
+ *********************************************/
+@property --columns { syntax: "*"; inherits: false; }
+@property --gap { syntax: "*"; inherits: false; }
+
+.reveal .columns {
+  display: grid;
+  grid-template-columns: var(--columns, repeat(2, minmax(0, 1fr)));
+  gap: var(--gap, .5em);
+}
+
+.reveal .card {
+  padding: .4em .6em;  /* the stepper's row alignment below uses .6em */
+  border: 2px solid var(--light-gray);
+  border-radius: 8px;
+  background-color: var(--light-gray);
+  color: #222;
+  text-align: start;
+  --r-heading-color: #222;
+  --link-color: var(--nlesc-blue);
+  --link-color-hover: var(--nlesc-purple);
+}
+.reveal .card > * { margin-block: 0; }
+.reveal .card:not(.columns) > * + * { margin-top: .4em; }
+.reveal .card:not(.bordered) .card:not(.bordered) {
+  border-color: white;
+  background-color: white;
+}
+.reveal .card.bordered {
+  background-color: transparent;
+  color: inherit;
+  --r-heading-color: inherit;
+  --link-color: inherit;
+  --link-color-hover: inherit;
+}
+.reveal .card.highlight { border-color: var(--nlesc-blue); }
+
+.reveal .stepper { text-align: start; }
+.reveal .stepper > * { --columns: inherit; --gap: inherit; }
+.reveal .stepper > .step.card { margin-block: .4em; }
+.reveal .stepper:has(> .step.card) > :not(.step) { padding-inline: calc(.6em + 2px); }
+
+/* escience.js marks the current step with .current-step */
+.reveal .stepper .step.current-step { border-color: var(--nlesc-blue); }
+.reveal .stepper .step:not(.current-step) + .detail,
+.reveal .stepper .step:not(.current-step) .detail {
+  display: none;
+}
+.reveal .slides section .stepper.preview .step.fragment:not(.visible) {
+  opacity: .35;
+  visibility: inherit;
+}
+
 /*********************************************
  * FOOTER
  *********************************************/
@@ -154,51 +219,220 @@
     background-color: var(--dark-gray); } }
 
 /*********************************************
- * DIM BACKGROUND PICTURES
+ * DECORATIONS
+ *
+ * escience.js inserts one .escience-decorations root per deck (per page in
+ * print view) and sets on it:
+ *   data-show   space-separated names of the decorations to show
+ *   data-logo   color | white | part-white
+ *   --escience-overlay-opacity
+ * Hidden decorations sit outside the slide; shown ones slide or fade in.
+ * The root has no box of its own, so the decorations are positioned
+ * against .reveal (or the print page background).
  *********************************************/
-.dim .backgrounds {
-	-webkit-filter: brightness(.4) !important;
-	-moz-filter: brightness(.4) !important;
-	-o-filter: brightness(.4) !important;
-	-ms-filter: brightness(.4) !important;
-	filter: brightness(.4) !important;
-  -webkit-transition: -webkit-filter 100ms linear;
-  transition: filter 100ms linear;
-}
-
-.dim_3 .backgrounds {
-	-webkit-filter: brightness(.3) !important;
-	-moz-filter: brightness(.3) !important;
-	-o-filter: brightness(.3) !important;
-	-ms-filter: brightness(.3) !important;
-	filter: brightness(.3) !important;
-  -webkit-transition: -webkit-filter 100ms linear;
-  transition: filter 100ms linear;
-}
-
-.dim_8 .backgrounds {
-	-webkit-filter: brightness(.8) !important;
-	-moz-filter: brightness(.8) !important;
-	-o-filter: brightness(.8) !important;
-	-ms-filter: brightness(.8) !important;
-	filter: brightness(.8) !important;
-  -webkit-transition: -webkit-filter 100ms linear;
-  transition: filter 100ms linear;
-}
-
-.backgrounds {
-	-webkit-filter: brightness(1) !important;
-	-moz-filter: brightness(1) !important;
-	-o-filter: brightness(1) !important;
-	-ms-filter: brightness(1) !important;
-	filter: brightness(1) !important;
-  -webkit-transition: -webkit-filter 1s linear;
-  transition: filter 1s linear;
-}
+.escience-decorations { display: contents; }
+
+.escience-decorations > * { position: absolute; z-index: 2; }
+
+/* Full-size overlays, under everything else */
+.escience-purple-overlay,
+.escience-blue-overlay,
+.escience-white-overlay,
+.escience-black-overlay {
+  inset: 0;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 1s; }
+.escience-purple-overlay { background-color: var(--nlesc-purple); }
+.escience-blue-overlay   { background-color: var(--nlesc-blue); }
+.escience-white-overlay  { background-color: white; }
+.escience-black-overlay  { background-color: black; }
+
+/* Panes */
+.escience-blue-pane-left,
+.escience-blue-pane-right,
+.escience-touch-pane {
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 1s; }
+.escience-blue-pane-left  { left: 0; right: 50%; background-color: var(--nlesc-blue); }
+.escience-blue-pane-right { left: 50%; right: 0; background-color: var(--nlesc-blue); }
+.escience-touch-pane {
+  left: 0;
+  right: 66.6%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white; }
+.escience-touch-pane h1 { color: black; text-align: left; }
+
+/* Logo, top left; data-logo picks the variant */
+.escience-logo {
+  top: 1.5vh;
+  left: -12vw;
+  opacity: 0;
+  transition: opacity 1s, left 1s; }
+.escience-logo svg { width: 12vw; }
+
+/* Shapes */
+.escience-yellow-strip {
+  left: -10vw;
+  bottom: 0;
+  width: 10vw;
+  height: 70vh;
+  border-radius: 10vw 10vw 0 0;
+  background-color: var(--nlesc-yellow);
+  transition: left 1s; }
+
+.escience-yellow-flag {
+  left: -10vh;
+  bottom: 5vh;
+  width: 10vh;
+  height: 12vh;
+  border-radius: 0 6vh 6vh 0;
+  z-index: 3;
+  background-color: var(--nlesc-yellow);
+  transition: left 1s, bottom 1s; }
+.escience-yellow-flag svg { position: absolute; height: 10vh; margin: 1vh 0; }
+
+.escience-purple-half-circle-top {
+  left: 0;
+  top: -17vw;
+  width: 34vw;
+  height: 17vw;
+  border-radius: 0 0 20vw 20vw;
+  background-color: var(--nlesc-purple);
+  transition: top 1s; }
+
+.escience-purple-half-circle-bottom {
+  left: 0;
+  bottom: -10vw;
+  width: 20vw;
+  height: 10vw;
+  border-radius: 20vw 20vw 0 0;
+  background-color: var(--nlesc-purple);
+  transition: bottom 1s; }
+.escience-purple-half-circle-bottom svg { position: absolute; bottom: 2vw; left: 6vw; width: 8vw; }
+
+.escience-purple-strip-bottom {
+  right: calc(50% + 17vw);
+  bottom: -10vw;
+  width: 16vw;
+  height: 10vw;
+  border-radius: 20vw 20vw 0 0;
+  background-color: var(--nlesc-purple);
+  transition: bottom 1s; }
+
+.escience-yellow-half-strip {
+  right: 50%;
+  bottom: -25vw;
+  width: 17vw;
+  height: 25vw;
+  border-radius: 20vw 0 0 0;
+  background-color: var(--nlesc-yellow);
+  transition: bottom 1s; }
+
+.escience-purple-blob {
+  /* top right: a long and a short drop, joined by a concave curve */
+  right: 0;
+  top: -50vh;
+  width: 10vw;
+  height: 50vh;
+  border-radius: 0 0 5vw 5vw;
+  background-color: var(--nlesc-purple);
+  transition: top 1s; }
+.escience-purple-blob::before,
+.escience-purple-blob::after {
+  content: "";
+  position: absolute;
+  right: calc(100% - 1px);  /* overlap the long drop by 1px, so no seam shows */
+  background-color: var(--nlesc-purple); }
+.escience-purple-blob::before {
+  /* the short drop; its inner corner continues into the curve */
+  top: 0;
+  width: calc(10vw + 1px);
+  height: 25vh;
+  border-bottom-left-radius: 5vw; }
+.escience-purple-blob::after {
+  /* the curve: a 5vw square below the short drop, cut out around its
+     bottom left corner; the 1px gradient step smooths the edge */
+  top: calc(25vh - 1px);
+  width: calc(5vw + 1px);
+  height: calc(5vw + 1px);
+  background: radial-gradient(circle at 0 100%, transparent 5vw, var(--nlesc-purple) calc(5vw + 1px)); }
+
+.escience-right-e {
+  top: 10vh;
+  right: -4vw;
+  width: 4vw;
+  z-index: 3;
+  transition: right 1s, top 1s; }
+
+/* Footer strip, bottom right; holds the slide's <footer> content */
+.escience-blue-strip {
+  right: 0;
+  bottom: 0;
+  border-radius: 20vw 0 0 0;
+  background-color: var(--nlesc-blue);
+  transform: translateX(100%);
+  transition: transform 1s; }
+.escience-footer {
+  margin: 1vw 1vw 1vw 3vw;
+  text-align: right;
+  line-height: 130%; }
+.reveal .escience-footer a { color: white; text-decoration: underline; }
+.reveal .escience-footer a:hover { color: var(--nlesc-purple); }
+
+/* Shown */
+[data-show~="purple_overlay"] .escience-purple-overlay,
+[data-show~="blue_overlay"] .escience-blue-overlay,
+[data-show~="white_overlay"] .escience-white-overlay,
+[data-show~="black_overlay"] .escience-black-overlay {
+  opacity: var(--escience-overlay-opacity, 1); }
+
+[data-show~="blue_pane_left"] .escience-blue-pane-left,
+[data-show~="blue_pane_right"] .escience-blue-pane-right,
+[data-show~="touch_pane"] .escience-touch-pane { opacity: 1; }
+
+[data-show~="logo"] .escience-logo { left: 3vw; }
+[data-logo="color"] .escience-logo-color,
+[data-logo="white"] .escience-logo-white,
+[data-logo="part-white"] .escience-logo-part-white { opacity: 1; }
+
+[data-show~="yellow_strip"] .escience-yellow-strip { left: 0; }
+[data-show~="yellow_flag"] .escience-yellow-flag { left: 0; }
+[data-show~="purple_half_circle_bottom"] .escience-yellow-flag { bottom: 20vh; }
+[data-show~="purple_half_circle_top"] .escience-purple-half-circle-top { top: 0; }
+[data-show~="purple_half_circle_bottom"] .escience-purple-half-circle-bottom { bottom: 0; }
+[data-show~="purple_strip_bottom"] .escience-purple-strip-bottom { bottom: 0; }
+[data-show~="yellow_half_strip"] .escience-yellow-half-strip { bottom: 0; }
+[data-show~="purple_blob"] .escience-purple-blob { top: 0; }
+[data-show~="right_e_top"] .escience-right-e { top: 10vh; right: 0; }
+[data-show~="right_e_bottom"] .escience-right-e { top: 60vh; right: 0; }
+[data-show~="footer"] .escience-blue-strip { transform: none; }
+
+/* clear_background moves overlays and panes away, e.g. for an interactive
+   background iframe */
+[data-show~="clear_background"] :is(.escience-purple-overlay, .escience-blue-overlay,
+  .escience-white-overlay, .escience-black-overlay, .escience-blue-pane-left,
+  .escience-blue-pane-right, .escience-touch-pane) {
+  transform: translateY(100vh); }
+
+/* overview: each thumbnail's background carries its own decorations, shown
+   in their final state and clipped to the thumbnail */
+.reveal.overview .backgrounds .slide-background { overflow: hidden; }
+.reveal.overview .backgrounds .escience-decorations > * { transition: none; }
 
 /*********************************************
- * ALLOW FOR DECORATIONS
+ * SLIDE CONTENT ABOVE DECORATIONS
  *********************************************/
+/* print view: each page holds its background (with decorations), slide,
+   notes and slide number side by side */
+html.reveal-print .reveal .pdf-page > :is(section, .speaker-notes-pdf, .slide-number-pdf) {
+  z-index: 10;
+}
+
 .slides {
 	/* puts the slide content above overlays and decorations*/
 	z-index: 10 !important;

package/escience.js

@@ -1,11 +1,19 @@
-let Escience = {
-  id: 'Escience',
-  init: (deck) => {
-    initDecorations(deck)
-  }
-}
-
-export default Escience;
+// eScience Center decorations for reveal.js.
+//
+// A slide's data-state lists what it shows: a preset ("standard", "title",
+// ...), decoration names ("blue_overlay", "yellow_flag", ...) and optionally
+// a number 0-10 for the overlay opacity in tenths. The plugin turns that into
+// attributes on a decoration root; escience.css positions and animates the
+// decorations from those attributes:
+//
+//   data-show   the decorations to show (plus "footer" if the slide has one)
+//   data-logo   which logo variant is visible: color, white or part-white
+//   --escience-overlay-opacity
+//
+// On screen there is one root in the .reveal element, updated on every slide
+// change. In the overview every slide background gets its own root while the
+// overview is open, so the thumbnails look like their slides. In print view
+// (?print-pdf) every page gets its own root, set once from that page's slide.
 
 const LOGGING = false;
 
@@ -15,28 +23,170 @@ function log (content) {
   }
 }
 
-// TODO: Refactor this quick hack into a Reveal plugin form (it works at least)
-const initDecorations = function(Reveal) {
+const PRESETS = {
+  standard:    'logo yellow_flag white_overlay',
+  two_pane:    'logo yellow_flag white_overlay blue_pane_right',
+  about:       'logo white_overlay blue_pane_left purple_half_circle_top purple_strip_bottom yellow_half_strip',
+  touch:       'logo blue_overlay touch_pane purple_blob right_e_bottom',
+  keepintouch: 'logo blue_overlay touch_pane purple_blob right_e_bottom',
+  title:       'blue_overlay yellow_flag yellow_strip purple_half_circle_bottom purple_blob right_e_top',
+};
+
+// Decorations that change the logo variant, the link colours (data-escience-links
+// on the slide) or reveal's has-light/dark-background classes on the slide.
+// Later entries take precedence over earlier ones.
+const EFFECTS = [
+  ['purple_overlay',         { logo: 'part-white', links: 'on-dark',  background: ['-light'] }],
+  ['white_overlay',          { logo: 'color',      links: 'on-light', background: ['+light'] }],
+  ['black_overlay',          { logo: 'part-white', links: 'on-dark',  background: ['-light'] }],
+  ['blue_overlay',           { logo: 'white',      links: 'on-blue',  background: ['-light'] }],
+  ['blue_pane_right',        {                                        background: ['-dark', '+light'] }],
+  ['blue_pane_left',         { logo: 'white',                         background: ['-dark', '+light'] }],
+  ['touch_pane',             { logo: 'color',                         background: ['-light', '+dark'] }],
+  ['purple_half_circle_top', { logo: 'part-white' }],
+];
+
+// Overlays let background images, videos and iframes show through at 0.8
+// unless data-state gives a number.
+const BACKGROUND_MEDIA = ['data-background-image', 'data-background-video', 'data-background-iframe'];
+
+function slideState(slide) {
+  const words = (slide.getAttribute('data-state') || '').split(/\s+/).filter(Boolean);
+  const show = new Set();
+  let opacity = BACKGROUND_MEDIA.some(a => slide.hasAttribute(a)) ? 0.8 : 1;
+  for (const word of words) {
+    if (/^(10|[0-9])$/.test(word)) { opacity = Number(word) / 10; continue; }
+    for (const name of (PRESETS[word] || word).split(' ')) show.add(name);
+  }
+  if (slide.querySelector('footer')) show.add('footer');
+
+  let logo = 'color', links = null;
+  const background = [];
+  for (const [name, effect] of EFFECTS) {
+    if (!show.has(name)) continue;
+    logo = effect.logo || logo;
+    links = effect.links || links;
+    background.push(...(effect.background || []));
+  }
+  return { show, opacity, logo, links, background };
+}
+
+function render(root, slide) {
+  const state = slideState(slide);
+  root.dataset.show = [...state.show].join(' ');
+  root.dataset.logo = state.logo;
+  root.style.setProperty('--escience-overlay-opacity', state.opacity);
+
+  // Without a footer the strip slides out with its previous content.
+  const footer = slide.querySelector('footer');
+  if (footer) root.querySelector('.escience-footer').innerHTML = footer.innerHTML;
+
+  if (state.links) slide.dataset.escienceLinks = state.links;
+  else delete slide.dataset.escienceLinks;
+  for (const change of state.background) {
+    slide.classList.toggle(`has-${change.slice(1)}-background`, change[0] === '+');
+  }
+  log(`decorations: ${root.dataset.show} (logo ${state.logo}, opacity ${state.opacity})`);
+}
+
+// In every .stepper inside `scope`, the last shown .step (a plain one, or a
+// fragment that is visible) gets the class current-step; escience.css
+// highlights it and shows only its details.
+function markSteps(scope) {
+  for (const stepper of scope.querySelectorAll('.stepper')) {
+    const steps = [...stepper.querySelectorAll('.step')];
+    const current = steps.filter(s => !s.classList.contains('fragment') || s.classList.contains('visible')).at(-1);
+    for (const step of steps) step.classList.toggle('current-step', step === current);
+  }
+}
+
+let template;
+
+function createRoot(parent) {
+  template ??= Object.assign(document.createElement('template'), { innerHTML: DECORATIONS });
+  const root = template.content.firstElementChild.cloneNode(true);
+  parent.prepend(root);
+  return root;
+}
 
+const Escience = () => {
+  let deck, root;
 
-const decoration_elements = `
-<div id="blue_pane_left" style="transition: opacity 1s; background-color: var(--nlesc-blue); opacity: 0; position: absolute; left: 0; right: 50%; bottom: 0; top: 0; z-index: 2;"></div>
-<div id="blue_pane_right" style="transition: opacity 1s; background-color: var(--nlesc-blue); opacity: 0; position: absolute; left: 50%; right: 0; bottom: 0; top: 0; z-index: 2;"></div>
-<div id="touch_pane" style="background-color: white; transition: opacity 1s; opacity: 0; position: absolute; left: 0; right: 66.6%; bottom: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 2;">
-  <h1 style="color: black; text-align: left;">Let's stay<br>in touch</h1>
+  const update = () => {
+    markSteps(deck.getCurrentSlide());
+    if (!deck.isOverview()) render(root, deck.getCurrentSlide());
+  };
+  const ready = () => { markSteps(deck.getRevealElement()); update(); };
+  const steps = () => markSteps(deck.getCurrentSlide());
+
+  const thumbnailRoots = () => deck.getRevealElement().querySelectorAll('.backgrounds .escience-decorations');
+  const showOverview = () => {
+    root.dataset.show = '';
+    for (const slide of deck.getSlides()) {
+      if (slide.slideBackgroundElement) render(createRoot(slide.slideBackgroundElement), slide);
+    }
+  };
+  const hideOverview = () => {
+    for (const thumbnail of thumbnailRoots()) thumbnail.remove();
+    update();
+  };
+
+  return {
+    id: 'Escience',
+    init: (reveal) => {
+      deck = reveal;
+      if (deck.isPrintView()) {
+        deck.on('pdf-ready', () => {
+          for (const page of deck.getRevealElement().querySelectorAll('.pdf-page')) {
+            const slide = page.querySelector('section');
+            const background = page.querySelector('.slide-background');
+            markSteps(page);
+            if (slide && background) render(createRoot(background), slide);
+          }
+        });
+        return;
+      }
+      root = createRoot(deck.getRevealElement());
+      deck.on('ready', ready);
+      deck.on('slidechanged', update);
+      deck.on('fragmentshown', steps);
+      deck.on('fragmenthidden', steps);
+      deck.on('overviewshown', showOverview);
+      deck.on('overviewhidden', hideOverview);
+    },
+    destroy: () => {
+      if (!root) return;
+      deck.off('ready', ready);
+      deck.off('slidechanged', update);
+      deck.off('fragmentshown', steps);
+      deck.off('fragmenthidden', steps);
+      deck.off('overviewshown', showOverview);
+      deck.off('overviewhidden', hideOverview);
+      for (const thumbnail of thumbnailRoots()) thumbnail.remove();
+      root.remove();
+    },
+  };
+};
+
+export default Escience;
+
+const DECORATIONS = `<div class="escience-decorations">
+<div class="escience-blue-pane-left"></div>
+<div class="escience-blue-pane-right"></div>
+<div class="escience-touch-pane">
+  <h1>Let's stay<br>in touch</h1>
 </div>
-<div id="purple_half_circle_top" style="transition: top 1s; opacity: 1; position: absolute; background-color: var(--nlesc-purple); left: 0; top: -17vw; width: 34vw; height: 17vw; border-radius: 0 0 20vw 20vw; z-index: 2;"></div>
-<div id="yellow_half_strip" style="opacity: 1; transition: bottom 1s; position: absolute; background-color: var(--nlesc-yellow); right: 50%; bottom: -25vw; width: 17vw; height: 25vw; border-radius: 20vw 0 0 0; z-index: 2;"></div>
-<div id="purple_strip_bottom" style="opacity: 1; transition: bottom 1s; position: absolute; background-color: var(--nlesc-purple); right: calc(50% + 17vw); bottom: -10vw; width: 16vw; height: 10vw; border-radius: 20vw 20vw 0 0; z-index: 2;"></div>
-<div id="logo_color" style="transition: opacity 1s, left 1s; opacity: 0; position: absolute; left: -12vw; top: 1.5vh; z-index: 2;">
+<div class="escience-purple-half-circle-top"></div>
+<div class="escience-yellow-half-strip"></div>
+<div class="escience-purple-strip-bottom"></div>
+<div class="escience-logo-color escience-logo">
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 182.94 50.27"
-   version="1.1"
-   style="width: 12vw;">
+   version="1.1">
   <metadata
      id="metadata1137">
     <rdf:RDF>
@@ -168,7 +318,7 @@ const decoration_elements = `
      id="path1132" />
 </svg>
 </div>
-<div id="logo_part_white" style="transition: opacity 1s, left 1s; opacity: 0; position: absolute; left: -12vw; top: 1.5vh; z-index: 2;">
+<div class="escience-logo-part-white escience-logo">
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -176,8 +326,7 @@ const decoration_elements = `
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 182.94 50.27"
    version="1.1"
-   inkscape:version="1.0.2 (1.0.2+r75+1)"
-    style="width: 12vw;">
+   inkscape:version="1.0.2 (1.0.2+r75+1)">
   <sodipodi:namedview
      pagecolor="#505050"
      bordercolor="#eeeeee"
@@ -314,7 +463,7 @@ const decoration_elements = `
      style="fill:#ffffff;fill-opacity:1" />
 </svg>
 </div>
-<div id="logo_white" style="transition: opacity 1s, left 1s; opacity: 0; position: absolute; left: -12vw; top: 1.5vh; z-index: 2;">
+<div class="escience-logo-white escience-logo">
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -323,7 +472,6 @@ const decoration_elements = `
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    viewBox="0 0 182.94 50.27"
    version="1.1"
-   style="width: 12vw;"
 >
   <metadata
      id="metadata1137">
@@ -478,18 +626,18 @@ const decoration_elements = `
      style="fill:#ffffff;fill-opacity:1" />
 </svg>
 </div>
-<div id="purple_overlay" style="background-color: var(--nlesc-purple); opacity: 0; transition: opacity 1s; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;">
+<div class="escience-purple-overlay">
 </div>
-<div id="blue_overlay" style="background-color: var(--nlesc-blue); opacity: 0; transition: opacity 1s; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;">
+<div class="escience-blue-overlay">
 </div>
-<div id="white_overlay" style="background-color: white; opacity: 0; transition: opacity 1s; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;">
+<div class="escience-white-overlay">
 </div>
-<div id="black_overlay" style="background-color: black; opacity: 0; transition: opacity 1s; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;">
+<div class="escience-black-overlay">
 </div>
-<div id="yellow_strip" style="background-color: var(--nlesc-yellow); transition: left 1s; width: 10vw; height: 70vh; border-radius: 10vw 10vw 0 0; z-index: 2; position: absolute; left: -10vw; bottom: 0;">
+<div class="escience-yellow-strip">
 </div>
-<div id="yellow_flag" style="background-color: var(--nlesc-yellow); transition: left 1s, bottom 1s; width: 10vh; height: 12vh; border-radius: 0 6vh 6vh 0; z-index: 3; position: absolute; left: -10vh; bottom: 5vh; margin: 0; padding: 0;">
-  <svg id="left_e" style="position: absolute; height: 10vh; margin: 1vh 0; padding: 0;" viewBox="0 0 27 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<div class="escience-yellow-flag">
+  <svg viewBox="0 0 27 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
         <polygon id="path-1" points="0 0.132265672 26.8359 0.132265672 26.8359 33.3422209 0 33.3422209"></polygon>
         <polygon id="path-3" points="0 0.662473134 25.2148 0.662473134 25.2148 18.629294 0 18.629294"></polygon>
@@ -518,15 +666,14 @@ const decoration_elements = `
     </g>
 </svg>
 </div>
-<div id="purple_half_circle_bottom" style="transition: bottom 1s; background-color: var(--nlesc-purple); width: 20vw; height: 10vw; border-radius: 20vw 20vw 0 0; z-index: 2; position: absolute; left: 0; bottom: -10vw;">
-<svg id="left_e"
+<div class="escience-purple-half-circle-bottom">
+<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 182.94 50.27"
-   version="1.1"
-   style="position: absolute; bottom: 2vw; left: 6vw; width: 8vw;">
+   version="1.1">
   <metadata
      id="metadata1137">
     <rdf:RDF>
@@ -676,391 +823,12 @@ const decoration_elements = `
 </svg>
 
 </div>
-<div id="purple_blob" style="transition: top 1s; position: absolute; display: flex; right: 0; top: -50vh; z-index: 2;">
-  <div style="background-color: var(--nlesc-purple); width: 10vw; height: 25vh; border-radius: 0 0 10vw 10vw;">
-  </div>
-  <div style="background-color: var(--nlesc-purple); width: 10vw; height: 50vh; border-radius: 0 0 10vw 10vw;">
-  </div>
-  <div class="box" style="background: var(--nlesc-purple); position: absolute; right: 10vw; top: 0; width: 5vw; height: calc(25vh + 5vw); border-corner-shape: scoop; background: yellow; background: linear-gradient(45deg,  transparent 10vw, var(--nlesc-purple) 0) bottom left; background-image: radial-gradient(circle at 0 100%, rgba(204,0,0,0) 5vw, var(--nlesc-purple) 15px)">
-  </div>
-</div>
-<div id="blue_strip" style="background-color: var(--nlesc-blue); transition: left 1s, right 1s; margin: 0; padding: 0; border-radius: 20vw 0 0 0; z-index: 2; position: absolute; right: -100vw; bottom: 0;">
-  <div id="footer" style="text-align: right; line-height: 130%; padding: 0; margin: 1vw 1vw 1vw 3vw; bottom: 0; right: 0;">
+<div class="escience-purple-blob"></div>
+<div class="escience-blue-strip">
+  <div class="escience-footer">
   </div>
 </div>
-<svg id="right_e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272.549 662.141"  style="transition: right 1s, top 1s; position: absolute; top: 10vh; right: -4vw; width: 4vw; z-index: 3;">
+<svg class="escience-right-e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272.549 662.141">
   <path id="Path_88" data-name="Path 88" d="M342.892,527.031q17.52-21.911,45.055-35.264a133.418,133.418,0,0,1,36-11.063V357.814c-33.264,2.515-63.486,9.336-90.408,20.725q-52.012,21.874-88.269,58.407-47.551,46.277-70.694,111.421-23.2,65.132-23.177,141.8,0,77.95,25.652,142.459Q202.723,897.2,251.563,943.4a314.339,314.339,0,0,0,88.213,56.587q37.073,15.944,84.176,19.965V896.642a104.455,104.455,0,0,1-25.345-8.657,178.837,178.837,0,0,1-40.683-27.369Q334.157,838.7,322.27,805.822a202.364,202.364,0,0,1-11.888-69.4h113.57V625.625H309.123q1.256-31.6,8.759-54.767Q325.384,547.762,342.892,527.031Z" transform="translate(-151.403 -357.814)" fill="#fff"/>
 </svg>
-`;
-
-function insertDecoration() {
-  if ( window.location.search.match( /print-pdf/gi ) ) {
-    const backgrounds = document.getElementsByClassName('slide-background');
-    for (let i = 0; i < backgrounds.length; i++) {
-      backgrounds[i].insertAdjacentHTML("afterbegin", decoration_elements);
-    };
-  } else {
-    // for viewing slides
-    const reveal_div = document.querySelectorAll('div.reveal');
-    // TODO better do this loop with "forEach"
-    for (let i = 0; i < reveal_div.length; i++) {
-      reveal_div[i].insertAdjacentHTML("afterbegin", decoration_elements);
-    };
-    //$('#decoration').remove(); // without this the fadeIn/fadeOut below does not work. why is this necessary?
-  };
-  addDecorations();
-}
-
-Reveal.on( 'ready', event => {
-  insertDecoration();
-
-  /* set events only after reveal is ready */
-  Reveal.on( 'slidechanged', event => {
-    if (overview_shown == false)
-    {
-      log("slide changed");
-      addDecorations();
-    }
-  });
-  Reveal.on( 'overviewshown', event => {
-    overview_shown = true;
-    removeDecorations();
-  });
-  Reveal.on( 'overviewhidden', event => {
-    overview_shown = false;
-    addDecorations();
-  });
-} );
-
-
-function setLogoStyle(style) {
-  //style must be one of {"logo_color","logo_white","logo_part_white"}
-
-  //unset everything
-  document.getElementById("logo_color").style.opacity = 0;
-  document.getElementById("logo_white").style.opacity = 0;
-  document.getElementById("logo_part_white").style.opacity = 0;
-
-  //set only what we want
-  document.getElementById(style).style.opacity = 1;
-};
-var overview_shown = false;
-// Overlay opacity in tenths from a number 0-10 in data-state ("standard 6").
-// Without a number the overlay is opaque, except over background media,
-// which would otherwise be hidden completely; there it stays at 0.8.
-const BACKGROUND_MEDIA = ['data-background-image', 'data-background-video', 'data-background-iframe'];
-function getOpacity(data_state, slide) {
-  var opacity = BACKGROUND_MEDIA.some(a => slide.hasAttribute(a)) ? 0.8 : 1.0;
-  for (let i = 0; i < 11; i++) {
-    if (data_state.includes(i)) { opacity = i/10; log("opacity set to " + opacity)}
-  };
-  return opacity
-};
-function addDecorations() {
-  log("set decorations")
-  let root = document.documentElement;
-
-
-  var currentSlide = Reveal.getCurrentSlide();
-  if (currentSlide.contains(currentSlide.querySelector('footer')))
-  {
-    document.getElementById("footer").innerHTML = currentSlide.querySelector('footer').innerHTML;
-    document.getElementById("blue_strip").style.right = 0;
-    log("footer (and blue_strip)");
-  } else {
-    document.getElementById("blue_strip").style.right = "-" + document.getElementById("blue_strip").offsetWidth + "px";
-    log("no footer");
-  };
-  if ( currentSlide.getAttribute('data-state') )
-  {
-    var data_state = currentSlide.getAttribute('data-state')
-    var opacity = getOpacity(data_state, currentSlide);
-    log("DS" + data_state)
-    // pre-set slide designs
-
-    // standard
-    if ( data_state.includes("standard"))
-    {
-      data_state += " logo yellow_flag white_overlay";
-    };
-
-    // two_pane
-    if ( data_state.includes("two_pane"))
-    {
-      data_state += " logo yellow_flag white_overlay blue_pane_right";
-    };
-
-    // about
-    if ( data_state.includes("about"))
-    {
-      data_state += " logo white_overlay blue_pane_left purple_half_circle_top purple_strip_bottom yellow_half_strip";
-    };
-
-    // touch
-    if ( data_state.includes("touch"))
-    {
-      data_state += " logo blue_overlay touch_pane purple_blob right_e_bottom";
-    };
-
-    // title
-    if ( data_state.includes("title"))
-    {
-      data_state += "  blue_overlay yellow_flag yellow_strip purple_half_circle_bottom purple_blob right_e_top";
-    };
-
-    // individual elements
-
-    // purple overlay
-    if ( data_state.includes("purple_overlay"))
-    {
-      document.getElementById("purple_overlay").style.opacity = opacity;
-      document.getElementById("purple_overlay").style.transform = "translateY(0)";
-      document.getElementById("logo_color").style.opacity = 0;
-      document.getElementById("logo_white").style.opacity = 0;
-      document.getElementById("logo_part_white").style.opacity = 1;
-      currentSlide.classList.remove("has-light-background");
-      root.style.setProperty("--link-color", "var(--nlesc-yellow)");
-      root.style.setProperty("--link-color-hover", "var(--nlesc-blue)");
-      log("purple overlay");
-    } else {
-      document.getElementById("purple_overlay").style.opacity = 0;
-      log("no purple overlay");
-    };
-
-    // white overlay
-    if ( data_state.includes("white_overlay"))
-    {
-      document.getElementById("white_overlay").style.opacity = opacity;
-      document.getElementById("white_overlay").style.transform = "translateY(0)";
-      document.getElementById("logo_color").style.opacity = 1;
-      document.getElementById("logo_white").style.opacity = 0;
-      document.getElementById("logo_part_white").style.opacity = 0;
-      currentSlide.classList.add("has-light-background");
-      root.style.setProperty("--link-color", "var(--nlesc-blue)");
-      root.style.setProperty("--link-color-hover", "var(--nlesc-yellow)");
-      log("white overlay");
-    } else {
-      document.getElementById("white_overlay").style.opacity = 0;
-      log("no white overlay");
-    };
-
-    // black overlay
-    if ( data_state.includes("black_overlay"))
-    {
-      document.getElementById("black_overlay").style.opacity = opacity;
-      document.getElementById("black_overlay").style.transform = "translateY(0)";
-      document.getElementById("logo_color").style.opacity = 0;
-      document.getElementById("logo_white").style.opacity = 0;
-      document.getElementById("logo_part_white").style.opacity = 1;
-      currentSlide.classList.remove("has-light-background");
-      root.style.setProperty("--link-color", "var(--nlesc-yellow)");
-      root.style.setProperty("--link-color-hover", "var(--nlesc-blue)");
-      log("black overlay");
-    } else {
-      document.getElementById("black_overlay").style.opacity = 0;
-      log("no black overlay");
-    };
-
-    // blue overlay
-    if ( data_state.includes("blue_overlay"))
-    {
-      document.getElementById("blue_overlay").style.opacity = opacity;
-      document.getElementById("blue_overlay").style.transform = "translateY(0)";
-      document.getElementById("logo_color").style.opacity = 0;
-      document.getElementById("logo_white").style.opacity = 1;
-      document.getElementById("logo_part_white").style.opacity = 0;
-      currentSlide.classList.remove("has-light-background");
-      root.style.setProperty("--link-color", "var(--nlesc-yellow)");
-      root.style.setProperty("--link-color-hover", "var(--nlesc-purple)");
-      log("blue overlay");
-    } else {
-      document.getElementById("blue_overlay").style.opacity = 0;
-      log("no blue overlay");
-    };
-
-    // blue pane right
-    if ( data_state.includes("blue_pane_right"))
-    {
-      document.getElementById("blue_pane_right").style.opacity = 1;
-      document.getElementById("blue_pane_right").style.transform = "translateY(0)";
-      currentSlide.classList.remove("has-dark-background");
-      currentSlide.classList.add("has-light-background");
-      log("blue_pane_right");
-    } else {
-      document.getElementById("blue_pane_right").style.opacity = 0;
-      log("no blue_pane_right");
-    };
-
-    // blue pane left
-    if ( data_state.includes("blue_pane_left"))
-    {
-      document.getElementById("blue_pane_left").style.opacity = 1;
-      document.getElementById("blue_pane_left").style.transform = "translateY(0)";
-      setLogoStyle("logo_white");
-      currentSlide.classList.remove("has-dark-background");
-      currentSlide.classList.add("has-light-background");
-      log("blue_pane_left");
-    } else {
-      document.getElementById("blue_pane_left").style.opacity = 0;
-      log("no blue_pane_left");
-    };
-
-    // touch pane
-    if ( data_state.includes("touch_pane"))
-    {
-      document.getElementById("touch_pane").style.opacity = 1;
-      document.getElementById("touch_pane").style.transform = "translateY(0)";
-      setLogoStyle("logo_color");
-      currentSlide.classList.remove("has-light-background");
-      currentSlide.classList.add("has-dark-background");
-      log("touch_pane");
-    } else {
-      document.getElementById("touch_pane").style.opacity = 0;
-      log("no touch_pane");
-    };
-
-    // logo
-    if ( data_state.includes("logo"))
-    {
-      document.getElementById("logo_color").style.left = 3 + "vw";
-      document.getElementById("logo_part_white").style.left = 3 + "vw";
-      document.getElementById("logo_white").style.left = 3 + "vw";
-      log("logo");
-    } else {
-      document.getElementById("logo_color").style.left = -12 + "vw";
-      document.getElementById("logo_part_white").style.left = -12 + "vw";
-      document.getElementById("logo_white").style.left = -12 + "vw";
-      log("no logo");
-    };
-
-    // yellow strip
-    if ( data_state.includes("yellow_strip"))
-    {
-      document.getElementById("yellow_strip").style.left = 0;
-      log("yellow_strip");
-    } else {
-      document.getElementById("yellow_strip").style.left = -10 + "vw";
-      log("no yellow_strip");
-    };
-
-    // yellow flag
-    if ( data_state.includes("yellow_flag"))
-    {
-      document.getElementById("yellow_flag").style.left = 0;
-      log("yellow_flag");
-    } else {
-      document.getElementById("yellow_flag").style.left = -10 + "vh";
-      log("no yellow_flag");
-    };
-
-    // purple half circle top
-    if ( data_state.includes("purple_half_circle_top"))
-    {
-      document.getElementById("purple_half_circle_top").style.top = 0;
-      setLogoStyle("logo_part_white");
-      log("purple_half_circle_top");
-    } else {
-      document.getElementById("purple_half_circle_top").style.top = -17 + "vw";
-      log("no purple_half_circle_top");
-    };
-
-    // purple half circle bottom
-    if ( data_state.includes("purple_half_circle_bottom"))
-    {
-      document.getElementById("purple_half_circle_bottom").style.bottom = 0;
-      document.getElementById("yellow_flag").style.bottom = 20 + "vh";
-      log("purple_half_circle_bottom");
-    } else {
-      document.getElementById("purple_half_circle_bottom").style.bottom = -10 + "vw";
-      document.getElementById("yellow_flag").style.bottom = 5 + "vh";
-      log("no purple_half_circle_bottom");
-    };
-
-    // purple strip bottom
-    if ( data_state.includes("purple_strip_bottom"))
-    {
-      document.getElementById("purple_strip_bottom").style.bottom = 0;
-      log("purple_strip_bottom");
-    } else {
-      document.getElementById("purple_strip_bottom").style.bottom = -10 + "vw";
-      log("no purple_strip_bottom");
-    };
-
-    // yellow_half_strip
-    if ( data_state.includes("yellow_half_strip"))
-    {
-      document.getElementById("yellow_half_strip").style.bottom = 0;
-      log("yellow_half_strip");
-    } else {
-      document.getElementById("yellow_half_strip").style.bottom = -25 + "vw";
-      log("no yellow_half_strip");
-    };
-
-    // purple blob
-    if ( data_state.includes("purple_blob"))
-    {
-      document.getElementById("purple_blob").style.top = 0;
-      log("purple_blob");
-    } else {
-      document.getElementById("purple_blob").style.top = -50 + "vh";
-      log("no purple_blob");
-    };
-
-    // right_e
-    if ( data_state.includes("right_e_top"))
-    {
-      document.getElementById("right_e").style.top = 10 + "vh";
-      document.getElementById("right_e").style.right = 0;
-      log("right_e_top");
-    } else if ( data_state.includes("right_e_bottom")){
-      document.getElementById("right_e").style.top = 60 + "vh";
-      document.getElementById("right_e").style.right = 0;
-      log("right_e_bottom");
-    } else {
-      document.getElementById("right_e").style.right = -4 + "vw";
-      log("no right_e");
-    };
-
-    // clear the background so that the overlays don't interfere
-    // with underlying iframe
-    if ( data_state.includes("clear_background"))
-    {
-      document.getElementById("purple_overlay").style.transform = "translateY(100vh)";
-      document.getElementById("white_overlay").style.transform = "translateY(100vh)";
-      document.getElementById("black_overlay").style.transform = "translateY(100vh)";
-      document.getElementById("blue_overlay").style.transform = "translateY(100vh)";
-      document.getElementById("blue_pane_right").style.transform = "translateY(100vh)";
-      document.getElementById("blue_pane_left").style.transform = "translateY(100vh)";
-      document.getElementById("touch_pane").style.transform = "translateY(100vh)";
-    };
-  }
-  else
-  {
-    log("nothing special")
-  };
-};
-
-function removeDecorations() {
-  log("removeDecorations")
-  document.getElementById("purple_overlay").style.opacity = 0;
-  document.getElementById("white_overlay").style.opacity = 0;
-  document.getElementById("black_overlay").style.opacity = 0;
-  document.getElementById("blue_overlay").style.opacity = 0;
-  document.getElementById("blue_pane_right").style.opacity = 0;
-  document.getElementById("blue_pane_left").style.opacity = 0;
-  document.getElementById("touch_pane").style.opacity = 0;
-  document.getElementById("logo_color").style.left = -12 + "vw";
-  document.getElementById("logo_part_white").style.left = -12 + "vw";
-  document.getElementById("logo_white").style.left = -12 + "vw";
-  document.getElementById("yellow_strip").style.left = -10 + "vw";
-  document.getElementById("yellow_flag").style.left = -10 + "vh";
-  document.getElementById("purple_half_circle_top").style.top = -17 + "vw";
-  document.getElementById("purple_half_circle_bottom").style.bottom = -10 + "vw";
-  document.getElementById("purple_strip_bottom").style.bottom = -10 + "vw";
-  document.getElementById("yellow_half_strip").style.bottom = -25 + "vw";
-  document.getElementById("purple_blob").style.top = -50 + "vh";
-  document.getElementById("right_e").style.right = -4 + "vw";
-  document.getElementById("blue_strip").style.right = "-" + document.getElementById("blue_strip").offsetWidth + "px";
-};
-
-}
+</div>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "escience_theme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "eScience Center theme for web presentations",
   "type": "module",
   "main": "escience.js",