Merge upstream changes

.github/workflows/js.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 13.x]
+        node-version: [10.x, 14.x]
 
     steps:
     - uses: actions/checkout@v2

.npmignore

@@ -1,7 +1,5 @@
 /test
 /examples
-/css
-/js
 .github
 .gulpfile
 .sass-cache

css/layout.scss

@@ -16,6 +16,12 @@
 	box-sizing: border-box;
 }
 
+// Text that auto-fits it's container
+.reveal .r-fit-text {
+	display: inline-block; // https://github.com/rikschennink/fitty#performance
+	white-space: nowrap;
+}
+
 // Stack multiple elements on top of each other
 .reveal .r-stack {
 	display: grid;
@@ -30,6 +36,12 @@
 .reveal .r-vstack,
 .reveal .r-hstack {
 	display: flex;
+
+	img, video {
+		min-width: 0;
+		min-height: 0;
+		object-fit: contain;
+	}
 }
 
 .reveal .r-vstack {

css/print/pdf.scss

@@ -2,7 +2,7 @@
  * This stylesheet is used to print reveal.js
  * presentations to PDF.
  *
- * https://revealjs.revealjs.com/pdf-export/
+ * https://revealjs.com/pdf-export/
  */
 
 html.print-pdf {

css/reveal.scss

@@ -645,7 +645,6 @@ $controlsArrowAngleActive: 36deg;
 	display: none;
 	position: absolute;
 	width: 100%;
-	padding: 20px 0px;
 	pointer-events: auto;
 
 	z-index: 10;

css/theme/README.md

@@ -1,6 +1,6 @@
 ## Dependencies
 
-Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.revealjs.com/installation/#full-setup
+Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.com/installation/#full-setup
 
 ## Creating a Theme
 

css/theme/source/beige.scss

@@ -13,7 +13,7 @@
 
 
 // Include theme-specific fonts
-@import url(fonts/league-gothic/league-gothic.css);
+@import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 
@@ -32,8 +32,10 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
 	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
 }
 
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
 
 
 // Theme template ------------------------------
 @import "../template/theme";
-// ---------------------------------------------
+// ---------------------------------------------

css/theme/source/black.scss

@@ -12,7 +12,7 @@
 
 
 // Include theme-specific fonts
-@import url(fonts/source-sans-pro/source-sans-pro.css);
+@import url(./fonts/source-sans-pro/source-sans-pro.css);
 
 
 // Override theme settings (see ../template/settings.scss)
@@ -37,13 +37,10 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
-section.has-light-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #222;
-	}
-}
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
 
 
 // Theme template ------------------------------
 @import "../template/theme";
-// ---------------------------------------------
+// ---------------------------------------------

css/theme/source/blood.scss

@@ -46,6 +46,9 @@ $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $blood;
 $selectionColor: #fff;
 
+// Change text colors against dark slide backgrounds
+@include light-bg-text-color(#222);
+
 
 // Theme template ------------------------------
 @import "../template/theme";
@@ -58,6 +61,12 @@ $selectionColor: #fff;
     text-shadow: 1px 1px $coal;
 }
 
+section.has-light-background {
+	p, h1, h2, h3, h4 {
+		text-shadow: none;
+	}
+}
+
 .reveal h1,
 .reveal h2,
 .reveal h3,

css/theme/source/league.scss

@@ -15,7 +15,7 @@
 
 
 // Include theme-specific fonts
-@import url(fonts/league-gothic/league-gothic.css);
+@import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 // Override theme settings (see ../template/settings.scss)
@@ -27,8 +27,10 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
 	@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
 }
 
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
 
 
 // Theme template ------------------------------
 @import "../template/theme";
-// ---------------------------------------------
+// ---------------------------------------------

css/theme/source/moon.scss

@@ -12,7 +12,7 @@
 
 
 // Include theme-specific fonts
