prettier config, format files

.prettierignore

@@ -1,3 +1,6 @@
-**/*
+**/*.html
+
 js/**/*.js
 plugin/**/*.js
+test/**/*.md
+examples/**/*.md

.prettierrc

@@ -1,5 +1,5 @@
 {
-	"useTabs": false,
+	"useTabs": true,
 	"tabWidth": 2,
 	"trailingComma": "es5",
 	"printWidth": 100,

README.md

@@ -18,6 +18,7 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
 ---
 
 ### Getting started
+
 - 🚀 [Install reveal.js](https://revealjs.com/installation)
 - 👀 [View the demo presentation](https://revealjs.com/demo)
 - 📖 [Read the documentation](https://revealjs.com/markup/)
@@ -25,6 +26,7 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
 - 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
 
 ---
+
 <div align="center">
   MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
 </div>

css/layout.scss

@@ -38,7 +38,8 @@
 .reveal .r-hstack {
 	display: flex;
 
-	img, video {
+	img,
+	video {
 		min-width: 0;
 		min-height: 0;
 		object-fit: contain;
@@ -58,13 +59,31 @@
 }
 
 // Naming based on tailwindcss
-.reveal .items-stretch { align-items: stretch; }
+.reveal .items-stretch {
-.reveal .items-start { align-items: flex-start; }
+	align-items: stretch;
-.reveal .items-center { align-items: center; }
+}
-.reveal .items-end { align-items: flex-end; }
+.reveal .items-start {
+	align-items: flex-start;
+}
+.reveal .items-center {
+	align-items: center;
+}
+.reveal .items-end {
+	align-items: flex-end;
+}
 
-.reveal .justify-between { justify-content: space-between; }
+.reveal .justify-between {
-.reveal .justify-around { justify-content: space-around; }
+	justify-content: space-between;
-.reveal .justify-start { justify-content: flex-start; }
+}
-.reveal .justify-center { justify-content: center; }
+.reveal .justify-around {
-.reveal .justify-end { justify-content: flex-end; }
+	justify-content: space-around;
+}
+.reveal .justify-start {
+	justify-content: flex-start;
+}
+.reveal .justify-center {
+	justify-content: center;
+}
+.reveal .justify-end {
+	justify-content: flex-end;
+}

css/print/paper.scss

@@ -1,4 +1,3 @@
-
 @media print {
 	html:not(.print-pdf) {
 		overflow: visible;
@@ -24,12 +23,19 @@
 			display: none !important;
 		}
 
-		p, td, li {
+		p,
+		td,
+		li {
 			font-size: 20pt !important;
 			color: #000;
 		}
 
-		h1,h2,h3,h4,h5,h6 {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: #000 !important;
 			height: auto;
 			line-height: normal;
@@ -37,12 +43,26 @@
 			letter-spacing: normal;
 		}
 
-		h1 { font-size: 28pt !important; }
+		h1 {
-		h2 { font-size: 24pt !important; }
+			font-size: 28pt !important;
-		h3 { font-size: 22pt !important; }
+		}
-		h4 { font-size: 22pt !important; font-variant: small-caps; }
+		h2 {
-		h5 { font-size: 21pt !important; }
+			font-size: 24pt !important;
-		h6 { font-size: 20pt !important; font-style: italic; }
+		}
+		h3 {
+			font-size: 22pt !important;
+		}
+		h4 {
+			font-size: 22pt !important;
+			font-variant: small-caps;
+		}
+		h5 {
+			font-size: 21pt !important;
+		}
+		h6 {
+			font-size: 20pt !important;
+			font-style: italic;
+		}
 
 		a:link,
 		a:visited {
@@ -51,7 +71,10 @@
 			text-decoration: underline;
 		}
 
-		ul, ol, div, p {
+		ul,
+		ol,
+		div,
+		p {
 			visibility: visible;
 			position: static;
 			width: auto;

css/print/pdf.scss

@@ -135,7 +135,7 @@ html.reveal-print {
 	}
 
 	/* Layout option which makes notes appear on a separate page */
-	.reveal .speaker-notes-pdf[data-layout="separate-page"] {
+	.reveal .speaker-notes-pdf[data-layout='separate-page'] {
 		position: relative;
 		color: inherit;
 		background-color: transparent;

css/reset.css

@@ -3,6 +3,7 @@
    License: none (public domain)
 */
 
+/* prettier-ignore */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -23,7 +24,7 @@ time, mark, audio, video {
   font: inherit;
   vertical-align: baseline;
 }
-/* HTML5 display-role reset for older browsers */
+/* prettier-ignore */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, main, menu, nav, section {
   display: block;

css/reveal.scss

@@ -62,13 +62,12 @@ html.reveal-full-page {
 	transform: none !important;
 }
 
-
 /*********************************************
  * VIEW FRAGMENTS
  *********************************************/
 
 .reveal .fragment {
-	transition: all .2s ease;
+	transition: all 0.2s ease;
 
 	&:not(.custom) {
 		opacity: 0;
@@ -209,7 +208,7 @@ html.reveal-full-page {
 	visibility: inherit;
 }
 .reveal .fragment.highlight-red.visible {
-		color: #ff2c2d
+	color: #ff2c2d;
 }
 .reveal .fragment.highlight-green.visible {
 	color: #17ff2e;
@@ -219,7 +218,7 @@ html.reveal-full-page {
 }
 
 .reveal .fragment.highlight-current-red.current-fragment {
-	color: #ff2c2d
+	color: #ff2c2d;
 }
 .reveal .fragment.highlight-current-green.current-fragment {
 	color: #17ff2e;
@@ -228,7 +227,6 @@ html.reveal-full-page {
 	color: #1b91ff;
 }
 
-
 /*********************************************
  * DEFAULT ELEMENT STYLES
  *********************************************/
@@ -248,27 +246,56 @@ html.reveal-full-page {
 	position: relative;
 }
 
-
 /*********************************************
  * CONTROLS
  *********************************************/
 
 @keyframes bounce-right {
-	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
+	0%,
-	20% {transform: translateX(10px);}
+	10%,
-	30% {transform: translateX(-5px);}
+	25%,
+	40%,
+	50% {
+		transform: translateX(0);
+	}
+	20% {
+		transform: translateX(10px);
+	}
+	30% {
+		transform: translateX(-5px);
+	}
 }
 
 @keyframes bounce-left {
-	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
+	0%,
-	20% {transform: translateX(-10px);}
+	10%,
-	30% {transform: translateX(5px);}
+	25%,
+	40%,
+	50% {
+		transform: translateX(0);
+	}
+	20% {
+		transform: translateX(-10px);
+	}
+	30% {
+		transform: translateX(5px);
+	}
 }
 
 @keyframes bounce-down {
-	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
+	0%,
-	20% {transform: translateY(10px);}
+	10%,
-	30% {transform: translateY(-5px);}
+	25%,
+	40%,
+	50% {
+		transform: translateY(0);
+	}
+	20% {
+		transform: translateY(10px);
+	}
+	30% {
+		transform: translateY(-5px);
+	}
 }
 
 $controlArrowSize: 3.6em;
@@ -281,11 +308,13 @@ $controlsArrowAngleActive: 36deg;
 
 @mixin controlsArrowTransform($angle) {
 	&:before {
-		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength) * 0.5)
+			translateY(($controlArrowSize - $controlArrowThickness) * 0.5) rotate($angle);
 	}
 
 	&:after {
-		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength) * 0.5)
+			translateY(($controlArrowSize - $controlArrowThickness) * 0.5) rotate(-$angle);
 	}
 }
 
@@ -309,10 +338,8 @@ $controlsArrowAngleActive: 36deg;
 		outline: 0;
 		cursor: pointer;
 		color: currentColor;
-		transform: scale(.9999);
+		transform: scale(0.9999);
-		transition: color 0.2s ease,
+		transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
-					opacity 0.2s ease,
-					transform 0.2s ease;
 		z-index: 2; // above slides
 		pointer-events: auto;
 		font-size: inherit;
@@ -408,7 +435,7 @@ $controlsArrowAngleActive: 36deg;
 	// Back arrow style: "faded":
 	// Deemphasize backwards navigation arrows in favor of drawing
 	// attention to forwards navigation
-	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
+	&[data-controls-back-arrows='faded'] .navigate-up.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -418,7 +445,7 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show arrows for backwards navigation
-	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+	&[data-controls-back-arrows='hidden'] .navigate-up.enabled {
 		opacity: 0;
 		visibility: hidden;
 	}
@@ -446,7 +473,7 @@ $controlsArrowAngleActive: 36deg;
 .reveal:not(.rtl) .controls {
 	// Back arrow style: "faded":
 	// Deemphasize left arrow
-	&[data-controls-back-arrows="faded"] .navigate-left.enabled {
+	&[data-controls-back-arrows='faded'] .navigate-left.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -456,7 +483,7 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show left arrow
-	&[data-controls-back-arrows="hidden"] .navigate-left.enabled {
+	&[data-controls-back-arrows='hidden'] .navigate-left.enabled {
 		opacity: 0;
 		visibility: hidden;
 	}
@@ -465,7 +492,7 @@ $controlsArrowAngleActive: 36deg;
 .reveal.rtl .controls {
 	// Back arrow style: "faded":
 	// Deemphasize right arrow in RTL mode
-	&[data-controls-back-arrows="faded"] .navigate-right.enabled  {
+	&[data-controls-back-arrows='faded'] .navigate-right.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -475,25 +502,25 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show right arrow in RTL mode
-	&[data-controls-back-arrows="hidden"] .navigate-right.enabled {
+	&[data-controls-back-arrows='hidden'] .navigate-right.enabled {
 		opacity: 0;
 		visibility: hidden;
 	}
 }
 
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-up,
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-down {
 	display: none;
 }
 
 // Adjust the layout when there are no vertical slides
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-left,
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
 	bottom: $controlArrowSpacing;
 	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
 }
 
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-right,
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
 	bottom: $controlArrowSpacing;
 	right: 0.5em;
@@ -525,12 +552,11 @@ $controlsArrowAngleActive: 36deg;
 
 // Edge aligned controls layout
 @media screen and (min-width: 500px) {
-
 	.reveal-viewport {
 		--r-controls-spacing: 0.8em;
 	}
 
-	.reveal .controls[data-controls-layout="edges"] {
+	.reveal .controls[data-controls-layout='edges'] {
 		& {
 			top: 0;
 			right: 0;
@@ -570,10 +596,8 @@ $controlsArrowAngleActive: 36deg;
 			margin-left: -$controlArrowSize * 0.5;
 		}
 	}
-
 }
 
-
 /*********************************************
  * PROGRESS BAR
  *********************************************/
@@ -604,7 +628,7 @@ $controlsArrowAngleActive: 36deg;
 	width: 100%;
 
 	background-color: currentColor;
-		transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	transition: transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 	transform-origin: 0 0;
 	transform: scaleX(0);
 }
@@ -688,25 +712,25 @@ $controlsArrowAngleActive: 36deg;
 
 	z-index: 10;
 	transform-style: flat;
-	transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985),
-				transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+		transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985),
-				visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+		visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985),
-				opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 }
 
 /* Global transition speed settings */
-.reveal[data-transition-speed="fast"] .slides section {
+.reveal[data-transition-speed='fast'] .slides section {
 	transition-duration: 400ms;
 }
-.reveal[data-transition-speed="slow"] .slides section {
+.reveal[data-transition-speed='slow'] .slides section {
 	transition-duration: 1200ms;
 }
 
 /* Slide-specific transition speed overrides */
-.reveal .slides section[data-transition-speed="fast"] {
+.reveal .slides section[data-transition-speed='fast'] {
 	transition-duration: 400ms;
 }
-.reveal .slides section[data-transition-speed="slow"] {
+.reveal .slides section[data-transition-speed='slow'] {
 	transition-duration: 1200ms;
 }
 
@@ -757,48 +781,47 @@ $controlsArrowAngleActive: 36deg;
 	opacity: 0;
 }
 
-
 /*********************************************
  * Mixins for readability of transitions
  *********************************************/
 
 @mixin transition-global($style) {
-	.reveal .slides section[data-transition=#{$style}],
+	.reveal .slides section[data-transition='#{$style}'],
 	.reveal.#{$style} .slides section:not([data-transition]) {
 		@content;
 	}
 }
 @mixin transition-stack($style) {
-	.reveal .slides section[data-transition=#{$style}].stack,
+	.reveal .slides section[data-transition='#{$style}'].stack,
 	.reveal.#{$style} .slides section.stack {
 		@content;
 	}
 }
 @mixin transition-horizontal-past($style) {
-	.reveal .slides>section[data-transition=#{$style}].past,
+	.reveal .slides > section[data-transition='#{$style}'].past,
-	.reveal .slides>section[data-transition~=#{$style}-out].past,
+	.reveal .slides > section[data-transition~='#{$style}-out'].past,
 	.reveal.#{$style} .slides > section:not([data-transition]).past {
 		@content;
 	}
 }
 @mixin transition-horizontal-future($style) {
-	.reveal .slides>section[data-transition=#{$style}].future,
+	.reveal .slides > section[data-transition='#{$style}'].future,
-	.reveal .slides>section[data-transition~=#{$style}-in].future,
+	.reveal .slides > section[data-transition~='#{$style}-in'].future,
 	.reveal.#{$style} .slides > section:not([data-transition]).future {
 		@content;
 	}
 }
 
 @mixin transition-vertical-past($style) {
-	.reveal .slides>section>section[data-transition=#{$style}].past,
+	.reveal .slides > section > section[data-transition='#{$style}'].past,
-	.reveal .slides>section>section[data-transition~=#{$style}-out].past,
+	.reveal .slides > section > section[data-transition~='#{$style}-out'].past,
 	.reveal.#{$style} .slides > section > section:not([data-transition]).past {
 		@content;
 	}
 }
 @mixin transition-vertical-future($style) {
-	.reveal .slides>section>section[data-transition=#{$style}].future,
+	.reveal .slides > section > section[data-transition='#{$style}'].future,
-	.reveal .slides>section>section[data-transition~=#{$style}-in].future,
+	.reveal .slides > section > section[data-transition~='#{$style}-in'].future,
 	.reveal.#{$style} .slides > section > section:not([data-transition]).future {
 		@content;
 	}
@@ -869,7 +892,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 }
 
-
 /*********************************************
  * ZOOM TRANSITION
  *********************************************/
@@ -892,7 +914,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: scale(0.2);
 }
 
-
 /*********************************************
  * CUBE TRANSITION
  *
@@ -968,7 +989,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: translate3d(0, 100%, 0) rotateX(-90deg);
 }
 
-
 /*********************************************
  * PAGE TRANSITION
  *
@@ -1044,25 +1064,22 @@ $controlsArrowAngleActive: 36deg;
 	transform: translate3d(0, 0, 0);
 }
 
-
 /*********************************************
  * FADE TRANSITION
  *********************************************/
 
-.reveal .slides section[data-transition=fade],
+.reveal .slides section[data-transition='fade'],
 .reveal.fade .slides section:not([data-transition]),
 .reveal.fade .slides > section > section:not([data-transition]) {
 	transform: none;
 	transition: opacity 0.5s;
 }
 
-
 .reveal.fade.overview .slides section,
 .reveal.fade.overview .slides > section > section {
 	transition: none;
 }
 
-
 /*********************************************
  * NO TRANSITION
  *********************************************/
@@ -1072,7 +1089,6 @@ $controlsArrowAngleActive: 36deg;
 	transition: none;
 }
 
-
 /*********************************************
  * PAUSED MODE
  *********************************************/
@@ -1113,7 +1129,6 @@ $controlsArrowAngleActive: 36deg;
 	opacity: 1;
 }
 
-
 /*********************************************
  * FALLBACK
  *********************************************/
@@ -1128,7 +1143,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: none !important;
 }
 
-
 /*********************************************
  * PER-SLIDE BACKGROUNDS
  *********************************************/
@@ -1152,7 +1166,7 @@ $controlsArrowAngleActive: 36deg;
 
 	background-color: rgba(0, 0, 0, 0);
 
-		transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 }
 
 .reveal .slide-background-content {
@@ -1191,142 +1205,209 @@ $controlsArrowAngleActive: 36deg;
 	left: 0;
 	object-fit: cover;
 }
-	.reveal .slide-background[data-background-size="contain"] video {
+.reveal .slide-background[data-background-size='contain'] video {
 	object-fit: contain;
 }
 
 /* Immediate transition style */
-.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]),
+.reveal[data-background-transition='none']
-.reveal>.backgrounds .slide-background[data-background-transition=none] {
+	> .backgrounds
+	.slide-background:not([data-background-transition]),
+.reveal > .backgrounds .slide-background[data-background-transition='none'] {
 	transition: none;
 }
 
 /* Slide */
-.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
+.reveal[data-background-transition='slide']
-.reveal>.backgrounds .slide-background[data-background-transition=slide] {
+	> .backgrounds
+	.slide-background:not([data-background-transition]),
+.reveal > .backgrounds .slide-background[data-background-transition='slide'] {
 	opacity: 1;
 }
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='slide']
-	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='slide'] {
 	transform: translate(-100%, 0);
 }
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='slide']
-	.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='slide'] {
 	transform: translate(100%, 0);
 }
 
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='slide']
-	.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='slide'] {
 	transform: translate(0, -100%);
 }
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='slide']
-	.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='slide'] {
 	transform: translate(0, 100%);
 }
 
-
 /* Convex */
-.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='convex']
-.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
-.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='convex']
-.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 }
 
-.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='convex']
-.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
 }
-.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='convex']
-.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
 }
 
-
 /* Concave */
-.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='concave']
-.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='concave']
-.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
-.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='concave']
-.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
 }
