escience_theme 0.0.4 → 0.2.0

package/{escience_5.1.0.esm.js → escience.js}

@@ -7,717 +7,17 @@ let Escience = {
 
 export default Escience;
 
-const black_css = `
-/**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
+const LOGGING = false;
 
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-regular.eot');
-    src: url('./source-sans-pro-regular.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-regular.woff') format('woff'),
-         url('./source-sans-pro-regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-italic.eot');
-    src: url('./source-sans-pro-italic.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-italic.woff') format('woff'),
-         url('./source-sans-pro-italic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-semibold.eot');
-    src: url('./source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-semibold.woff') format('woff'),
-         url('./source-sans-pro-semibold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-semibolditalic.eot');
-    src: url('./source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-semibolditalic.woff') format('woff'),
-         url('./source-sans-pro-semibolditalic.ttf') format('truetype');
-    font-weight: 600;
-    font-style: italic;
-}
-
-section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222;
-}
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-:root {
-  --r-background-color: #191919;
-  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-main-font-size: 42px;
-  --r-main-color: #fff;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-heading-color: #fff;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: 600;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 2.5em;
-  --r-heading2-size: 1.6em;
-  --r-heading3-size: 1.3em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #42affa;
-  --r-link-color-dark: #068de9;
-  --r-link-color-hover: #8dcffc;
-  --r-selection-background-color: rgba(66, 175, 250, 0.75);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
-}
-
-.reveal-viewport {
-  background: #191919;
-  background-color: var(--r-background-color);
-}
-
-.reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
-  font-weight: normal;
-  color: var(--r-main-color);
-}
-
-.reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal .slides section,
-.reveal .slides section > section {
-  line-height: 1.3;
-  font-weight: inherit;
-}
-
-/*********************************************
- * HEADERS
- *********************************************/
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
-  word-wrap: break-word;
-}
-
-.reveal h1 {
-  font-size: var(--r-heading1-size);
-}
-
-.reveal h2 {
-  font-size: var(--r-heading2-size);
-}
-
-.reveal h3 {
-  font-size: var(--r-heading3-size);
-}
-
-.reveal h4 {
-  font-size: var(--r-heading4-size);
-}
-
-.reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
-}
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: var(--r-block-margin) 0;
-  line-height: 1.3;
-}
-
-/* Remove trailing margins after titles */
-.reveal h1:last-child,
-.reveal h2:last-child,
-.reveal h3:last-child,
-.reveal h4:last-child,
-.reveal h5:last-child,
-.reveal h6:last-child {
-  margin-bottom: 0;
-}
-
-/* Ensure certain elements are never larger than the slide itself */
-.reveal img,
-.reveal video,
-.reveal iframe {
-  max-width: 95%;
-  max-height: 95%;
-}
-
-.reveal strong,
-.reveal b {
-  font-weight: bold;
-}
-
-.reveal em {
-  font-style: italic;
-}
-
-.reveal ol,
-.reveal dl,
-.reveal ul {
-  display: inline-block;
-  text-align: left;
-  margin: 0 0 0 1em;
-}
-
-.reveal ol {
-  list-style-type: decimal;
-}
-
-.reveal ul {
-  list-style-type: disc;
-}
-
-.reveal ul ul {
-  list-style-type: square;
-}
-
-.reveal ul ul ul {
-  list-style-type: circle;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-  display: block;
-  margin-left: 40px;
-}
-
-.reveal dt {
-  font-weight: bold;
-}
-
-.reveal dd {
-  margin-left: 40px;
-}
-
-.reveal blockquote {
-  display: block;
-  position: relative;
-  width: 70%;
-  margin: var(--r-block-margin) auto;
-  padding: 5px;
-  font-style: italic;
-  background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-
-.reveal blockquote p:first-child,
-.reveal blockquote p:last-child {
-  display: inline-block;
-}
-
-.reveal q {
-  font-style: italic;
-}
-
-.reveal pre {
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: var(--r-block-margin) auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: var(--r-code-font);
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
-}
-
-.reveal code {
-  font-family: var(--r-code-font);
-  text-transform: none;
-  tab-size: 2;
-}
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal;
-}
-
-.reveal .code-wrapper {
-  white-space: normal;
-}
-
-.reveal .code-wrapper code {
-  white-space: pre;
-}
-
-.reveal table {
-  margin: auto;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.reveal table th {
-  font-weight: bold;
-}
-
-.reveal table th,
-.reveal table td {
-  text-align: left;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid;
-}
-
-.reveal table th[align=center],
-.reveal table td[align=center] {
-  text-align: center;
-}
-
-.reveal table th[align=right],
-.reveal table td[align=right] {
-  text-align: right;
-}
-
-.reveal table tbody tr:last-child th,
-.reveal table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.reveal sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-
-.reveal sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-
-.reveal small {
-  display: inline-block;
-  font-size: 0.6em;
-  line-height: 1.2em;
-  vertical-align: top;
-}
-
-.reveal small * {
-  vertical-align: top;
-}
-
-.reveal img {
-  margin: var(--r-block-margin) 0;
-}
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: var(--r-link-color);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.reveal a:hover {
-  color: var(--r-link-color-hover);
-  text-shadow: none;
-  border: none;
-}
-
-.reveal .roll span:after {
-  color: #fff;
-  background: var(--r-link-color-dark);
-}
-
-/*********************************************
- * Frame helper
- *********************************************/
-.reveal .r-frame {
-  border: 4px solid var(--r-main-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-}
-
-.reveal a .r-frame {
-  transition: all 0.15s linear;
-}
-
-.reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: var(--r-background-color);
+function log (content) {
+  if (LOGGING == true) {
+    console.log(content);
   }
 }
-`;
-
-const monokai_css = `
-/*
-Monokai style - ported by Luigi Maselli - http://grigio.org
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #272822;
-  color: #ddd;
-}
-
-.hljs-tag,
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-strong,
-.hljs-name {
-  color: #f92672;
-}
-
-.hljs-code {
-  color: #66d9ef;
-}
-
-.hljs-class .hljs-title {
-  color: white;
-}
-
-.hljs-attribute,
-.hljs-symbol,
-.hljs-regexp,
-.hljs-link {
-  color: #bf79db;
-}
-
-.hljs-string,
-.hljs-bullet,
-.hljs-subst,
-.hljs-title,
-.hljs-section,
-.hljs-emphasis,
-.hljs-type,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #a6e22e;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion,
-.hljs-meta {
-  color: #75715e;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-doctag,
-.hljs-title,
-.hljs-section,
-.hljs-type,
-.hljs-selector-id {
-  font-weight: bold;
-}
-`;
-
-const escience_css = `
-/*********************************************
- * COLORS
- *********************************************/
-
-:root {
-  --nlesc-blue: #009DDD;
-  --nlesc-purple: #380339;
-  --nlesc-yellow: #FFB213;
-  --light-gray: #D8D8D8;
-  --dark-gray: #2b2b2b;
-  --gray-transparent: rgba(128, 128, 128, .5);
-
-  --link-color: var(--nlesc-purple);
-  --link-color-hover: var(--nlesc-yellow);
-
-}
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-
-p, div, ul {
-  font-family: "Assistant", sans-serif !important;
-  font-optical-sizing: auto;
-  font-weight: 400 !important;
-  font-style: normal;
-}
-
-h1, h2, h3 {
-  font-family: "Nunito" !important;
-  font-weight: 700 !important;
-}
-
-h4, h5 {
-  font-family: "Assistant", sans-serif !important;
-  font-optical-sizing: auto;
-  font-weight: 700 !important;
-  font-style: normal;
-}
-
-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 */
-
-::selection {
-  color: #0f0;
-  background: var(--nlesc-purple);
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: var(--nlesc-purple);
-  text-shadow: none; }
-
-
-/*********************************************
- * CUSTOM COLORS
- *********************************************/
-.primary { color: var(--nlesc-blue) !important; }
-.secondary { color: var(--nlesc-purple) !important; }
-.tertiary { color: var(--light-gray) !important; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: var(--link-color); }
-
-.reveal a:hover {
-  color: var(--link-color-hover); }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: var(--nlesc-blue); }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img { /* undo stupid img frames */
-  background: none;
-  border: none;
-  box-shadow: none;
-}
-
-.reveal a:hover img {
-  border-color: var(--nlesc-blue); }
-
-/*********************************************
- * HIGHLIGHT COLORS
- *********************************************/
-
-.reveal .slides section .fragment.highlight-blue.visible {
-  color: var(--nlesc-blue); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: var(--nlesc-yellow); }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--nlesc-yellow); }
-
-.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); }
-
-/*********************************************
- * FOOTER
- *********************************************/
-
-.slides .footer {
-  font-size: x-small !important;
-  width: 100%;
-  clear: both;
-/*  padding: 50px 0 0 0;*/
-}
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: var(--dark-gray); } }
-
-/*********************************************
- * DIM BACKGROUND PICTURES
- *********************************************/
-.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;
-}
-
-/*********************************************
- * ALLOW FOR DECORATIONS
- *********************************************/
-.slides {
-	/* puts the slide content above overlays and decorations*/
-	z-index: 10 !important;
-}
-
-.speaker-notes {
-	/* puts the slide content above overlays and decorations*/
-	z-index: 3 !important;
-}
-
-footer {
-	display: none !important;
-}
-`;
 
 // TODO: Refactor this quick hack into a Reveal plugin form (it works at least)
 const initDecorations = function(Reveal) {
 
-if (!document.getElementById('fonts'))
-{
-  var head  = document.getElementsByTagName('head')[0];
-  var link  = document.createElement('link');
-  link.id   = 'fonts';
-  link.rel  = 'stylesheet';
-  link.type = 'text/css';
-  link.href = 'https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Fira+Code:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap';
-  link.media = 'all';
-  head.appendChild(link);
-}
-
-if (!document.getElementById('icons'))
-{
-  var head  = document.getElementsByTagName('head')[0];
-  var link  = document.createElement('link');
-  link.id   = 'icons';
-  link.rel  = 'stylesheet';
-  link.type = 'text/css';
-  link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
-  link.media = 'all';
-  head.appendChild(link);
-}
 
 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>
@@ -1393,13 +693,6 @@ const decoration_elements = `
 </svg>
 `;
 
-function insertCss(css) {
-  const style = document.createElement('style');
-  style.type = 'text/css';
-  style.innerHTML = css;
-  document.head.appendChild(style);
-}
-
 function insertDecoration() {
   if ( window.location.search.match( /print-pdf/gi ) ) {
     const backgrounds = document.getElementsByClassName('slide-background');
@@ -1419,16 +712,13 @@ function insertDecoration() {
 }
 
 Reveal.on( 'ready', event => {
-  insertCss(black_css);
-  insertCss(monokai_css);
-  insertCss(escience_css);
   insertDecoration();
 
   /* set events only after reveal is ready */
   Reveal.on( 'slidechanged', event => {
     if (overview_shown == false)
     {
-      console.log("slide changed");
+      log("slide changed");
       addDecorations();
     }
   });
@@ -1455,15 +745,19 @@ function setLogoStyle(style) {
   document.getElementById(style).style.opacity = 1;
 };
 var overview_shown = false;
-function getOpacity(data_state) {
-  var opacity = 0.8;
+// 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; console.log("opacity set to " + opacity)}
+    if (data_state.includes(i)) { opacity = i/10; log("opacity set to " + opacity)}
   };
   return opacity
 };
 function addDecorations() {
-  console.log("set decorations")
+  log("set decorations")
   let root = document.documentElement;
 
 
@@ -1472,16 +766,16 @@ function addDecorations() {
   {
     document.getElementById("footer").innerHTML = currentSlide.querySelector('footer').innerHTML;
     document.getElementById("blue_strip").style.right = 0;
-    console.log("footer (and blue_strip)");
+    log("footer (and blue_strip)");
   } else {
     document.getElementById("blue_strip").style.right = "-" + document.getElementById("blue_strip").offsetWidth + "px";
-    console.log("no footer");
+    log("no footer");
   };
   if ( currentSlide.getAttribute('data-state') )
   {
     var data_state = currentSlide.getAttribute('data-state')
-    var opacity = getOpacity(data_state);
-    console.log("DS" + data_state)
+    var opacity = getOpacity(data_state, currentSlide);
+    log("DS" + data_state)
     // pre-set slide designs
 
     // standard
@@ -1508,6 +802,12 @@ function addDecorations() {
       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
@@ -1521,10 +821,10 @@ function addDecorations() {
       currentSlide.classList.remove("has-light-background");
       root.style.setProperty("--link-color", "var(--nlesc-yellow)");
       root.style.setProperty("--link-color-hover", "var(--nlesc-blue)");
-      console.log("purple overlay");
+      log("purple overlay");
     } else {
       document.getElementById("purple_overlay").style.opacity = 0;
-      console.log("no purple overlay");
+      log("no purple overlay");
     };
 
     // white overlay
@@ -1538,10 +838,10 @@ function addDecorations() {
       currentSlide.classList.add("has-light-background");
       root.style.setProperty("--link-color", "var(--nlesc-blue)");
       root.style.setProperty("--link-color-hover", "var(--nlesc-yellow)");
-      console.log("white overlay");
+      log("white overlay");
     } else {
       document.getElementById("white_overlay").style.opacity = 0;
-      console.log("no white overlay");
+      log("no white overlay");
     };
 
     // black overlay
@@ -1555,10 +855,10 @@ function addDecorations() {
       currentSlide.classList.remove("has-light-background");
       root.style.setProperty("--link-color", "var(--nlesc-yellow)");
       root.style.setProperty("--link-color-hover", "var(--nlesc-blue)");
-      console.log("black overlay");
+      log("black overlay");
     } else {
       document.getElementById("black_overlay").style.opacity = 0;
-      console.log("no black overlay");
+      log("no black overlay");
     };
 
     // blue overlay
@@ -1572,10 +872,10 @@ function addDecorations() {
       currentSlide.classList.remove("has-light-background");
       root.style.setProperty("--link-color", "var(--nlesc-yellow)");
       root.style.setProperty("--link-color-hover", "var(--nlesc-purple)");
-      console.log("blue overlay");
+      log("blue overlay");
     } else {
       document.getElementById("blue_overlay").style.opacity = 0;
-      console.log("no blue overlay");
+      log("no blue overlay");
     };
 
     // blue pane right
@@ -1585,10 +885,10 @@ function addDecorations() {
       document.getElementById("blue_pane_right").style.transform = "translateY(0)";
       currentSlide.classList.remove("has-dark-background");
       currentSlide.classList.add("has-light-background");
-      console.log("blue_pane_right");
+      log("blue_pane_right");
     } else {
       document.getElementById("blue_pane_right").style.opacity = 0;
-      console.log("no blue_pane_right");
+      log("no blue_pane_right");
     };
 
     // blue pane left
@@ -1599,10 +899,10 @@ function addDecorations() {
       setLogoStyle("logo_white");
       currentSlide.classList.remove("has-dark-background");
       currentSlide.classList.add("has-light-background");
-      console.log("blue_pane_left");
+      log("blue_pane_left");
     } else {
       document.getElementById("blue_pane_left").style.opacity = 0;
-      console.log("no blue_pane_left");
+      log("no blue_pane_left");
     };
 
     // touch pane
@@ -1613,10 +913,10 @@ function addDecorations() {
       setLogoStyle("logo_color");
       currentSlide.classList.remove("has-light-background");
       currentSlide.classList.add("has-dark-background");
-      console.log("touch_pane");
+      log("touch_pane");
     } else {
       document.getElementById("touch_pane").style.opacity = 0;
-      console.log("no touch_pane");
+      log("no touch_pane");
     };
 
     // logo
@@ -1625,32 +925,32 @@ function addDecorations() {
       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";
-      console.log("logo");
+      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";
-      console.log("no logo");
+      log("no logo");
     };
 
     // yellow strip
     if ( data_state.includes("yellow_strip"))
     {
       document.getElementById("yellow_strip").style.left = 0;
-      console.log("yellow_strip");
+      log("yellow_strip");
     } else {
       document.getElementById("yellow_strip").style.left = -10 + "vw";
-      console.log("no yellow_strip");
+      log("no yellow_strip");
     };
 
     // yellow flag
     if ( data_state.includes("yellow_flag"))
     {
       document.getElementById("yellow_flag").style.left = 0;
-      console.log("yellow_flag");
+      log("yellow_flag");
     } else {
       document.getElementById("yellow_flag").style.left = -10 + "vh";
-      console.log("no yellow_flag");
+      log("no yellow_flag");
     };
 
     // purple half circle top
@@ -1658,10 +958,10 @@ function addDecorations() {
     {
       document.getElementById("purple_half_circle_top").style.top = 0;
       setLogoStyle("logo_part_white");
-      console.log("purple_half_circle_top");
+      log("purple_half_circle_top");
     } else {
       document.getElementById("purple_half_circle_top").style.top = -17 + "vw";
-      console.log("no purple_half_circle_top");
+      log("no purple_half_circle_top");
     };
 
     // purple half circle bottom
@@ -1669,41 +969,41 @@ function addDecorations() {
     {
       document.getElementById("purple_half_circle_bottom").style.bottom = 0;
       document.getElementById("yellow_flag").style.bottom = 20 + "vh";
-      console.log("purple_half_circle_bottom");
+      log("purple_half_circle_bottom");
     } else {
       document.getElementById("purple_half_circle_bottom").style.bottom = -10 + "vw";
       document.getElementById("yellow_flag").style.bottom = 5 + "vh";
-      console.log("no purple_half_circle_bottom");
+      log("no purple_half_circle_bottom");
     };
 
     // purple strip bottom
     if ( data_state.includes("purple_strip_bottom"))
     {
       document.getElementById("purple_strip_bottom").style.bottom = 0;
-      console.log("purple_strip_bottom");
+      log("purple_strip_bottom");
     } else {
       document.getElementById("purple_strip_bottom").style.bottom = -10 + "vw";
-      console.log("no purple_strip_bottom");
+      log("no purple_strip_bottom");
     };
 
     // yellow_half_strip
     if ( data_state.includes("yellow_half_strip"))
     {
       document.getElementById("yellow_half_strip").style.bottom = 0;
-      console.log("yellow_half_strip");
+      log("yellow_half_strip");
     } else {
       document.getElementById("yellow_half_strip").style.bottom = -25 + "vw";
-      console.log("no yellow_half_strip");
+      log("no yellow_half_strip");
     };
 
     // purple blob
     if ( data_state.includes("purple_blob"))
     {
       document.getElementById("purple_blob").style.top = 0;
-      console.log("purple_blob");
+      log("purple_blob");
     } else {
       document.getElementById("purple_blob").style.top = -50 + "vh";
-      console.log("no purple_blob");
+      log("no purple_blob");
     };
 
     // right_e
@@ -1711,14 +1011,14 @@ function addDecorations() {
     {
       document.getElementById("right_e").style.top = 10 + "vh";
       document.getElementById("right_e").style.right = 0;
-      console.log("right_e_top");
+      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;
-      console.log("right_e_bottom");
+      log("right_e_bottom");
     } else {
       document.getElementById("right_e").style.right = -4 + "vw";
-      console.log("no right_e");
+      log("no right_e");
     };
 
     // clear the background so that the overlays don't interfere
@@ -1736,12 +1036,12 @@ function addDecorations() {
   }
   else
   {
-    console.log("nothing special")
+    log("nothing special")
   };
 };
 
 function removeDecorations() {
-  console.log("removeDecorations")
+  log("removeDecorations")
   document.getElementById("purple_overlay").style.opacity = 0;
   document.getElementById("white_overlay").style.opacity = 0;
   document.getElementById("black_overlay").style.opacity = 0;