-@import url(fonts/league-gothic/league-gothic.css);
+@import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 /**
@@ -50,7 +50,8 @@ $linkColor: $blue;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $magenta;
 
-
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
 
 // Theme template ------------------------------
 @import "../template/theme";

css/theme/source/night.scss

@@ -28,6 +28,9 @@ $headingLetterSpacing: -0.03em;
 $headingTextTransform: none;
 $selectionBackgroundColor: #e7ad52;
 
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
+
 
 // Theme template ------------------------------
 @import "../template/theme";

css/theme/source/serif.scss

@@ -29,6 +29,9 @@ $selectionBackgroundColor: #26351C;
   line-height: 1.3em;
 }
 
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
+
 
 // Theme template ------------------------------
 @import "../template/theme";

css/theme/source/simple.scss

@@ -31,11 +31,8 @@ $linkColor: #00008B;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
 
-section.has-dark-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #fff;
-	}
-}
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
 
 
 // Theme template ------------------------------

css/theme/source/sky.scss

@@ -39,6 +39,9 @@ $selectionBackgroundColor: #134674;
 	@include radial-gradient( #add9e4, #f7fbfc );
 }
 
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
+
 
 
 // Theme template ------------------------------

css/theme/source/solarized.scss

@@ -12,7 +12,7 @@
 
 
 // Include theme-specific fonts
-@import url(fonts/league-gothic/league-gothic.css);
+@import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 
 

css/theme/source/white.scss

@@ -12,7 +12,7 @@
 
 
 // Include theme-specific fonts
-@import url(fonts/source-sans-pro/source-sans-pro.css);
+@import url(./fonts/source-sans-pro/source-sans-pro.css);
 
 
 // Override theme settings (see ../template/settings.scss)
@@ -37,13 +37,10 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
-section.has-dark-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #fff;
-	}
-}
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
 
 
 // Theme template ------------------------------
 @import "../template/theme";
-// ---------------------------------------------
+// ---------------------------------------------

css/theme/template/mixins.scss

@@ -26,4 +26,20 @@
 	background: -o-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
 	background: -ms-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
 	background: radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+}
+
+@mixin light-bg-text-color( $color ) {
+	section.has-light-background {
+		&, h1, h2, h3, h4, h5, h6 {
+			color: $color;
+		}
+	}
+}
+
+@mixin dark-bg-text-color( $color ) {
+	section.has-dark-background {
+		&, h1, h2, h3, h4, h5, h6 {
+			color: $color;
+		}
+	}
 }

css/theme/template/theme.scss

@@ -79,6 +79,16 @@
 	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,

demo.html

@@ -77,6 +77,13 @@ <h2>Slides</h2>
 					</p>
 				</section>
 
+				<section data-visibility="hidden">
+					<h2>Hidden Slides</h2>
+					<p>
+						This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
+					</p>
+				</section>
+
 				<section data-auto-animate>
 					<h2 data-id="code-title">Pretty Code</h2>
 					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
@@ -95,35 +102,35 @@ <h2 data-id="code-title">Pretty Code</h2>
 
 				<section data-auto-animate>
 					<h2 data-id="code-title">With animations</h2>
-					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24">
+					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
 						import React, { useState } from 'react';
 
 						function Example() {
 						  const [count, setCount] = useState(0);
 
 						  return (
-						    &lt;div&gt;
-						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
-						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+						    <div>
+						      <p>You clicked {count} times</p>
+						      <button onClick={() => setCount(count + 1)}>
 						        Click me
-						      &lt;/button&gt;
-						    &lt;/div&gt;
+						      </button>
+						    </div>
 						  );
 						}
 
 						function SecondExample() {
 						  const [count, setCount] = useState(0);
 
 						  return (
-						    &lt;div&gt;
-						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
-						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+						    <div>
+						      <p>You clicked {count} times</p>
+						      <button onClick={() => setCount(count + 1)}>
 						        Click me
-						      &lt;/button&gt;
-						    &lt;/div&gt;
+						      </button>
+						    </div>
 						  );
 						}
-					</code></pre>
+					</script></code></pre>
 				</section>
 
 				<section>

dist/theme/beige.css

@@ -3,8 +3,11 @@
  *
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
-@import url(fonts/league-gothic/league-gothic.css);
+@import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+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 {
+  color: #fff; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
@@ -105,6 +108,15 @@
   margin: 20px 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,