-.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='concave']
-.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
 }
 
 /* Zoom */
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]),
+.reveal[data-background-transition='zoom']
-.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
+	> .backgrounds
+	.slide-background:not([data-background-transition]),
+.reveal > .backgrounds .slide-background[data-background-transition='zoom'] {
 	transition-timing-function: ease;
 }
 
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='zoom']
-.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(16);
 }
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='zoom']
-.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(0.2);
 }
 
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
+.reveal[data-background-transition='zoom']
-.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(16);
 }
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
+.reveal[data-background-transition='zoom']
-.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(0.2);
 }
 
-
 /* Global transition speed settings */
-.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
+.reveal[data-transition-speed='fast'] > .backgrounds .slide-background {
 	transition-duration: 400ms;
 }
-.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
+.reveal[data-transition-speed='slow'] > .backgrounds .slide-background {
 	transition-duration: 1200ms;
 }
 
-
 /*********************************************
  * AUTO ANIMATE
  *********************************************/
 
-.reveal [data-auto-animate-target^="unmatched"] {
+.reveal [data-auto-animate-target^='unmatched'] {
 	will-change: opacity;
 }
 
-.reveal section[data-auto-animate]:not(.stack):not([data-auto-animate="running"]) [data-auto-animate-target^="unmatched"] {
+.reveal
+	section[data-auto-animate]:not(.stack):not([data-auto-animate='running'])
+	[data-auto-animate-target^='unmatched'] {
 	opacity: 0;
 }
 
-
 /*********************************************
  * OVERVIEW
  *********************************************/
@@ -1398,7 +1479,6 @@ $controlsArrowAngleActive: 36deg;
 	transition: none;
 }
 
-
 /*********************************************
  * RTL SUPPORT
  *********************************************/
@@ -1437,14 +1517,13 @@ $controlsArrowAngleActive: 36deg;
 }
 
 /* Global transition speed settings */
-.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
+.reveal.has-parallax-background[data-transition-speed='fast'] .backgrounds {
 	transition-duration: 400ms;
 }
-.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
+.reveal.has-parallax-background[data-transition-speed='slow'] .backgrounds {
 	transition-duration: 1200ms;
 }
 
-
 /*********************************************
  * OVERLAY FOR LINK PREVIEWS AND HELP
  *********************************************/
@@ -1697,7 +1776,6 @@ $controlsArrowAngleActive: 36deg;
 	visibility: hidden;
 }
 
-
 /*********************************************
  * CODE HIGHLGIHTING
  *********************************************/
@@ -1728,7 +1806,7 @@ $controlsArrowAngleActive: 36deg;
 }
 
 .reveal .hljs.has-highlights.fragment {
-	transition: all .2s ease;
+	transition: all 0.2s ease;
 }
 
 .reveal .hljs:not(:first-child).fragment {
@@ -1746,7 +1824,6 @@ $controlsArrowAngleActive: 36deg;
 	height: 100%;
 }
 
-
 /*********************************************
  * ROLLING LINKS
  *********************************************/
@@ -1792,7 +1869,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
 }
 
-
 /*********************************************
  * SPEAKER NOTES
  *********************************************/
@@ -1843,7 +1919,6 @@ $notesWidthPercent: 25%;
 	}
 }
 
-
 .reveal.show-notes {
 	max-width: 100% - $notesWidthPercent;
 	overflow: visible;
@@ -1893,7 +1968,6 @@ $notesWidthPercent: 25%;
 	}
 }
 
-
 /*********************************************
  * JUMP-TO-SLIDE COMPONENT
  *********************************************/
@@ -1930,7 +2004,6 @@ $notesWidthPercent: 25%;
 	outline: none;
 }
 
-
 /*********************************************
  * ZOOM PLUGIN
  *********************************************/
@@ -1954,7 +2027,6 @@ $notesWidthPercent: 25%;
 	visibility: hidden;
 }
 
-
 /*********************************************
  * SCROLL VIEW
  *********************************************/
@@ -2068,14 +2140,14 @@ $notesWidthPercent: 25%;
 }
 
 // Chromium
-.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar,
+.reveal-viewport.reveal-scroll[data-scrollbar='true']::-webkit-scrollbar,
-.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar {
+.reveal-viewport.reveal-scroll[data-scrollbar='auto']::-webkit-scrollbar {
 	display: none;
 }
 
 // Firefox
-.reveal-viewport.reveal-scroll[data-scrollbar="true"],
+.reveal-viewport.reveal-scroll[data-scrollbar='true'],
-.reveal-viewport.reveal-scroll[data-scrollbar="auto"] {
+.reveal-viewport.reveal-scroll[data-scrollbar='auto'] {
 	scrollbar-width: none;
 }
 
@@ -2186,4 +2258,3 @@ $notesWidthPercent: 25%;
 		background-color: rgba(var(--r-overlay-element-bg-color), 1);
 	}
 }
-

css/theme/README.md

@@ -4,7 +4,7 @@ Themes are written using Sass to keep things modular and reduce the need for rep
 
 ## Creating a Theme
 
-To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build:styles`.
+To create your own theme, start by duplicating a `.scss` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build:styles`.
 
 Each theme file follows the same structure:
 

css/theme/beige.scss

@@ -4,49 +4,55 @@
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #8b743d;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #f7f3de,
 	$background: radial-gradient(rgba(255, 255, 255, 1), rgba(247, 242, 211, 1)),
-
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
 	$main-font-size: 42px,
 	$main-color: #333,
 
 	$heading-color: #333,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$heading-font-weight: 600,
 
-    $heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},
+	$heading1-text-shadow: #{0 1px 0 #ccc,
+	0 2px 0 #c9c9c9,
+	0 3px 0 #bbb,
+	0 4px 0 #b9b9b9,
+	0 5px 0 #aaa,
+	0 6px 1px rgba(0, 0, 0, 0.1),
+	0 0 5px rgba(0, 0, 0, 0.1),
+	0 1px 3px rgba(0, 0, 0, 0.3),
+	0 3px 5px rgba(0, 0, 0, 0.2),
+	0 5px 10px rgba(0, 0, 0, 0.25),
+	0 20px 20px rgba(0, 0, 0, 0.15)},
 
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 20%),
-
 	$selection-color: #333,
 	$selection-background-color: color.scale($active-color, $lightness: 35%),
-
+	$overlay-element-bg-color: '0 0 0',
-		$overlay-element-bg-color: #{0, 0, 0},
+	$overlay-element-fg-color: '240 240 240'
-    $overlay-element-fg-color: #{240, 240, 240}
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // 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");
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.dark-bg-text-color(#fff);

css/theme/black-contrast.scss

@@ -8,40 +8,39 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #42affa;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #000,
 
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$main-font-size: 42px,
 	$main-color: #fff,
 
 	$heading-color: #fff,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$heading-font-weight: 600,
 
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 15%),
-
 	$selection-color: #fff,
 	$selection-background-color: color.scale($active-color, $lightness: -35%)
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#000);

css/theme/black.scss

@@ -5,40 +5,39 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #42affa;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #191919,
 
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$main-font-size: 42px,
 	$main-color: #fff,
 
 	$heading-color: #fff,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$heading-font-weight: 600,
 
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 15%),
-
 	$selection-color: #fff,
 	$selection-background-color: color.scale($active-color, $lightness: -35%)
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);

css/theme/blood.scss

@@ -11,37 +11,46 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $coal: #222;
 $active-color: #a23;
 $code-background-color: #23241f;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/variables' with (
 	$background-color: $coal,
 
-    $main-font: #{Ubuntu, 'sans-serif'},
+	$main-font: 'Ubuntu, sans-serif',
 	$main-color: #eee,
 
-    $heading-font: #{Ubuntu, 'sans-serif'},
+	$heading-font: 'Ubuntu, sans-serif',
 	$heading-text-shadow: 2px 2px 2px $coal,
 
-    $heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},
+	$heading1-text-shadow: #{0 1px 0 #ccc,
+	0 2px 0 #c9c9c9,
+	0 3px 0 #bbb,
+	0 4px 0 #b9b9b9,
+	0 5px 0 #aaa,
+	0 6px 1px rgba(0, 0, 0, 0.1),
+	0 0 5px rgba(0, 0, 0, 0.1),
+	0 1px 3px rgba(0, 0, 0, 0.3),
+	0 3px 5px rgba(0, 0, 0, 0.2),
+	0 5px 10px rgba(0, 0, 0, 0.25),
+	0 20px 20px rgba(0, 0, 0, 0.15)},
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 20%),
-
 	$selection-background-color: $active-color,
 	$selection-color: #fff
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Fonts
-@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic');
 
 // Invert text color when the background is light
 @include mixins.light-bg-text-color(#222);

css/theme/dracula.scss

@@ -4,50 +4,31 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 // Include theme-specific fonts
-@import url(./fonts/league-gothic/league-gothic.css);
+$systemFontsSansSerif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+	helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+$systemFontsMono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 
-$systemFontsSansSerif: -apple-system,
+$background: #282a36;
-					   BlinkMacSystemFont,
+$foreground: #f8f8f2;
-					   avenir next,
+$selection: #44475a;
-					   avenir,
+$comment: #6272a4;
-					   segoe ui,
+$red: #ff5555;
-					   helvetica neue,
+$orange: #ffb86c;
-					   helvetica,
+$yellow: #f1fa8c;
-					   Cantarell,
+$green: #50fa7b;
-					   Ubuntu,
+$purple: #bd93f9;
-					   roboto,
+$cyan: #8be9fd;
-					   noto,
+$pink: #ff79c6;
-					   arial,
-					   sans-serif;
-$systemFontsMono: Menlo,
-				  Consolas,
-				  Monaco,
-				  Liberation Mono,
-				  Lucida Console,
-				  monospace;
-
-$background: #282A36;
-$foreground: #F8F8F2;
-$selection: #44475A;
-$comment: #6272A4;
-$red: #FF5555;
-$orange: #FFB86C;
-$yellow: #F1FA8C;
-$green: #50FA7B;
-$purple: #BD93F9;
-$cyan: #8BE9FD;
-$pink: #FF79C6;
 
 $mainFont: $systemFontsSansSerif;
-$codeFont: "Fira Code", $systemFontsMono;
+$codeFont: 'Fira Code', $systemFontsMono;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #191919,
 
 	$main-font: $mainFont,
@@ -64,7 +45,7 @@ $codeFont: "Fira Code", $systemFontsMono;
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $pink,
 	$link-color-hover: $cyan,
@@ -74,15 +55,14 @@ $codeFont: "Fira Code", $systemFontsMono;
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color($background);
 
-
 // Define additional color effects based on Dracula spec
 // https://spec.draculatheme.com/
 :root {
@@ -97,20 +77,23 @@ $codeFont: "Fira Code", $systemFontsMono;
  * https://draculatheme.com/contribute
  */
 .reveal {
-	strong, b {
+	strong,
+	b {
 		color: var(--r-bold-color);
 	}
-	em, i, blockquote {
+	em,
+	i,
+	blockquote {
 		color: var(--r-italic-color);
 	}
 	code {
 		color: var(--r-inline-code-color);
 	}
 	// Dracula colored list bullets and numbers
-	ul, ol {
+	ul,
+	ol {
 		li::marker {
 			color: var(--r-list-bullet-color);
 		}
 	}
 }
-

css/theme/league.scss

@@ -7,25 +7,33 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
-
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background: radial-gradient(rgba(85, 90, 95, 1), rgba(28, 30, 32, 1)),
 	$background-color: rgba(28, 30, 32, 1),
-
 	$heading-text-shadow: #{0px 0px 6px rgba(0, 0, 0, 0.2)},
-		$heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},
+	$heading1-text-shadow: #{0 1px 0 #ccc,
+	0 2px 0 #c9c9c9,
+	0 3px 0 #bbb,
+	0 4px 0 #b9b9b9,
+	0 5px 0 #aaa,
+	0 6px 1px rgba(0, 0, 0, 0.1),
+	0 0 5px rgba(0, 0, 0, 0.1),
+	0 1px 3px rgba(0, 0, 0, 0.3),
+	0 3px 5px rgba(0, 0, 0, 0.2),
+	0 5px 10px rgba(0, 0, 0, 0.25),
+	0 20px 20px rgba(0, 0, 0, 0.15)}
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // 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");
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);

css/theme/moon.scss

@@ -4,8 +4,8 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 // Solarized colors by Ethan Schoonover
 $base03: #002b36;
@@ -23,12 +23,12 @@ $magenta:   #d33682;
 $violet: #6c71c4;
 $blue: #268bd2;
 $cyan: #2aa198;
-$green:     #859900;;
+$green: #859900;
 
 $active-color: $blue;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: $base03,
 
 	$main-color: $base1,
@@ -36,18 +36,17 @@ $active-color: $blue;
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 20%),
-
 	$selection-color: #fff,
 	$selection-background-color: $magenta
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
 // 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");
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);

css/theme/night.scss

@@ -5,36 +5,35 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #e7ad52;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #111,
 
-    $main-font: #{'Open Sans', sans-serif},
+	$main-font: "'Open Sans', sans-serif",
 	$main-color: #fff,
 
 	$heading-color: #fff,
-    $heading-font: #{'Montserrat', Impact, sans-serif},
+	$heading-font: "'Montserrat', Impact, sans-serif",
 	$heading-text-transform: none,
 	$heading-letter-spacing: -0.03em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 20%),
-
 	$selection-color: #111,
 	$selection-background-color: $active-color
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
+@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);

css/theme/serif.scss

@@ -6,39 +6,38 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
-$active-color: #51483D;
+$active-color: #51483d;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
-    $background-color: #F0F1EB,
+	$background-color: #f0f1eb,
 
-    $main-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
+	$main-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
 	$main-font-size: 42px,
 	$main-color: #000,
 
-    $heading-color: #383D3D,
+	$heading-color: #383d3d,
-    $heading-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
+	$heading-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
 	$heading-font-weight: 600,
 	$heading-text-transform: none,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 25%),
-
 	$selection-color: #fff,
 	$selection-background-color: $active-color,
 
-    $overlay-element-bg-color: #{0, 0, 0},
+	$overlay-element-bg-color: '0 0 0',
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.dark-bg-text-color(#fff);

css/theme/simple.scss

@@ -7,43 +7,42 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
-$active-color: #00008B;
+$active-color: #00008b;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #fff,
 
 	$main-color: #000,
-    $main-font: #{'Lato', sans-serif},
+	$main-font: "'Lato', sans-serif",
 
 	$heading-color: #000,
-    $heading-font: #{'News Cycle', Impact, sans-serif},
+	$heading-font: "'News Cycle', Impact, sans-serif",
 	$heading-font-weight: 600,
 
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 20%),
-
 	$selection-color: #fff,
 	$selection-background-color: $active-color,
 
-    $overlay-element-bg-color: #{0, 0, 0},
+	$overlay-element-bg-color: '0, 0, 0',
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-fg-color: '240, 240, 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700");
+@import url('https://fonts.googleapis.com/css?family=News+Cycle:400,700');
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);

css/theme/sky.scss

@@ -5,39 +5,38 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #2a76dd;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background: radial-gradient(#f7fbfc, #add9e4),
 	$background-color: #f7fbfc,
 
 	$main-color: #333,
-    $main-font: #{'Open Sans', sans-serif},
+	$main-font: "'Open Sans', sans-serif",
 
 	$heading-color: #333,
-    $heading-font: #{'Quicksand', sans-serif},
+	$heading-font: "'Quicksand', sans-serif",
 	$heading-letter-spacing: -0.05em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 15%),
-
 	$selection-color: #fff,
 	$selection-background-color: $active-color,
 
-    $overlay-element-bg-color: #{0, 0, 0},
+	$overlay-element-bg-color: '0 0 0',
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic');
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);

css/theme/solarized.scss

@@ -4,8 +4,8 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 // Solarized colors by Ethan Schoonover
 $base03: #002b36;
@@ -28,7 +28,7 @@ $green:     #859900;
 $active-color: $blue;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: $base3,
 
 	$main-color: $base00,
@@ -36,20 +36,19 @@ $active-color: $blue;
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 20%),
-
 	$selection-color: #fff,
 	$selection-background-color: $magenta,
 
-    $overlay-element-bg-color: #{0, 0, 0},
+	$overlay-element-bg-color: '0 0 0',
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // 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");
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);

css/theme/template/mixins.scss

@@ -1,6 +1,12 @@
 @mixin light-bg-text-color($color) {
 	section.has-light-background {
-		&, h1, h2, h3, h4, h5, h6 {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: $color;
 		}
 	}
@@ -8,7 +14,13 @@
 
 @mixin dark-bg-text-color($color) {
 	section.has-dark-background {
-		&, h1, h2, h3, h4, h5, h6 {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: $color;
 		}
 	}

css/theme/template/settings.scss

@@ -32,12 +32,12 @@ $heading1-text-shadow: none !default;
 $heading1-size: 3.77em !default;
 $heading2-size: 2.11em !default;
 $heading3-size: 1.55em !default;
-$heading4-size: 1.00em !default;
+$heading4-size: 1em !default;
 
 $code-font: monospace !default;
 
 // Links and actions
-$link-color: #13DAEC !default;
+$link-color: #13daec !default;
 $link-color-dark: color.scale($link-color, $lightness: -15%) !default;
 $link-color-hover: color.scale($link-color, $lightness: 20%) !default;
 

css/theme/template/theme.scss

@@ -58,16 +58,23 @@
 	word-wrap: break-word;
 }
 
-.reveal h1 {font-size: var(--r-heading1-size); }
+.reveal h1 {
-.reveal h2 {font-size: var(--r-heading2-size); }
+	font-size: var(--r-heading1-size);
-.reveal h3 {font-size: var(--r-heading3-size); }
+}
-.reveal h4 {font-size: var(--r-heading4-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
  *********************************************/
@@ -219,13 +226,13 @@
 	border-bottom: 1px solid;
 }
 
-.reveal table th[align="center"],
+.reveal table th[align='center'],
-.reveal table td[align="center"] {
+.reveal table td[align='center'] {
 	text-align: center;
 }
 
-.reveal table th[align="right"],
+.reveal table th[align='right'],
-.reveal table td[align="right"] {
+.reveal table td[align='right'] {
 	text-align: right;
 }
 
@@ -258,7 +265,6 @@
 	margin: var(--r-block-margin) 0;
 }
 
-
 /*********************************************
  * LINKS
  *********************************************/
@@ -266,7 +272,7 @@
 .reveal a {
 	color: var(--r-link-color);
 	text-decoration: none;
-	transition: color .15s ease;
+	transition: color 0.15s ease;
 }
 .reveal a:hover {
 	color: var(--r-link-color-hover);
@@ -276,11 +282,10 @@
 
 .reveal .roll span:after {
 	color: #fff;
+	// background: darken( var(--r-link-color), 15% );
 	background: var(--r-link-color-dark);
-
 }
 
-
 /*********************************************
  * Frame helper
  *********************************************/
@@ -291,7 +296,7 @@
 }
 
 .reveal a .r-frame {
-	transition: all .15s linear;
+	transition: all 0.15s linear;
 }
 
 .reveal a:hover .r-frame {
@@ -299,7 +304,6 @@
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
-
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
@@ -308,7 +312,6 @@
 	color: var(--r-link-color);
 }
 
-
 /*********************************************
  * PROGRESS BAR
  *********************************************/

css/theme/white-contrast.scss

@@ -8,13 +8,13 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #2a76dd;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #fff,
 
 	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
@@ -28,23 +28,22 @@ $active-color: #2a76dd;
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 15%),
-
 	$selection-color: #fff,
 	$selection-background-color: $active-color,
 
-    $overlay-element-bg-color: "0, 0, 0",
+	$overlay-element-bg-color: '0, 0, 0',
-    $overlay-element-fg-color: "240, 240, 240"
+	$overlay-element-fg-color: '240, 240, 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);

css/theme/white.scss

@@ -5,43 +5,42 @@
  */
 
 // Load utils
-@use "sass:color";
+@use 'sass:color';
-@use "template/mixins" as mixins;
+@use 'template/mixins' as mixins;
 
 $active-color: #2a76dd;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
+@use 'template/settings' with (
 	$background-color: #fff,
 
 	$main-color: #222,
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$main-font-size: 42px,
 
 	$heading-color: #222,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
 	$heading-font-weight: 600,
 
 	$heading1-size: 2.5em,
 	$heading2-size: 1.6em,
 	$heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading4-size: 1em,
 
 	$link-color: $active-color,
 	$link-color-hover: color.scale($active-color, $lightness: 15%),
-
 	$selection-color: #fff,
 	$selection-background-color: $active-color,
 
-    $overlay-element-bg-color: #{0, 0, 0},
+	$overlay-element-bg-color: '0 0 0',
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);

js/config.ts

@@ -37,9 +37,9 @@ interface Config {
 
   /**
    * Display presentation control arrows
-	 * - true: Display controls on all screens
+	 * - true: Display controls in all views
-	 * - false: Hide controls on all screens
+	 * - false: Hide controls in all views
-	 * - "speaker-only": Only display controls in the speaker view
+	 * - 'speaker-only': Display controls only in the speaker view
    *
    * @defaultValue true
    */
@@ -630,7 +630,7 @@ interface Config {
    * @defaultValue []
    */
   plugins?: any[];
-};
+}
 
 /**
  * The default reveal.js config object.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "reveal.js",
-  "version": "5.2.1",
+	"version": "5.0.5",
 	"description": "The HTML Presentation Framework",
 	"homepage": "https://revealjs.com",
 	"subdomain": "revealjs",

plugin/markdown/vite.config.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
 import { appendExtension } from '../../vite.config.ts';
 
 // Once Vite supports multiple entries for plugins, this build can
@@ -15,8 +15,8 @@ export default defineConfig({
         'plugin/markdown': resolve(__dirname, 'index.js'),
       },
       name: 'RevealMarkdown',
-      fileName: appendExtension
+      fileName: appendExtension,
-    }
+    },
   },
   plugins: [],
-})
+});

plugin/math/vite.config.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
 import { appendExtension } from '../../vite.config.ts';
 
 // Once Vite supports multiple entries for plugins, this build can
@@ -15,8 +15,8 @@ export default defineConfig({
         'plugin/math': resolve(__dirname, 'index.js'),
       },
       name: 'RevealMath',
-      fileName: appendExtension
+      fileName: appendExtension,
-    }
+    },
   },
   plugins: [],
-})
+});

public/plugin/highlight/zenburn.css

@@ -70,7 +70,6 @@ based on dark.css by Ivan Sagalaev
   color: #7f9f7f;
 }
 
-
 .hljs-emphasis {
   font-style: italic;
 }

vite.config.styles.ts

@@ -16,9 +16,9 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			scss: {
-        api: 'modern-compiler'
+				api: 'modern-compiler',
-      }
+			},
-    }
+		},
 	},
 	build: {
 		emptyOutDir: false,

vite.config.ts

@@ -39,8 +39,8 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			scss: {
-        api: 'modern-compiler'
+				api: 'modern-compiler',
-      }
+			},
-    }
+		},
 	},
 });