migrated utils to ts, exclude filendings in imports

feat: Open the active slide from the overview screen on enter

.codespellrc

@@ -0,0 +1,8 @@
+[codespell]
+# Ref: https://github.com/codespell-project/codespell#using-a-config-file
+skip = ./.git,./dist,.package-lock.json,*.css,.codespellrc
+check-hidden = true
+# Ignore super long lines -- must be minimized etc, acronyms
+# and some near hit variables
+ignore-regex = ^.{120,}|\b(currentY|FOM)\b
+# ignore-words-list =

.github/CONTRIBUTING.md

@@ -1,10 +1,9 @@
 ## Contributing
-
-Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
+Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**.
 
 
-### Personal Support
-If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
+### General Questions and Support
+If you have questions about how to use reveal.js the best place to ask is in the [Discussions](https://github.com/hakimel/reveal.js/discussions). Anything that isn't a bug report should be posted as a dicussion instead.
 
 
 ### Bug Reports
@@ -12,11 +11,10 @@ When reporting a bug make sure to include information about which browser and op
 
 
 ### Pull Requests
+- Should be submitted from a feature/topic branch (not your master)
 - Should follow the coding style of the file you work in, most importantly:
   - Tabs to indent
   - Single-quoted strings
-- Should be made towards the **dev branch**
-- Should be submitted from a feature/topic branch (not your master)
 
 
 ### Plugins

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [hakimel]

.github/workflows/spellcheck.yml

@@ -0,0 +1,25 @@
+# Codespell configuration is within .codespellrc
+---
+name: Spellcheck
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+permissions:
+  contents: read
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2
+        with:
+          skip: ./.git,./dist,package-lock.json,*.css,.codespellrc

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+name: Tests
+
+on:
+  - push
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version:
+          - 18
+          - 20
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - run: npm install
+      - run: npm run build --if-present
+      - run: npm test
+        env:
+          CI: true

.gitignore

@@ -9,5 +9,5 @@ log/*.log
 tmp/**
 node_modules/
 .sass-cache
-css/reveal.min.css
-js/reveal.min.js
+reveal-js-presentation
+reveal-js-presentation.zip

.npmignore

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

.prettierignore

@@ -0,0 +1,5 @@
+js/**/*.js
+plugin/**/*.js
+test/**/*.md
+test/**/*.html
+examples/**/*.md

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"tabWidth": 2,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"singleQuote": true,
+	"bracketSameLine": false
+}

.travis.yml

@@ -1,5 +0,0 @@
-language: node_js
-node_js:
-  - 11
-after_script:
-  - npm run build -- retire

LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

bower.json

@@ -1,24 +0,0 @@
-{
-  "name": "reveal.js",
-  "version": "3.9.2",
-  "main": [
-    "js/reveal.js",
-    "css/reveal.css"
-  ],
-  "homepage": "http://revealjs.com",
-  "license": "MIT",
-  "description": "The HTML Presentation Framework",
-  "authors": [
-    "Hakim El Hattab <hakim.elhattab@gmail.com>"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/hakimel/reveal.js.git"
-  },
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test"
-  ]
-}

css/layout.scss

@@ -0,0 +1,89 @@
+/**
+ * Layout helpers.
+ */
+
+// Stretch an element vertically based on available space
+.reveal .stretch,
+.reveal .r-stretch {
+	max-width: none;
+	max-height: none;
+}
+
+.reveal pre.stretch code,
+.reveal pre.r-stretch code {
+	height: 100%;
+	max-height: 100%;
+	box-sizing: border-box;
+}
+
+// Text that auto-fits its 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;
+	grid-template-rows: 100%;
+}
+
+.reveal .r-stack > * {
+	grid-area: 1/1;
+	margin: auto;
+}
+
+// Horizontal and vertical stacks
+.reveal .r-vstack,
+.reveal .r-hstack {
+	display: flex;
+
+	img,
+	video {
+		min-width: 0;
+		min-height: 0;
+		object-fit: contain;
+	}
+}
+
+.reveal .r-vstack {
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.reveal .r-hstack {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+// Naming based on tailwindcss
+.reveal .items-stretch {
+	align-items: stretch;
+}
+.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-around {
+	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.css

@@ -1,203 +0,0 @@
-/* Default Print Stylesheet Template
-   by Rob Glazebrook of CSSnewbie.com
-   Last Updated: June 4, 2008
-
-   Feel free (nay, compelled) to edit, append, and
-   manipulate this file as you see fit. */
-
-
-@media print {
-
-	/* SECTION 1: Set default width, margin, float, and
-	   background. This prevents elements from extending
-	   beyond the edge of the printed page, and prevents
-	   unnecessary background images from printing */
-	html {
-		background: #fff;
-		width: auto;
-		height: auto;
-		overflow: visible;
-	}
-	body {
-		background: #fff;
-		font-size: 20pt;
-		width: auto;
-		height: auto;
-		border: 0;
-		margin: 0 5%;
-		padding: 0;
-		overflow: visible;
-		float: none !important;
-	}
-
-	/* SECTION 2: Remove any elements not needed in print.
-	   This would include navigation, ads, sidebars, etc. */
-	.nestedarrow,
-	.controls,
-	.fork-reveal,
-	.share-reveal,
-	.state-background,
-	.reveal .progress,
-	.reveal .backgrounds,
-	.reveal .slide-number {
-		display: none !important;
-	}
-
-	/* SECTION 3: Set body font face, size, and color.
-	   Consider using a serif font for readability. */
-	body, p, td, li, div {
-		font-size: 20pt!important;
-		font-family: Georgia, "Times New Roman", Times, serif !important;
-		color: #000;
-	}
-
-	/* SECTION 4: Set heading font face, sizes, and color.
-	   Differentiate your headings from your body text.
-	   Perhaps use a large sans-serif for distinction. */
-	h1,h2,h3,h4,h5,h6 {
-		color: #000!important;
-		height: auto;
-		line-height: normal;
-		font-family: Georgia, "Times New Roman", Times, serif !important;
-		text-shadow: 0 0 0 #000 !important;
-		text-align: left;
-		letter-spacing: normal;
-	}
-	/* Need to reduce the size of the fonts for printing */
-	h1 { font-size: 28pt !important;  }
-	h2 { font-size: 24pt !important; }
-	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; }
-
-	/* SECTION 5: Make hyperlinks more usable.
-	   Ensure links are underlined, and consider appending
-	   the URL to the end of the link for usability. */
-	a:link,
-	a:visited {
-		color: #000 !important;
-		font-weight: bold;
-		text-decoration: underline;
-	}
-	/*
-	.reveal a:link:after,
-	.reveal a:visited:after {
-		content: " (" attr(href) ") ";
-		color: #222 !important;
-		font-size: 90%;
-	}
-	*/
-
-
-	/* SECTION 6: more reveal.js specific additions by @skypanther */
-	ul, ol, div, p {
-		visibility: visible;
-		position: static;
-		width: auto;
-		height: auto;
-		display: block;
-		overflow: visible;
-		margin: 0;
-		text-align: left !important;
-	}
-	.reveal pre,
-	.reveal table {
-		margin-left: 0;
-		margin-right: 0;
-	}
-	.reveal pre code {
-		padding: 20px;
-		border: 1px solid #ddd;
-	}
-	.reveal blockquote {
-		margin: 20px 0;
-	}
-	.reveal .slides {
-		position: static !important;
-		width: auto !important;
-		height: auto !important;
-
-		left: 0 !important;
-		top: 0 !important;
-		margin-left: 0 !important;
-		margin-top: 0 !important;
-		padding: 0 !important;
-		zoom: 1 !important;
-
-		overflow: visible !important;
-		display: block !important;
-
-		text-align: left !important;
-		-webkit-perspective: none;
-		   -moz-perspective: none;
-		    -ms-perspective: none;
-		        perspective: none;
-
-		-webkit-perspective-origin: 50% 50%;
-		   -moz-perspective-origin: 50% 50%;
-		    -ms-perspective-origin: 50% 50%;
-		        perspective-origin: 50% 50%;
-	}
-	.reveal .slides section {
-		visibility: visible !important;
-		position: static !important;
-		width: auto !important;
-		height: auto !important;
-		display: block !important;
-		overflow: visible !important;
-
-		left: 0 !important;
-		top: 0 !important;
-		margin-left: 0 !important;
-		margin-top: 0 !important;
-		padding: 60px 20px !important;
-		z-index: auto !important;
-
-		opacity: 1 !important;
-
-		page-break-after: always !important;
-
-		-webkit-transform-style: flat !important;
-		   -moz-transform-style: flat !important;
-		    -ms-transform-style: flat !important;
-		        transform-style: flat !important;
-
-		-webkit-transform: none !important;
-		   -moz-transform: none !important;
-		    -ms-transform: none !important;
-		        transform: none !important;
-
-		-webkit-transition: none !important;
-		   -moz-transition: none !important;
-		    -ms-transition: none !important;
-		        transition: none !important;
-	}
-	.reveal .slides section.stack {
-		padding: 0 !important;
-	}
-	.reveal section:last-of-type {
-		page-break-after: avoid !important;
-	}
-	.reveal section .fragment {
-		opacity: 1 !important;
-		visibility: visible !important;
-
-		-webkit-transform: none !important;
-		   -moz-transform: none !important;
-		    -ms-transform: none !important;
-		        transform: none !important;
-	}
-	.reveal section img {
-		display: block;
-		margin: 15px 0px;
-		background: rgba(255,255,255,1);
-		border: 1px solid #666;
-		box-shadow: none;
-	}
-
-	.reveal section small {
-		font-size: 0.8em;
-	}
-
-}

css/print/paper.scss

@@ -0,0 +1,189 @@
+@media print {
+	html:not(.print-pdf) {
+		overflow: visible;
+		width: auto;
+		height: auto;
+
+		body {
+			margin: 0;
+			padding: 0;
+			overflow: visible;
+		}
+	}
+
+	html:not(.print-pdf) .reveal {
+		background: #fff;
+		font-size: 20pt;
+
+		.controls,
+		.state-background,
+		.progress,
+		.backgrounds,
+		.slide-number {
+			display: none !important;
+		}
+
+		p,
+		td,
+		li {
+			font-size: 20pt !important;
+			color: #000;
+		}
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: #000 !important;
+			height: auto;
+			line-height: normal;
+			text-align: left;
+			letter-spacing: normal;
+		}
+
+		h1 {
+			font-size: 28pt !important;
+		}
+		h2 {
+			font-size: 24pt !important;
+		}
+		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 {
+			color: #000 !important;
+			font-weight: bold;
+			text-decoration: underline;
+		}
+
+		ul,
+		ol,
+		div,
+		p {
+			visibility: visible;
+			position: static;
+			width: auto;
+			height: auto;
+			display: block;
+			overflow: visible;
+			margin: 0;
+			text-align: left !important;
+		}
+		pre,
+		table {
+			margin-left: 0;
+			margin-right: 0;
+		}
+		pre code {
+			padding: 20px;
+		}
+		blockquote {
+			margin: 20px 0;
+		}
+
+		.slides {
+			position: static !important;
+			width: auto !important;
+			height: auto !important;
+
+			left: 0 !important;
+			top: 0 !important;
+			margin-left: 0 !important;
+			margin-top: 0 !important;
+			padding: 0 !important;
+			zoom: 1 !important;
+			transform: none !important;
+
+			overflow: visible !important;
+			display: block !important;
+
+			text-align: left !important;
+			perspective: none;
+
+			perspective-origin: 50% 50%;
+		}
+		.slides section {
+			visibility: visible !important;
+			position: static !important;
+			width: auto !important;
+			height: auto !important;
+			display: block !important;
+			overflow: visible !important;
+
+			left: 0 !important;
+			top: 0 !important;
+			margin-left: 0 !important;
+			margin-top: 0 !important;
+			padding: 60px 20px !important;
+			z-index: auto !important;
+
+			opacity: 1 !important;
+
+			page-break-after: always !important;
+
+			transform-style: flat !important;
+			transform: none !important;
+			transition: none !important;
+		}
+		.slides section.stack {
+			padding: 0 !important;
+		}
+		.slides section:last-of-type {
+			page-break-after: avoid !important;
+		}
+		.slides section .fragment {
+			opacity: 1 !important;
+			visibility: visible !important;
+
+			transform: none !important;
+		}
+
+		.r-fit-text {
+			white-space: normal !important;
+		}
+
+		section img {
+			display: block;
+			margin: 15px 0px;
+			background: rgba(255, 255, 255, 1);
+			border: 1px solid #666;
+			box-shadow: none;
+		}
+
+		section small {
+			font-size: 0.8em;
+		}
+
+		.hljs {
+			max-height: 100%;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+			word-break: break-word;
+			font-size: 15pt;
+		}
+
+		.hljs .hljs-ln-numbers {
+			white-space: nowrap;
+		}
+
+		.hljs td {
+			font-size: inherit !important;
+			color: inherit !important;
+		}
+	}
+}

css/print/pdf.css

@@ -1,164 +0,0 @@
-/**
- * This stylesheet is used to print reveal.js
- * presentations to PDF.
- *
- * https://github.com/hakimel/reveal.js#pdf-export
- */
-
-* {
-	-webkit-print-color-adjust: exact;
-}
-
-body {
-	margin: 0 auto !important;
-	border: 0;
-	padding: 0;
-	float: none !important;
-	overflow: visible;
-}
-
-html {
-	width: 100%;
-	height: 100%;
-	overflow: visible;
-}
-
-/* Remove any elements not needed in print. */
-.nestedarrow,
-.reveal .controls,
-.reveal .progress,
-.reveal .playback,
-.reveal.overview,
-.fork-reveal,
-.share-reveal,
-.state-background {
-	display: none !important;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	text-shadow: 0 0 0 #000 !important;
-}
-
-.reveal pre code {
-	overflow: hidden !important;
-	font-family: Courier, 'Courier New', monospace !important;
-}
-
-ul, ol, div, p {
-	visibility: visible;
-	position: static;
-	width: auto;
-	height: auto;
-	display: block;
-	overflow: visible;
-	margin: auto;
-}
-.reveal {
-	width: auto !important;
-	height: auto !important;
-	overflow: hidden !important;
-}
-.reveal .slides {
-	position: static;
-	width: 100% !important;
-	height: auto !important;
-	zoom: 1 !important;
-
-	left: auto;
-	top: auto;
-	margin: 0 !important;
-	padding: 0 !important;
-
-	overflow: visible;
-	display: block;
-
-	perspective: none;
-	perspective-origin: 50% 50%;
-}
-
-.reveal .slides .pdf-page {
-	position: relative;
-	overflow: hidden;
-	z-index: 1;
-
-	page-break-after: always;
-}
-
-.reveal .slides section {
-	visibility: visible !important;
-	display: block !important;
-	position: absolute !important;
-
-	margin: 0 !important;
-	padding: 0 !important;
-	box-sizing: border-box !important;
-	min-height: 1px;
-
-	opacity: 1 !important;
-
-	transform-style: flat !important;
-	transform: none !important;
-}
-
-.reveal section.stack {
-	position: relative !important;
-	margin: 0 !important;
-	padding: 0 !important;
-	page-break-after: avoid !important;
-	height: auto !important;
-	min-height: auto !important;
-}
-
-.reveal img {
-	box-shadow: none;
-}
-
-.reveal .roll {
-	overflow: visible;
-	line-height: 1em;
-}
-
-/* Slide backgrounds are placed inside of their slide when exporting to PDF */
-.reveal .slide-background {
-	display: block !important;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: auto !important;
-}
-
-/* Display slide speaker notes when 'showNotes' is enabled */
-.reveal.show-notes {
-	max-width: none;
-	max-height: none;
-}
-.reveal .speaker-notes-pdf {
-	display: block;
-	width: 100%;
-	height: auto;
-	max-height: none;
-	top: auto;
-	right: auto;
-	bottom: auto;
-	left: auto;
-	z-index: 100;
-}
-
-/* Layout option which makes notes appear on a separate page */
-.reveal .speaker-notes-pdf[data-layout="separate-page"] {
-	position: relative;
-	color: inherit;
-	background-color: transparent;
-	padding: 20px;
-	page-break-after: always;
-	border: 0;
-}
-
-/* Display slide numbers when 'slideNumber' is enabled */
-.reveal .slide-number-pdf {
-	display: block;
-	position: absolute;
-	font-size: 14px;
-}

css/print/pdf.scss

@@ -0,0 +1,159 @@
+/**
+ * This stylesheet is used to print reveal.js
+ * presentations to PDF.
+ *
+ * https://revealjs.com/pdf-export/
+ */
+
+html.reveal-print {
+	* {
+		-webkit-print-color-adjust: exact;
+	}
+
+	& {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+
+	body {
+		margin: 0 auto !important;
+		border: 0;
+		padding: 0;
+		float: none !important;
+		overflow: visible;
+	}
+
+	/* Remove any elements not needed in print. */
+	.nestedarrow,
+	.reveal .controls,
+	.reveal .progress,
+	.reveal .playback,
+	.reveal.overview,
+	.state-background {
+		display: none !important;
+	}
+
+	.reveal pre code {
+		overflow: hidden !important;
+	}
+
+	.reveal {
+		width: auto !important;
+		height: auto !important;
+		overflow: hidden !important;
+	}
+	.reveal .slides {
+		position: static;
+		width: 100% !important;
+		height: auto !important;
+		zoom: 1 !important;
+		pointer-events: initial;
+
+		left: auto;
+		top: auto;
+		margin: 0 !important;
+		padding: 0 !important;
+
+		overflow: visible;
+		display: block;
+
+		perspective: none;
+		perspective-origin: 50% 50%;
+	}
+
+	.reveal .slides .pdf-page {
+		position: relative;
+		overflow: hidden;
+		z-index: 1;
+
+		page-break-after: always;
+	}
+
+	.reveal .slides .pdf-page:last-of-type {
+		page-break-after: avoid;
+	}
+
+	.reveal .slides section {
+		visibility: visible !important;
+		display: block !important;
+		position: absolute !important;
+
+		margin: 0 !important;
+		padding: 0 !important;
+		box-sizing: border-box !important;
+		min-height: 1px;
+
+		opacity: 1 !important;
+
+		transform-style: flat !important;
+		transform: none !important;
+	}
+
+	.reveal section.stack {
+		position: relative !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		page-break-after: avoid !important;
+		height: auto !important;
+		min-height: auto !important;
+	}
+
+	.reveal img {
+		box-shadow: none;
+	}
+
+	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
+	.reveal .backgrounds {
+		display: none;
+	}
+	.reveal .slide-background {
+		display: block !important;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: auto !important;
+	}
+
+	/* Display slide speaker notes when 'showNotes' is enabled */
+	.reveal.show-notes {
+		max-width: none;
+		max-height: none;
+	}
+	.reveal .speaker-notes-pdf {
+		display: block;
+		width: 100%;
+		height: auto;
+		max-height: none;
+		top: auto;
+		right: auto;
+		bottom: auto;
+		left: auto;
+		z-index: 100;
+	}
+
+	/* Layout option which makes notes appear on a separate page */
+	.reveal .speaker-notes-pdf[data-layout='separate-page'] {
+		position: relative;
+		color: inherit;
+		background-color: transparent;
+		padding: 20px;
+		page-break-after: always;
+		border: 0;
+	}
+
+	/* Display slide numbers when 'slideNumber' is enabled */
+	.reveal .slide-number-pdf {
+		display: block;
+		position: absolute;
+		font-size: 14px;
+		visibility: visible;
+	}
+
+	/* This accessibility tool is not useful in PDF and breaks it visually */
+	.aria-status {
+		display: none;
+	}
+}

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,8 +24,8 @@ 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/theme/README.md

@@ -1,21 +1,20 @@
 ## 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 including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#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
 
-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 by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/gruntfile.js)) when you run `npm run build -- css-themes`.
+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 does four things in the following order:
+Each theme file follows the same structure:
 
-1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
-Shared utility functions.
+1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**  
+   Shared utility functions.
 
-2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
-Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
+2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**  
+   Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.
 
-3. **Override**
-This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.
+3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**  
+   The template theme file which will generate final CSS output based on the currently defined variables.
 
-4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
-The template theme file which will generate final CSS output based on the currently defined variables.
+4. **Optionally add custom fonts and/or additional styles**

css/theme/beige.css

@@ -1,277 +0,0 @@
-/**
- * Beige theme for reveal.js.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #f7f2d3;
-  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
-  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background-color: #f7f3de; }
-
-.reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #333; }
-
-::selection {
-  color: #fff;
-  background: rgba(79, 64, 28, 0.99);
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: rgba(79, 64, 28, 0.99);
-  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: 0 0 20px 0;
-  color: #333;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  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); }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #8b743d;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #c0a86e;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #564826; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #333;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #8b743d;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #8b743d; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #8b743d; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #f7f3de; } }

css/theme/beige.scss

@@ -0,0 +1,58 @@
+/**
+ * Beige theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #8b743d;
+
+// Inject theme variables (with some overrides)
+@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-size: 42px,
+	$main-color: #333,
+
+	$heading-color: #333,
+	$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, 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: 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-fg-color: '240 240 240'
+);
+
+// Inject the theme template
+@use 'template/theme';
+
+// Include theme-specific fonts
+@import url('./fonts/league-gothic/league-gothic.css');
+@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

@@ -0,0 +1,46 @@
+/**
+ * Black compact & high contrast reveal.js theme, with headers not in capitals.
+ *
+ * By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
+ *
+ * - Keep the source similar to black.css - for easy comparison.
+ * - $mainFontSize controls code blocks, too (although under some ratio).
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #42affa;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #000,
+
+	$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-weight: 600,
+
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$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';
+
+// Include theme-specific fonts
+@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.css

@@ -1,273 +0,0 @@
-/**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
-@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
-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
- *********************************************/
-body {
-  background: #191919;
-  background-color: #191919; }
-
-.reveal {
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-size: 42px;
-  font-weight: normal;
-  color: #fff; }
-
-::selection {
-  color: #fff;
-  background: #bee4fd;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #bee4fd;
-  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: 0 0 20px 0;
-  color: #fff;
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 2.5em; }
-
-.reveal h2 {
-  font-size: 1.6em; }
-
-.reveal h3 {
-  font-size: 1.3em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #42affa;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #8dcffc;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #068de9; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #42affa;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #42affa; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #42affa; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #191919; } }

css/theme/black.scss

@@ -0,0 +1,43 @@
+/**
+ * Black theme for reveal.js. This is the opposite of the 'white' theme.
+ *
+ * By Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #42affa;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #191919,
+
+	$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-weight: 600,
+
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$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';
+
+// Include theme-specific fonts
+@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.css

@@ -1,296 +0,0 @@
-/**
- * Blood theme for reveal.js
- * Author: Walther http://github.com/Walther
- *
- * Designed to be used with highlight.js theme
- * "monokai_sublime.css" available from
- * https://github.com/isagalaev/highlight.js/
- *
- * For other themes, change $codeBackground accordingly.
- *
- */
-@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #222;
-  background-color: #222; }
-
-.reveal {
-  font-family: Ubuntu, "sans-serif";
-  font-size: 40px;
-  font-weight: normal;
-  color: #eee; }
-
-::selection {
-  color: #fff;
-  background: #a23;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #a23;
-  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: 0 0 20px 0;
-  color: #eee;
-  font-family: Ubuntu, "sans-serif";
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: 2px 2px 2px #222;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  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); }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #a23;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #dd5566;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #6a1520; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #eee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #a23;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #a23; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #a23; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #222; } }
-
-.reveal p {
-  font-weight: 300;
-  text-shadow: 1px 1px #222; }
-
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  font-weight: 700; }
-
-.reveal p code {
-  background-color: #23241f;
-  display: inline-block;
-  border-radius: 7px; }
-
-.reveal small code {
-  vertical-align: baseline; }

css/theme/blood.scss

@@ -0,0 +1,90 @@
+/**
+ * Blood theme for reveal.js
+ * Author: Walther http://github.com/Walther
+ *
+ * Designed to be used with highlight.js theme
+ * "monokai_sublime.css" available from
+ * https://github.com/isagalaev/highlight.js/
+ *
+ * For other themes, change $codeBackground accordingly.
+ *
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$coal: #222;
+$active-color: #a23;
+$code-background-color: #23241f;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: $coal,
+
+	$main-font: 'Ubuntu, sans-serif',
+	$main-color: #eee,
+
+	$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, 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';
+
+// Fonts
+@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);
+
+.reveal p {
+	font-weight: 300;
+	text-shadow: 1px 1px $coal;
+}
+
+section.has-light-background {
+	p,
+	h1,
+	h2,
+	h3,
+	h4 {
+		text-shadow: none;
+	}
+}
+
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+	font-weight: 700;
+}
+
+.reveal p code {
+	background-color: $code-background-color;
+	display: inline-block;
+	border-radius: 7px;
+}
+
+.reveal small code {
+	vertical-align: baseline;
+}

css/theme/dracula.scss

@@ -0,0 +1,96 @@
+/**
+ * Dracula Dark theme for reveal.js.
+ * Based on https://draculatheme.com
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+// Include theme-specific fonts
+$systemFontsSansSerif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+	helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, 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;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #191919,
+
+	$main-font: $mainFont,
+	$main-font-size: 42px,
+	$main-color: $foreground,
+
+	$code-font: $codeFont,
+
+	$heading-color: $purple,
+	$heading-font: $mainFont,
+	$heading-font-weight: 600,
+	$heading-text-transform: none,
+
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
+
+	$link-color: $pink,
+	$link-color-hover: $cyan,
+
+	$selection-color: #fff,
+	$selection-background-color: $selection
+);
+
+// Inject the theme template
+@use 'template/theme';
+
+// 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 {
+	--r-bold-color: #{$orange};
+	--r-italic-color: #{$yellow};
+	--r-inline-code-color: #{$green};
+	--r-list-bullet-color: #{$cyan};
+}
+
+/**
+ * Dracula colors by Zeno Rocha
+ * https://draculatheme.com/contribute
+ */
+.reveal {
+	strong,
+	b {
+		color: var(--r-bold-color);
+	}
+	em,
+	i,
+	blockquote {
+		color: var(--r-italic-color);
+	}
+	code {
+		color: var(--r-inline-code-color);
+	}
+	// Dracula colored list bullets and numbers
+	ul,
+	ol {
+		li::marker {
+			color: var(--r-list-bullet-color);
+		}
+	}
+}

css/theme/fonts/league-gothic/league-gothic.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'League Gothic';
+    src: url('./league-gothic.woff') format('woff');
+
+    font-weight: normal;
+    font-style: normal;
+}

css/theme/fonts/source-sans-pro/source-sans-pro.css

@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('./source-sans-pro-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('./source-sans-pro-italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('./source-sans-pro-semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('./source-sans-pro-semibolditalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+}

css/theme/league.css

@@ -1,279 +0,0 @@
-/**
- * League theme for reveal.js.
- *
- * This was the default theme pre-3.0.0.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #1c1e20;
-  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
-  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background-color: #2b2b2b; }
-
-.reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #eee; }
-
-::selection {
-  color: #fff;
-  background: #FF5E99;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #FF5E99;
-  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: 0 0 20px 0;
-  color: #eee;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  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); }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #13DAEC;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #71e9f4;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #0d99a5; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #eee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #13DAEC;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #13DAEC; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #13DAEC; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #2b2b2b; } }

css/theme/league.scss

@@ -0,0 +1,39 @@
+/**
+ * League theme for reveal.js.
+ *
+ * This was the default theme pre-3.0.0.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+// Inject theme variables (with some overrides)
+@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, 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';
+
+// Include theme-specific fonts
+@import url('./fonts/league-gothic/league-gothic.css');
+@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.css

@@ -1,277 +0,0 @@
-/**
- * Solarized Dark theme for reveal.js.
- * Author: Achim Staebler
- */
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-/**
- * Solarized colors by Ethan Schoonover
- */
-html * {
-  color-profile: sRGB;
-  rendering-intent: auto; }
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #002b36;
-  background-color: #002b36; }
-
-.reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #93a1a1; }
-
-::selection {
-  color: #fff;
-  background: #d33682;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #d33682;
-  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: 0 0 20px 0;
-  color: #eee8d5;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #268bd2;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #78b9e6;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #1a6091; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #93a1a1;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #268bd2;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #268bd2; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #268bd2; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #002b36; } }

css/theme/moon.scss

@@ -0,0 +1,52 @@
+/**
+ * Solarized Dark theme for reveal.js.
+ * Author: Achim Staebler
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+// Solarized colors by Ethan Schoonover
+$base03: #002b36;
+$base02: #073642;
+$base01: #586e75;
+$base00: #657b83;
+$base0: #839496;
+$base1: #93a1a1;
+$base2: #eee8d5;
+$base3: #fdf6e3;
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #dc322f;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;
+
+$active-color: $blue;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: $base03,
+
+	$main-color: $base1,
+	$heading-color: $base2,
+
+	$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';
+
+// Include theme-specific fonts
+// Include theme-specific fonts
+@import url('./fonts/league-gothic/league-gothic.css');
+@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.css

@@ -1,271 +0,0 @@
-/**
- * Black theme for reveal.js.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #111;
-  background-color: #111; }
-
-.reveal {
-  font-family: "Open Sans", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #eee; }
-
-::selection {
-  color: #fff;
-  background: #e7ad52;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #e7ad52;
-  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: 0 0 20px 0;
-  color: #eee;
-  font-family: "Montserrat", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: -0.03em;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #e7ad52;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #f3d7ac;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #d08a1d; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #eee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #e7ad52;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #e7ad52; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #e7ad52; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #111; } }

css/theme/night.scss

@@ -0,0 +1,39 @@
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #e7ad52;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #111,
+
+	$main-font: "'Open Sans', sans-serif",
+	$main-color: #fff,
+
+	$heading-color: #fff,
+	$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';
+
+// Include theme-specific fonts
+@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
+@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.css

@@ -1,273 +0,0 @@
-/**
- * A simple theme for reveal.js presentations, similar
- * to the default theme. The accent color is brown.
- *
- * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
- */
-.reveal a {
-  line-height: 1.3em; }
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #F0F1EB;
-  background-color: #F0F1EB; }
-
-.reveal {
-  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #000; }
-
-::selection {
-  color: #fff;
-  background: #26351C;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #26351C;
-  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: 0 0 20px 0;
-  color: #383D3D;
-  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #51483D;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #8b7c69;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #25211c; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #000;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #51483D;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #51483D; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #51483D; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #F0F1EB; } }

css/theme/serif.scss

@@ -0,0 +1,44 @@
+/**
+ * A simple theme for reveal.js presentations, similar
+ * to the default theme. The accent color is brown.
+ *
+ * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #51483d;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #f0f1eb,
+
+	$main-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
+	$main-font-size: 42px,
+	$main-color: #000,
+
+	$heading-color: #383d3d,
+	$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-fg-color: '240 240 240'
+);
+
+// Inject the theme template
+@use 'template/theme';
+
+// Change text colors against light slide backgrounds
+@include mixins.dark-bg-text-color(#fff);
+
+.reveal a {
+	line-height: 1.3em;
+}

css/theme/simple.css

@@ -1,276 +0,0 @@
-/**
- * A simple theme for reveal.js presentations, similar
- * to the default theme. The accent color is darkblue.
- *
- * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
- * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-@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);
-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
- *********************************************/
-body {
-  background: #fff;
-  background-color: #fff; }
-
-.reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #000; }
-
-::selection {
-  color: #fff;
-  background: rgba(0, 0, 0, 0.99);
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: rgba(0, 0, 0, 0.99);
-  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: 0 0 20px 0;
-  color: #000;
-  font-family: "News Cycle", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #00008B;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #0000f1;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #00003f; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #000;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #00008B;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #00008B; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #00008B; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #fff; } }

css/theme/simple.scss

@@ -0,0 +1,48 @@
+/**
+ * A simple theme for reveal.js presentations, similar
+ * to the default theme. The accent color is darkblue.
+ *
+ * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
+ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #00008b;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #fff,
+
+	$main-color: #000,
+	$main-font: "'Lato', sans-serif",
+
+	$heading-color: #000,
+	$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: 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-fg-color: '240, 240, 240'
+);
+
+// Inject the theme template
+@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=Lato:400,700,400italic,700italic');
+
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);

css/theme/sky.css

@@ -1,280 +0,0 @@
-/**
- * Sky theme for reveal.js.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-@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);
-.reveal a {
-  line-height: 1.3em; }
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #add9e4;
-  background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
-  background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background-color: #f7fbfc; }
-
-.reveal {
-  font-family: "Open Sans", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #333; }
-
-::selection {
-  color: #fff;
-  background: #134674;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #134674;
-  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: 0 0 20px 0;
-  color: #333;
-  font-family: "Quicksand", sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: -0.08em;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #3b759e;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #74a7cb;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #264c66; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #333;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #3b759e;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #3b759e; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #3b759e; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #f7fbfc; } }

css/theme/sky.scss

@@ -0,0 +1,46 @@
+/**
+ * Sky theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #2a76dd;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background: radial-gradient(#f7fbfc, #add9e4),
+	$background-color: #f7fbfc,
+
+	$main-color: #333,
+	$main-font: "'Open Sans', sans-serif",
+
+	$heading-color: #333,
+	$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-fg-color: '240 240 240'
+);
+
+// Inject the theme template
+@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=Open+Sans:400italic,700italic,400,700');
+
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);
+
+.reveal a {
+	line-height: 1.3em;
+}

css/theme/solarized.css

@@ -1,277 +0,0 @@
-/**
- * Solarized Light theme for reveal.js.
- * Author: Achim Staebler
- */
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-/**
- * Solarized colors by Ethan Schoonover
- */
-html * {
-  color-profile: sRGB;
-  rendering-intent: auto; }
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #fdf6e3;
-  background-color: #fdf6e3; }
-
-.reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
-  font-weight: normal;
-  color: #657b83; }
-
-::selection {
-  color: #fff;
-  background: #d33682;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #d33682;
-  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: 0 0 20px 0;
-  color: #586e75;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 3.77em; }
-
-.reveal h2 {
-  font-size: 2.11em; }
-
-.reveal h3 {
-  font-size: 1.55em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #268bd2;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #78b9e6;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #1a6091; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #657b83;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #268bd2;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #268bd2; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #268bd2; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #fdf6e3; } }

css/theme/solarized.scss

@@ -0,0 +1,54 @@
+/**
+ * Solarized Light theme for reveal.js.
+ * Author: Achim Staebler
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+// Solarized colors by Ethan Schoonover
+$base03: #002b36;
+$base02: #073642;
+$base01: #586e75;
+$base00: #657b83;
+$base0: #839496;
+$base1: #93a1a1;
+$base2: #eee8d5;
+$base3: #fdf6e3;
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #dc322f;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;
+
+$active-color: $blue;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: $base3,
+
+	$main-color: $base00,
+	$heading-color: $base01,
+
+	$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-fg-color: '240 240 240'
+);
+
+// Inject the theme template
+@use 'template/theme';
+
+// Include theme-specific fonts
+@import url('./fonts/league-gothic/league-gothic.css');
+@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/source/beige.scss

@@ -1,39 +0,0 @@
-/**
- * Beige theme for reveal.js.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Include theme-specific fonts
-@import url(../../lib/font/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)
-$mainColor: #333;
-$headingColor: #333;
-$headingTextShadow: none;
-$backgroundColor: #f7f3de;
-$linkColor: #8b743d;
-$linkColorHover: lighten( $linkColor, 20% );
-$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
-$heading1TextShadow: 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);
-
-// Background generator
-@mixin bodyBackground() {
-	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
-}
-
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/black.scss

@@ -1,49 +0,0 @@
-/**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-// Include theme-specific fonts
-@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
-
-
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #191919;
-
-$mainColor: #fff;
-$headingColor: #fff;
-
-$mainFontSize: 42px;
-$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #42affa;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
-
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1.0em;
-
-section.has-light-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #222;
-	}
-}
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/blood.scss

@@ -1,78 +0,0 @@
-/**
- * Blood theme for reveal.js
- * Author: Walther http://github.com/Walther
- *
- * Designed to be used with highlight.js theme
- * "monokai_sublime.css" available from
- * https://github.com/isagalaev/highlight.js/
- *
- * For other themes, change $codeBackground accordingly.
- *
- */
-
- // Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-// Include theme-specific fonts
-
-@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
-
-// Colors used in the theme
-$blood: #a23;
-$coal: #222;
-$codeBackground: #23241f;
-
-$backgroundColor: $coal;
-
-// Main text
-$mainFont: Ubuntu, 'sans-serif';
-$mainColor: #eee;
-
-// Headings
-$headingFont: Ubuntu, 'sans-serif';
-$headingTextShadow: 2px 2px 2px $coal;
-
-// h1 shadow, borrowed humbly from 
-// (c) Default theme by Hakim El Hattab
-$heading1TextShadow: 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);
-
-// Links
-$linkColor: $blood;
-$linkColorHover: lighten( $linkColor, 20% );
-
-// Text selection
-$selectionBackgroundColor: $blood;
-$selectionColor: #fff;
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------
-
-// some overrides after theme template import
-
-.reveal p {
-    font-weight: 300;
-    text-shadow: 1px 1px $coal;
-}
-
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-    font-weight: 700;
-}
-
-.reveal p code {
-    background-color: $codeBackground;
-    display: inline-block;
-    border-radius: 7px;
-}
-
-.reveal small code {
-    vertical-align: baseline;
-}

css/theme/source/league.scss

@@ -1,34 +0,0 @@
-/**
- * League theme for reveal.js.
- *
- * This was the default theme pre-3.0.0.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Include theme-specific fonts
-@import url(../../lib/font/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)
-$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
-$heading1TextShadow: 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);
-
-// Background generator
-@mixin bodyBackground() {
-	@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
-}
-
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/moon.scss

@@ -1,57 +0,0 @@
-/**
- * Solarized Dark theme for reveal.js.
- * Author: Achim Staebler
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Include theme-specific fonts
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-
-/**
- * Solarized colors by Ethan Schoonover
- */
-html * {
-	color-profile: sRGB;
-	rendering-intent: auto;
-}
-
-// Solarized colors
-$base03:    #002b36;
-$base02:    #073642;
-$base01:    #586e75;
-$base00:    #657b83;
-$base0:     #839496;
-$base1:     #93a1a1;
-$base2:     #eee8d5;
-$base3:     #fdf6e3;
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;
-
-// Override theme settings (see ../template/settings.scss)
-$mainColor: $base1;
-$headingColor: $base2;
-$headingTextShadow: none;
-$backgroundColor: $base03;
-$linkColor: $blue;
-$linkColorHover: lighten( $linkColor, 20% );
-$selectionBackgroundColor: $magenta;
-
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/night.scss

@@ -1,34 +0,0 @@
-/**
- * Black theme for reveal.js.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-// Include theme-specific fonts
-@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
-
-
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #111;
-
-$mainFont: 'Open Sans', sans-serif;
-$linkColor: #e7ad52;
-$linkColorHover: lighten( $linkColor, 20% );
-$headingFont: 'Montserrat', Impact, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: -0.03em;
-$headingTextTransform: none;
-$selectionBackgroundColor: #e7ad52;
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/serif.scss

@@ -1,35 +0,0 @@
-/**
- * A simple theme for reveal.js presentations, similar
- * to the default theme. The accent color is brown.
- *
- * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Override theme settings (see ../template/settings.scss)
-$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
-$mainColor: #000;
-$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
-$headingColor: #383D3D;
-$headingTextShadow: none;
-$headingTextTransform: none;
-$backgroundColor: #F0F1EB;
-$linkColor: #51483D;
-$linkColorHover: lighten( $linkColor, 20% );
-$selectionBackgroundColor: #26351C;
-
-.reveal a {
-  line-height: 1.3em;
-}
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/simple.scss

@@ -1,43 +0,0 @@
-/**
- * A simple theme for reveal.js presentations, similar
- * to the default theme. The accent color is darkblue.
- *
- * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
- * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Include theme-specific fonts
-@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);
-
-
-// Override theme settings (see ../template/settings.scss)
-$mainFont: 'Lato', sans-serif;
-$mainColor: #000;
-$headingFont: 'News Cycle', Impact, sans-serif;
-$headingColor: #000;
-$headingTextShadow: none;
-$headingTextTransform: none;
-$backgroundColor: #fff;
-$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;
-	}
-}
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/sky.scss

@@ -1,46 +0,0 @@
-/**
- * Sky theme for reveal.js.
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// 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=Open+Sans:400italic,700italic,400,700);
-
-
-// Override theme settings (see ../template/settings.scss)
-$mainFont: 'Open Sans', sans-serif;
-$mainColor: #333;
-$headingFont: 'Quicksand', sans-serif;
-$headingColor: #333;
-$headingLetterSpacing: -0.08em;
-$headingTextShadow: none;
-$backgroundColor: #f7fbfc;
-$linkColor: #3b759e;
-$linkColorHover: lighten( $linkColor, 20% );
-$selectionBackgroundColor: #134674;
-
-// Fix links so they are not cut off
-.reveal a {
-	line-height: 1.3em;
-}
-
-// Background generator
-@mixin bodyBackground() {
-	@include radial-gradient( #add9e4, #f7fbfc );
-}
-
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/solarized.scss

@@ -1,63 +0,0 @@
-/**
- * Solarized Light theme for reveal.js.
- * Author: Achim Staebler
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Include theme-specific fonts
-@import url(../../lib/font/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-
-
-/**
- * Solarized colors by Ethan Schoonover
- */
-html * {
-	color-profile: sRGB;
-	rendering-intent: auto;
-}
-
-// Solarized colors
-$base03:    #002b36;
-$base02:    #073642;
-$base01:    #586e75;
-$base00:    #657b83;
-$base0:     #839496;
-$base1:     #93a1a1;
-$base2:     #eee8d5;
-$base3:     #fdf6e3;
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;
-
-// Override theme settings (see ../template/settings.scss)
-$mainColor: $base00;
-$headingColor: $base01;
-$headingTextShadow: none;
-$backgroundColor: $base3;
-$linkColor: $blue;
-$linkColorHover: lighten( $linkColor, 20% );
-$selectionBackgroundColor: $magenta;
-
-// Background generator
-// @mixin bodyBackground() {
-// 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
-// }
-
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/white.scss

@@ -1,49 +0,0 @@
-/**
- * White theme for reveal.js. This is the opposite of the 'black' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-// Include theme-specific fonts
-@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
-
-
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #fff;
-
-$mainColor: #222;
-$headingColor: #222;
-
-$mainFontSize: 42px;
-$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #2a76dd;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
-
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1.0em;
-
-section.has-dark-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #fff;
-	}
-}
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/template/mixins.scss

@@ -1,29 +1,27 @@
-@mixin vertical-gradient( $top, $bottom ) {
-	background: $top;
-	background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
-	background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
-	background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
-	background: -o-linear-gradient( top, $top 0%, $bottom 100% );
-	background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
-	background: linear-gradient( top, $top 0%, $bottom 100% );
+@mixin light-bg-text-color($color) {
+	section.has-light-background {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: $color;
+		}
+	}
 }
 
-@mixin horizontal-gradient( $top, $bottom ) {
-	background: $top;
-	background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
-	background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
-	background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
-	background: -o-linear-gradient( left, $top 0%, $bottom 100% );
-	background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
-	background: linear-gradient( left, $top 0%, $bottom 100% );
+@mixin dark-bg-text-color($color) {
+	section.has-dark-background {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: $color;
+		}
+	}
 }
-
-@mixin radial-gradient( $outer, $inner, $type: circle ) {
-	background: $outer;
-	background: -moz-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-	background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
-	background: -webkit-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-	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% );
-}

css/theme/template/settings.scss

@@ -1,45 +1,96 @@
 // Base settings for all themes that can optionally be
 // overridden by the super-theme
 
+@use 'sass:color';
+@use 'sass:meta';
+
 // Background of the presentation
-$backgroundColor: #2b2b2b;
+$background: #2b2b2b !default;
+$background-color: #bbb !default;
 
 // Primary/body text
-$mainFont: 'Lato', sans-serif;
-$mainFontSize: 40px;
-$mainColor: #eee;
+$main-font: 'Lato', sans-serif !default;
+$main-font-size: 40px !default;
+$main-color: #eee !default;
 
 // Vertical spacing between blocks of text
-$blockMargin: 20px;
+$block-margin: 20px !default;
 
 // Headings
-$headingMargin: 0 0 $blockMargin 0;
-$headingFont: 'League Gothic', Impact, sans-serif;
-$headingColor: #eee;
-$headingLineHeight: 1.2;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingTextShadow: none;
-$headingFontWeight: normal;
-$heading1TextShadow: $headingTextShadow;
+$heading-margin: 0 0 20px 0 !default;
+$heading-font: 'League Gothic', Impact, sans-serif !default;
+$heading-color: #eee !default;
+$heading-line-height: 1.2 !default;
+$heading-letter-spacing: normal !default;
+$heading-text-transform: uppercase !default;
+$heading-text-shadow: none !default;
+$heading-font-weight: normal !default;
+$heading1-text-shadow: none !default;
 
-$heading1Size: 3.77em;
-$heading2Size: 2.11em;
-$heading3Size: 1.55em;
-$heading4Size: 1.00em;
+$heading1-size: 3.77em !default;
+$heading2-size: 2.11em !default;
+$heading3-size: 1.55em !default;
+$heading4-size: 1em !default;
 
-$codeFont: monospace;
+$code-font: monospace !default;
 
 // Links and actions
-$linkColor: #13DAEC;
-$linkColorHover: lighten( $linkColor, 20% );
+$link-color: #13daec !default;
+$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
+$link-color-hover: color.scale($link-color, $lightness: 20%) !default;
 
 // Text selection
-$selectionBackgroundColor: #FF5E99;
-$selectionColor: #fff;
+$selection-background-color: #0fadbb !default;
+$selection-color: #fff !default;
 
-// Generates the presentation background, can be overridden
-// to return a background image or gradient
-@mixin bodyBackground() {
-	background: $backgroundColor;
+// Colors used for UI elements that are overlaid on top of
+// the presentation
+$overlay-element-bg-color: 240, 240, 240 !default;
+$overlay-element-fg-color: 0, 0, 0 !default;
+
+// Expose all SCSS variables as CSS custom properties
+:root {
+	// Background of the presentation
+	--r-background: #{$background};
+	--r-background-color: #{$background-color};
+
+	// Primary/body text
+	--r-main-font: #{$main-font};
+	--r-main-font-size: #{$main-font-size};
+	--r-main-color: #{$main-color};
+
+	// Vertical spacing between blocks of text
+	--r-block-margin: #{$block-margin};
+
+	// Headings
+	--r-heading-margin: #{$heading-margin};
+	--r-heading-font: #{$heading-font};
+	--r-heading-color: #{$heading-color};
+	--r-heading-line-height: #{$heading-line-height};
+	--r-heading-letter-spacing: #{$heading-letter-spacing};
+	--r-heading-text-transform: #{$heading-text-transform};
+	--r-heading-text-shadow: #{$heading-text-shadow};
+	--r-heading-font-weight: #{$heading-font-weight};
+	--r-heading1-text-shadow: #{$heading1-text-shadow};
+
+	--r-heading1-size: #{$heading1-size};
+	--r-heading2-size: #{$heading2-size};
+	--r-heading3-size: #{$heading3-size};
+	--r-heading4-size: #{$heading4-size};
+
+	--r-code-font: #{$code-font};
+
+	// Links and actions
+	--r-link-color: #{$link-color};
+	--r-link-color-dark: #{$link-color-dark};
+	--r-link-color-hover: #{$link-color-hover};
+
+	// Text selection
+	--r-selection-background-color: #{$selection-background-color};
+	--r-selection-color: #{$selection-color};
+
+	// Colors used for UI elements that are overlaid on top of
+	// the presentation
+	--r-overlay-element-bg-color: #{$overlay-element-bg-color};
+	--r-overlay-element-fg-color: #{$overlay-element-fg-color};
 }

css/theme/template/theme.scss

@@ -4,32 +4,32 @@
  * GLOBAL STYLES
  *********************************************/
 
-body {
-	@include bodyBackground();
-	background-color: $backgroundColor;
+.reveal-viewport {
+	background: var(--r-background);
+	background-color: var(--r-background-color);
 }
 
 .reveal {
-	font-family: $mainFont;
-	font-size: $mainFontSize;
+	font-family: var(--r-main-font);
+	font-size: var(--r-main-font-size);
 	font-weight: normal;
-	color: $mainColor;
+	color: var(--r-main-color);
 }
 
-::selection {
-	color: $selectionColor;
-	background: $selectionBackgroundColor;
+.reveal ::selection {
+	color: var(--r-selection-color);
+	background: var(--r-selection-background-color);
 	text-shadow: none;
 }
 
-::-moz-selection {
-	color: $selectionColor;
-	background: $selectionBackgroundColor;
+.reveal ::-moz-selection {
+	color: var(--r-selection-color);
+	background: var(--r-selection-background-color);
 	text-shadow: none;
 }
 
 .reveal .slides section,
-.reveal .slides section>section {
+.reveal .slides section > section {
 	line-height: 1.3;
 	font-weight: inherit;
 }
@@ -44,39 +44,56 @@ body {
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-	margin: $headingMargin;
-	color: $headingColor;
+	margin: var(--r-heading-margin);
+	color: var(--r-heading-color);
 
-	font-family: $headingFont;
-	font-weight: $headingFontWeight;
-	line-height: $headingLineHeight;
-	letter-spacing: $headingLetterSpacing;
+	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: $headingTextTransform;
-	text-shadow: $headingTextShadow;
+	text-transform: var(--r-heading-text-transform);
+	text-shadow: var(--r-heading-text-shadow);
 
 	word-wrap: break-word;
 }
 
-.reveal h1 {font-size: $heading1Size; }
-.reveal h2 {font-size: $heading2Size; }
-.reveal h3 {font-size: $heading3Size; }
-.reveal h4 {font-size: $heading4Size; }
-
 .reveal h1 {
-	text-shadow: $heading1TextShadow;
+	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: $blockMargin 0;
+	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,
@@ -138,17 +155,17 @@ body {
 	display: block;
 	position: relative;
 	width: 70%;
-	margin: $blockMargin auto;
+	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);
+	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 blockquote p:first-child,
-	.reveal blockquote p:last-child {
-		display: inline-block;
-	}
 
 .reveal q {
 	font-style: italic;
@@ -158,11 +175,11 @@ body {
 	display: block;
 	position: relative;
 	width: 90%;
-	margin: $blockMargin auto;
+	margin: var(--r-block-margin) auto;
 
 	text-align: left;
 	font-size: 0.55em;
-	font-family: $codeFont;
+	font-family: var(--r-code-font);
 	line-height: 1.2em;
 
 	word-wrap: break-word;
@@ -171,8 +188,9 @@ body {
 }
 
 .reveal code {
-	font-family: $codeFont;
+	font-family: var(--r-code-font);
 	text-transform: none;
+	tab-size: 2;
 }
 
 .reveal pre code {
@@ -183,6 +201,14 @@ body {
 	word-wrap: normal;
 }
 
+.reveal .code-wrapper {
+	white-space: normal;
+}
+
+.reveal .code-wrapper code {
+	white-space: pre;
+}
+
 .reveal table {
 	margin: auto;
 	border-collapse: collapse;
@@ -200,13 +226,13 @@ body {
 	border-bottom: 1px solid;
 }
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
+.reveal table th[align='center'],
+.reveal table td[align='center'] {
 	text-align: center;
 }
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
+.reveal table th[align='right'],
+.reveal table td[align='right'] {
 	text-align: right;
 }
 
@@ -235,91 +261,71 @@ body {
 	vertical-align: top;
 }
 
+.reveal img {
+	margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 
 .reveal a {
-	color: $linkColor;
+	color: var(--r-link-color);
 	text-decoration: none;
-
-	-webkit-transition: color .15s ease;
-	   -moz-transition: color .15s ease;
-	        transition: color .15s ease;
+	transition: color 0.15s ease;
+}
+.reveal a:hover {
+	color: var(--r-link-color-hover);
+	text-shadow: none;
+	border: none;
 }
-	.reveal a:hover {
-		color: $linkColorHover;
-
-		text-shadow: none;
-		border: none;
-	}
 
 .reveal .roll span:after {
 	color: #fff;
-	background: darken( $linkColor, 15% );
+	// background: darken( var(--r-link-color), 15% );
+	background: var(--r-link-color-dark);
 }
 
-
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
 
-.reveal section img {
-	margin: 15px 0px;
-	background: rgba(255,255,255,0.12);
-	border: 4px solid $mainColor;
-
+.reveal .r-frame {
+	border: 4px solid var(--r-main-color);
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
-	.reveal section img.plain {
-		border: 0;
-		box-shadow: none;
-	}
-
-	.reveal a img {
-		-webkit-transition: all .15s linear;
-		   -moz-transition: all .15s linear;
-		        transition: all .15s linear;
-	}
-
-	.reveal a:hover img {
-		background: rgba(255,255,255,0.2);
-		border-color: $linkColor;
-
-		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-	}
+.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: $linkColor;
+	color: var(--r-link-color);
 }
 
-
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 
 .reveal .progress {
-	background: rgba(0,0,0,0.2);
-	color: $linkColor;
+	background: rgba(0, 0, 0, 0.2);
+	color: var(--r-link-color);
 }
-	.reveal .progress span {
-		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-			transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
- @media print {
-    .backgrounds {
-        background-color: $backgroundColor;
-    }
+@media print {
+	.backgrounds {
+		background-color: var(--r-background-color);
+	}
 }

css/theme/white-contrast.scss

@@ -0,0 +1,49 @@
+/**
+ * White compact & high contrast reveal.js theme, with headers not in capitals.
+ *
+ * By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
+ *
+ * - Keep the source similar to black.css - for easy comparison.
+ * - $mainFontSize controls code blocks, too (although under some ratio).
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #2a76dd;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #fff,
+
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$main-font-size: 42px,
+	$main-color: #000,
+
+	$heading-color: #000,
+	$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: 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-fg-color: '240, 240, 240'
+);
+
+// Inject the theme template
+@use 'template/theme';
+
+// Include theme-specific fonts
+@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.css

@@ -1,273 +0,0 @@
-/**
- * White theme for reveal.js. This is the opposite of the 'black' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
-@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
-section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff; }
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: #fff;
-  background-color: #fff; }
-
-.reveal {
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-size: 42px;
-  font-weight: normal;
-  color: #222; }
-
-::selection {
-  color: #fff;
-  background: #98bdef;
-  text-shadow: none; }
-
-::-moz-selection {
-  color: #fff;
-  background: #98bdef;
-  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: 0 0 20px 0;
-  color: #222;
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 2.5em; }
-
-.reveal h2 {
-  font-size: 1.6em; }
-
-.reveal h3 {
-  font-size: 1.3em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
-
-/* 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: 20px 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: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
-
-.reveal code {
-  font-family: monospace;
-  text-transform: none; }
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
-
-.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; }
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #2a76dd;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #6ca0e8;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: #fff;
-  background: #1a53a1; }
-
-/*********************************************
- * IMAGES
- *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
-  border: 4px solid #222;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
-
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
-
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: #2a76dd;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: #2a76dd; }
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: #2a76dd; }
-
-.reveal .progress span {
-  -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); }
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: #fff; } }

css/theme/white.scss

@@ -0,0 +1,46 @@
+/**
+ * White theme for reveal.js. This is the opposite of the 'black' theme.
+ *
+ * By Hakim El Hattab, http://hakim.se
+ */
+
+// Load utils
+@use 'sass:color';
+@use 'template/mixins' as mixins;
+
+$active-color: #2a76dd;
+
+// Inject theme variables (with some overrides)
+@use 'template/settings' with (
+	$background-color: #fff,
+
+	$main-color: #222,
+	$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-weight: 600,
+
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$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-fg-color: '240 240 240'
+);
+
+// Inject the theme template
+@use 'template/theme';
+
+// Include theme-specific fonts
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
+
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);

demo.html

@@ -1,58 +1,58 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
 	<head>
-		<meta charset="utf-8">
+		<meta charset="utf-8" />
 
 		<title>reveal.js – The HTML Presentation Framework</title>
 
-		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
-		<meta name="author" content="Hakim El Hattab">
+		<meta
+			name="description"
+			content="A framework for easily creating beautiful presentations using HTML"
+		/>
+		<meta name="author" content="Hakim El Hattab" />
 
-		<meta name="apple-mobile-web-app-capable" content="yes">
-		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="mobile-web-app-status-bar-style" content="black-translucent" />
 
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-		<link rel="stylesheet" href="css/reset.css">
-		<link rel="stylesheet" href="css/reveal.css">
-		<link rel="stylesheet" href="css/theme/black.css" id="theme">
+		<link rel="stylesheet" href="css/reset.css" />
+		<link rel="stylesheet" href="css/reveal.scss" />
+		<link rel="stylesheet" href="css/theme/black.scss" id="theme" />
 
 		<!-- Theme used for syntax highlighting of code -->
-		<link rel="stylesheet" href="lib/css/monokai.css">
-
-		<!-- Printing and PDF exports -->
-		<script>
-			var link = document.createElement( 'link' );
-			link.rel = 'stylesheet';
-			link.type = 'text/css';
-			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
-			document.getElementsByTagName( 'head' )[0].appendChild( link );
-		</script>
-
-		<!--[if lt IE 9]>
-		<script src="lib/js/html5shiv.js"></script>
-		<![endif]-->
+		<link rel="stylesheet" href="plugin/highlight/monokai.css" />
 	</head>
 
 	<body>
-
 		<div class="reveal">
-
 			<!-- Any section element inside of this container is displayed as a slide -->
 			<div class="slides">
 				<section>
-					<h1>Reveal.js</h1>
+					<a href="https://revealjs.com">
+						<img
+							src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg"
+							alt="reveal.js logo"
+							style="height: 180px; margin: 0 auto 4rem auto; background: transparent"
+							class="demo-logo"
+						/>
+					</a>
 					<h3>The HTML Presentation Framework</h3>
 					<p>
-						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
+						<small
+							>Created by <a href="http://hakim.se">Hakim El Hattab</a> and
+							<a href="https://github.com/hakimel/reveal.js/graphs/contributors"
+								>contributors</a
+							></small
+						>
 					</p>
 				</section>
 
 				<section>
 					<h2>Hello There</h2>
 					<p>
-						reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
+						reveal.js enables you to create beautiful interactive slide decks using HTML. This
+						presentation will show you examples of what it can do.
 					</p>
 				</section>
 
@@ -62,21 +62,38 @@
 						<h2>Vertical Slides</h2>
 						<p>Slides can be nested inside of each other.</p>
 						<p>Use the <em>Space</em> key to navigate through all slides.</p>
-						<br>
-						<a href="#" class="navigate-down">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+						<br />
+						<a href="#/2/1" class="navigate-down">
+							<img
+								class="r-frame"
+								style="background: rgba(255, 255, 255, 0.1)"
+								width="178"
+								height="238"
+								data-src="https://static.slid.es/reveal/arrow.png"
+								alt="Down arrow"
+							/>
 						</a>
 					</section>
 					<section>
 						<h2>Basement Level 1</h2>
-						<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
+						<p>
+							Nested slides are useful for adding additional detail underneath a high level
+							horizontal slide.
+						</p>
 					</section>
 					<section>
 						<h2>Basement Level 2</h2>
 						<p>That's it, time to go back up.</p>
-						<br>
+						<br />
 						<a href="#/2">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
+							<img
+								class="r-frame"
+								style="background: rgba(255, 255, 255, 0.1); transform: rotate(180deg)"
+								width="178"
+								height="238"
+								data-src="https://static.slid.es/reveal/arrow.png"
+								alt="Up arrow"
+							/>
 						</a>
 					</section>
 				</section>
@@ -84,54 +101,204 @@
 				<section>
 					<h2>Slides</h2>
 					<p>
-						Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
+						Not a coder? Not a problem. There's a fully-featured visual editor for authoring these,
+						try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
 					</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 javascript" data-trim data-line-numbers>
+						import { useState } from 'react';
+
+						function Example() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+
+							  ...
+
+						  );
+						}
+					</code></pre>
+					<p>
+						Code syntax highlighting courtesy of
+						<a href="https://highlightjs.org/usage/">highlight.js</a>.
+					</p>
+				</section>
+
+				<section data-auto-animate>
+					<h2 data-id="code-title">With Animations</h2>
+					<pre
+						data-id="code-animation"
+					><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
+						import { useState } from 'react';
+
+						function Example() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+						    <div>
+						      <p>You clicked {count} times</p>
+						      <button onClick={() => setCount(count + 1)}>
+						        Click me
+						      </button>
+						    </div>
+						  );
+						}
+
+						function SecondExample() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+						    <div>
+						      <p>You clicked {count} times</p>
+						      <button onClick={() => setCount(count + 1)}>
+						        Click me
+						      </button>
+						    </div>
+						  );
+						}
+					</script></code></pre>
+				</section>
+
 				<section>
 					<h2>Point of View</h2>
+					<p>Press <strong>ESC</strong> to enter the slide overview.</p>
 					<p>
-						Press <strong>ESC</strong> to enter the slide overview.
+						Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any
+						element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>.
+						Click again to zoom back out.
 					</p>
+					<p>(NOTE: Use ctrl + click in Linux.)</p>
+				</section>
+
+				<section
+					data-auto-animate
+					data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
+				>
+					<h2>Auto-Animate</h2>
 					<p>
-						Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
-					</p>
-					<p>
-						(NOTE: Use ctrl + click in Linux.)
+						Automatically animate matching elements across slides with
+						<a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.
 					</p>
+					<div class="r-hstack justify-center">
+						<div
+							data-id="box1"
+							style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
+						></div>
+						<div
+							data-id="box2"
+							style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
+						></div>
+						<div
+							data-id="box3"
+							style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
+						></div>
+					</div>
+				</section>
+				<section
+					data-auto-animate
+					data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
+				>
+					<div class="r-hstack justify-center">
+						<div
+							data-id="box1"
+							data-auto-animate-delay="0"
+							style="background: cyan; width: 150px; height: 100px; margin: 10px"
+						></div>
+						<div
+							data-id="box2"
+							data-auto-animate-delay="0.1"
+							style="background: magenta; width: 150px; height: 100px; margin: 10px"
+						></div>
+						<div
+							data-id="box3"
+							data-auto-animate-delay="0.2"
+							style="background: yellow; width: 150px; height: 100px; margin: 10px"
+						></div>
+					</div>
+					<h2 style="margin-top: 20px">Auto-Animate</h2>
+				</section>
+				<section
+					data-auto-animate
+					data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
+				>
+					<div class="r-stack">
+						<div data-id="box1" style="background: cyan; width: 300px; height: 300px"></div>
+						<div data-id="box2" style="background: magenta; width: 200px; height: 200px"></div>
+						<div data-id="box3" style="background: yellow; width: 100px; height: 100px"></div>
+					</div>
+					<h2 style="margin-top: 20px">Auto-Animate</h2>
 				</section>
 
 				<section>
 					<h2>Touch Optimized</h2>
 					<p>
-						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
+						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe
+						through your slides.
 					</p>
 				</section>
 
 				<section data-markdown>
 					<script type="text/template">
-						## Markdown support
+						## Markdown Support
 
 						Write content using inline or external Markdown.
-						Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
+						Instructions and more info available in the [docs](https://revealjs.com/markdown/).
 
-						```
+						```html []
 						<section data-markdown>
-						  ## Markdown support
+						  ## Markdown Support
 
 						  Write content using inline or external Markdown.
-						  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
+						  Instructions and more info available in the [docs](https://revealjs.com/markdown/).
 						</section>
 						```
 					</script>
 				</section>
 
+				<section>
+					<h2>Lightbox</h2>
+					Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
+					<div class="r-hstack" style="gap: 2rem;">
+						<div>
+							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
+								&lt;img src="image.png" data-preview-image="image.png"&gt;
+							</code></pre>
+							<img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
+						</div>
+						<div>
+							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
+								&lt;img src="video.png" data-preview-video="video.mp4"&gt;
+							</code></pre>
+							<img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
+						</div>
+					</div>
+				</section>
+
+				<section>
+					<p>Add the <code>r-fit-text</code> class to auto-size text</p>
+					<h2 class="r-fit-text">FIT TEXT</h2>
+				</section>
+
 				<section>
 					<section id="fragments">
 						<h2>Fragments</h2>
 						<p>Hit the next arrow...</p>
 						<p class="fragment">... to step through ...</p>
-						<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
+						<p>
+							<span class="fragment">... a</span> <span class="fragment">fragmented</span>
+							<span class="fragment">slide.</span>
+						</p>
 
 						<aside class="notes">
 							This slide has fragments which are also stepped through in the notes window.
@@ -144,21 +311,25 @@
 						<p class="fragment shrink">shrink</p>
 						<p class="fragment fade-out">fade-out</p>
 						<p>
-							<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
-							<span style="display: inline-block;" class="fragment fade-up">up, </span>
-							<span style="display: inline-block;" class="fragment fade-down">down, </span>
-							<span style="display: inline-block;" class="fragment fade-left">left</span>
+							<span style="display: inline-block" class="fragment fade-right">fade-right, </span>
+							<span style="display: inline-block" class="fragment fade-up">up, </span>
+							<span style="display: inline-block" class="fragment fade-down">down, </span>
+							<span style="display: inline-block" class="fragment fade-left">left</span>
 						</p>
 						<p class="fragment fade-in-then-out">fade-in-then-out</p>
 						<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
-						<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
+						<p>
+							Highlight <span class="fragment highlight-red">red</span>
+							<span class="fragment highlight-blue">blue</span>
+							<span class="fragment highlight-green">green</span>
+						</p>
 					</section>
 				</section>
 
 				<section id="transitions">
 					<h2>Transition Styles</h2>
 					<p>
-						You can select from different transitions, like: <br>
+						You can select from different transitions, like: <br />
 						<a href="?transition=none#/transitions">None</a> -
 						<a href="?transition=fade#/transitions">Fade</a> -
 						<a href="?transition=slide#/transitions">Slide</a> -
@@ -171,19 +342,73 @@
 				<section id="themes">
 					<h2>Themes</h2>
 					<p>
-						reveal.js comes with a few themes built in: <br>
+						reveal.js comes with a few themes built in: <br />
 						<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;"
+							>Black (default)</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;"
+							>White</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;"
+							>League</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;"
+							>Sky</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;"
+							>Beige</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;"
+							>Simple</a
+						>
+						<br />
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;"
+							>Serif</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;"
+							>Blood</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;"
+							>Night</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;"
+							>Moon</a
+						>
+						-
+						<a
+							href="#/themes"
+							onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;"
+							>Solarized</a
+						>
 					</p>
 				</section>
 
@@ -191,22 +416,42 @@
 					<section data-background="#dddddd">
 						<h2>Slide Backgrounds</h2>
 						<p>
-							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
+							Set <code>data-background="#dddddd"</code> on a slide to change the background color.
+							All CSS color formats are supported.
 						</p>
 						<a href="#" class="navigate-down">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img
+								class="r-frame"
+								style="background: rgba(255, 255, 255, 0.1)"
+								width="178"
+								height="238"
+								data-src="https://static.slid.es/reveal/arrow.png"
+								alt="Down arrow"
+							/>
 						</a>
 					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
+					<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
+						<h2>Gradient Backgrounds</h2>
+						<pre><code class="hljs html wrap">&lt;section data-background-gradient=
+							"linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
+					</section>
+					<section data-background="https://static.slid.es/reveal/image-placeholder.png">
 						<h2>Image Backgrounds</h2>
 						<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
 					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
+					<section
+						data-background="https://static.slid.es/reveal/image-placeholder.png"
+						data-background-repeat="repeat"
+						data-background-size="100px"
+					>
 						<h2>Tiled Backgrounds</h2>
 						<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
 					</section>
-					<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
-						<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
+					<section
+						data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
+						data-background-color="#000000"
+					>
+						<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px">
 							<h2>Video Backgrounds</h2>
 							<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
 						</div>
@@ -216,50 +461,51 @@
 					</section>
 				</section>
 
-				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
+				<section
+					data-transition="slide"
+					data-background="#4d7e65"
+					data-background-transition="zoom"
+				>
 					<h2>Background Transitions</h2>
 					<p>
-						Different background transitions are available via the backgroundTransition option. This one's called "zoom".
+						Different background transitions are available via the backgroundTransition option. This
+						one's called "zoom".
 					</p>
 					<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
 				</section>
 
-				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
+				<section
+					data-transition="slide"
+					data-background="#b5533c"
+					data-background-transition="zoom"
+				>
 					<h2>Background Transitions</h2>
-					<p>
-						You can override background transitions per-slide.
-					</p>
+					<p>You can override background transitions per-slide.</p>
 					<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
 				</section>
 
 				<section data-background-iframe="https://hakim.se" data-background-interactive>
-					<div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
+					<div
+						style="
+							position: absolute;
+							width: 40%;
+							right: 0;
+							box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 5px 25px rgba(0, 0, 0, 0.2);
+							background-color: rgba(0, 0, 0, 0.9);
+							color: #fff;
+							padding: 20px;
+							font-size: 20px;
+							text-align: left;
+						"
+					>
 						<h2>Iframe Backgrounds</h2>
-						<p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
+						<p>
+							Since reveal.js runs on the web, you can easily embed other web content. Try
+							interacting with the page in the background.
+						</p>
 					</div>
 				</section>
 
-				<section>
-					<h2>Pretty Code</h2>
-					<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
-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;
-        Click me
-      &lt;/button&gt;
-    &lt;/div&gt;
-  );
-}
-					</code></pre>
-					<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
-				</section>
-
 				<section>
 					<h2>Marvelous List</h2>
 					<ul>
@@ -312,11 +558,19 @@ function Example() {
 				<section>
 					<h2>Clever Quotes</h2>
 					<p>
-						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
+						These guys come in two forms, inline:
+						<q
+							cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
+							>The nice thing about standards is that there are so many to choose from</q
+						>
+						and block:
 					</p>
-					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-						&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
-						reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
+					<blockquote
+						cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
+					>
+						&ldquo;For years there has been a theory that millions of monkeys typing at random on
+						millions of typewriters would reproduce the entire works of Shakespeare. The Internet
+						has proven this theory to be untrue.&rdquo;
 					</blockquote>
 				</section>
 
@@ -330,18 +584,36 @@ function Example() {
 
 				<section>
 					<h2>Speaker View</h2>
-					<p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
+					<p>
+						There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a
+						timer, preview of the upcoming slide as well as your speaker notes.
+					</p>
 					<p>Press the <em>S</em> key to try it out.</p>
 
 					<aside class="notes">
-						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
+						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see
+						them if you open the speaker notes window (hit 's' on your keyboard).
 					</aside>
 				</section>
 
 				<section>
 					<h2>Export to PDF</h2>
-					<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
-					<iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
+					<p>
+						Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>,
+						here's an example:
+					</p>
+					<iframe
+						data-src="https://www.slideshare.net/slideshow/embed_code/42840540"
+						width="445"
+						height="355"
+						frameborder="0"
+						marginwidth="0"
+						marginheight="0"
+						scrolling="no"
+						style="border: 3px solid #666; margin-bottom: 5px; max-width: 100%"
+						allowfullscreen
+					>
+					</iframe>
 				</section>
 
 				<section>
@@ -356,10 +628,11 @@ function Example() {
 				<section data-state="customevent">
 					<h2>State Events</h2>
 					<p>
-						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
+						Additionally custom events can be triggered on a per slide basis by binding to the
+						<code>data-state</code> name.
 					</p>
 					<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
-Reveal.addEventListener( 'customevent', function() {
+Reveal.on( 'customevent', function() {
 	console.log( '"customevent" has fired' );
 } );
 					</code></pre>
@@ -368,7 +641,8 @@ Reveal.addEventListener( 'customevent', function() {
 				<section>
 					<h2>Take a Moment</h2>
 					<p>
-						Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
+						Press B or . on your keyboard to pause the presentation. This is helpful when you're on
+						stage and want to take distracting slides off the screen.
 					</p>
 				</section>
 
@@ -376,50 +650,56 @@ Reveal.addEventListener( 'customevent', function() {
 					<h2>Much more</h2>
 					<ul>
 						<li>Right-to-left support</li>
-						<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
-						<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
-						<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
-						<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
+						<li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
+						<li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
+						<li>
+							<a href="https://revealjs.com/backgrounds/#parallax-background"
+								>Parallax backgrounds</a
+							>
+						</li>
+						<li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
 					</ul>
 				</section>
 
-				<section style="text-align: left;">
+				<section style="text-align: left">
 					<h1>THE END</h1>
 					<p>
-						- <a href="https://slides.com">Try the online editor</a> <br>
+						- <a href="https://slides.com">Try the online editor</a> <br />
 						- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
 					</p>
 				</section>
-
 			</div>
-
 		</div>
 
-		<script src="js/reveal.js"></script>
+		<!-- Use the built assets if you want to run reveal.js without a web server -->
+		<!--
+		<script src="dist/reveal.js"></script>
+		<script src="dist/plugin/zoom.js"></script>
+		<script src="dist/plugin/notes.js"></script>
+		<script src="dist/plugin/search.js"></script>
+		<script src="dist/plugin/markdown.js"></script>
+		<script src="dist/plugin/highlight.js"></script>
+		-->
 
-		<script>
+		<script type="module">
+			import Reveal from 'reveal.js';
+			import RevealZoom from 'reveal.js/plugin/zoom';
+			import RevealNotes from 'reveal.js/plugin/notes';
+			import RevealSearch from 'reveal.js/plugin/search';
+			import RevealMarkdown from 'reveal.js/plugin/markdown';
+			import RevealHighlight from 'reveal.js/plugin/highlight';
 
-			// More info https://github.com/hakimel/reveal.js#configuration
+			// Also available as an ES module, see:
+			// https://revealjs.com/initialization/
 			Reveal.initialize({
 				controls: true,
 				progress: true,
 				center: true,
 				hash: true,
 
-				transition: 'slide', // none/fade/slide/convex/concave/zoom
-
-				// More info https://github.com/hakimel/reveal.js#dependencies
-				dependencies: [
-					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/highlight/highlight.js' },
-					{ src: 'plugin/search/search.js', async: true },
-					{ src: 'plugin/zoom-js/zoom.js', async: true },
-					{ src: 'plugin/notes/notes.js', async: true }
-				]
+				// Learn about plugins: https://revealjs.com/plugins/
+				plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight],
 			});
-
 		</script>
-
 	</body>
 </html>

dist/plugin/highlight/zenburn.css

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

dist/plugin/math.js

@@ -0,0 +1,4 @@
+(function(d,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(d=typeof globalThis<"u"?globalThis:d||self,d.RevealMath=r())})(this,function(){"use strict";const d=()=>{let n,s={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre","code"]};const c=t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)},o=t=>new Promise((e,i)=>{const l=document.createElement("script");l.type="text/javascript",l.onload=e,l.onerror=i,l.src=t,document.head.append(l)});async function a(t){for(const e of t)await o(e)}return{id:"katex",init:function(t){n=t;let e=n.getConfig().katex||{},i={...s,...e};const{local:l,version:x,extensions:S,...g}=i;let p=i.local||"https://cdn.jsdelivr.net/npm/katex",u=i.local?"":"@"+i.version,j=p+u+"/dist/katex.min.css",M=p+u+"/dist/katex.min.js",v=p+u+"/dist/contrib/mhchem.min.js",J=p+u+"/dist/contrib/auto-render.min.js",h=[M];i.extensions&&i.extensions.includes("mhchem")&&h.push(v),h.push(J);const f=()=>{renderMathInElement(t.getSlidesElement(),g),n.layout()};c(j),a(h).then(()=>{n.isReady()?f():n.on("ready",f.bind(this))})}}},r=()=>{let n,s={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre","code"]},skipStartupTypeset:!0};function c(o,a){let t=document.querySelector("head"),e=document.createElement("script");e.type="text/javascript",e.src=o;let i=()=>{typeof a=="function"&&(a.call(),a=null)};e.onload=i,e.onreadystatechange=()=>{this.readyState==="loaded"&&i()},t.appendChild(e)}return{id:"mathjax2",init:function(o){n=o;let a=n.getConfig().mathjax2||n.getConfig().math||{},t={...s,...a},e=t.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js",i=t.config||"TeX-AMS_HTML-full",l=e+"?config="+i;t.tex2jax={...s.tex2jax,...a.tex2jax},t.mathjax=t.config=null,c(l,function(){MathJax.Hub.Config(t),MathJax.Hub.Queue(["Typeset",MathJax.Hub,n.getRevealElement()]),MathJax.Hub.Queue(n.layout),n.on("slidechanged",function(x){MathJax.Hub.Queue(["Typeset",MathJax.Hub,x.currentSlide])})})}}},m=()=>{let n,s={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre","code"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then(()=>{n.layout()})}}};function c(o,a){let t=document.createElement("script");t.type="text/javascript",t.id="MathJax-script",t.src=o,t.async=!0,t.onload=()=>{typeof a=="function"&&(a.call(),a=null)},document.head.appendChild(t)}return{id:"mathjax3",init:function(o){n=o;let a=n.getConfig().mathjax3||{},t={...s,...a};t.tex={...s.tex,...a.tex},t.options={...s.options,...a.options},t.startup={...s.startup,...a.startup};let e=t.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";t.mathjax=null,window.MathJax=t,c(e,function(){n.addEventListener("slidechanged",function(i){MathJax.typeset()})})}}},y=r;/*!
+ * This plugin is a wrapper for the MathJax2,
+ * MathJax3 and KaTeX typesetter plugins.
+ */return Plugin=Object.assign(y(),{KaTeX:d,MathJax2:r,MathJax3:m})});

dist/plugin/math.mjs

@@ -0,0 +1,119 @@
+const M = () => {
+  let n, s = {
+    version: "latest",
+    delimiters: [
+      { left: "$$", right: "$$", display: !0 },
+      // Note: $$ has to come before $
+      { left: "$", right: "$", display: !1 },
+      { left: "\\(", right: "\\)", display: !1 },
+      { left: "\\[", right: "\\]", display: !0 }
+    ],
+    ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"]
+  };
+  const r = (t) => {
+    let e = document.createElement("link");
+    e.rel = "stylesheet", e.href = t, document.head.appendChild(e);
+  }, l = (t) => new Promise((e, i) => {
+    const o = document.createElement("script");
+    o.type = "text/javascript", o.onload = e, o.onerror = i, o.src = t, document.head.append(o);
+  });
+  async function a(t) {
+    for (const e of t)
+      await l(e);
+  }
+  return {
+    id: "katex",
+    init: function(t) {
+      n = t;
+      let e = n.getConfig().katex || {}, i = { ...s, ...e };
+      const { local: o, version: u, extensions: k, ...m } = i;
+      let c = i.local || "https://cdn.jsdelivr.net/npm/katex", d = i.local ? "" : "@" + i.version, f = c + d + "/dist/katex.min.css", y = c + d + "/dist/katex.min.js", g = c + d + "/dist/contrib/mhchem.min.js", j = c + d + "/dist/contrib/auto-render.min.js", p = [y];
+      i.extensions && i.extensions.includes("mhchem") && p.push(g), p.push(j);
+      const h = () => {
+        renderMathInElement(t.getSlidesElement(), m), n.layout();
+      };
+      r(f), a(p).then(() => {
+        n.isReady() ? h() : n.on("ready", h.bind(this));
+      });
+    }
+  };
+}, x = () => {
+  let n, s = {
+    messageStyle: "none",
+    tex2jax: {
+      inlineMath: [["$", "$"], ["\\(", "\\)"]],
+      skipTags: ["script", "noscript", "style", "textarea", "pre", "code"]
+    },
+    skipStartupTypeset: !0
+  };
+  function r(l, a) {
+    let t = document.querySelector("head"), e = document.createElement("script");
+    e.type = "text/javascript", e.src = l;
+    let i = () => {
+      typeof a == "function" && (a.call(), a = null);
+    };
+    e.onload = i, e.onreadystatechange = () => {
+      this.readyState === "loaded" && i();
+    }, t.appendChild(e);
+  }
+  return {
+    id: "mathjax2",
+    init: function(l) {
+      n = l;
+      let a = n.getConfig().mathjax2 || n.getConfig().math || {}, t = { ...s, ...a }, e = t.mathjax || "https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js", i = t.config || "TeX-AMS_HTML-full", o = e + "?config=" + i;
+      t.tex2jax = { ...s.tex2jax, ...a.tex2jax }, t.mathjax = t.config = null, r(o, function() {
+        MathJax.Hub.Config(t), MathJax.Hub.Queue(["Typeset", MathJax.Hub, n.getRevealElement()]), MathJax.Hub.Queue(n.layout), n.on("slidechanged", function(u) {
+          MathJax.Hub.Queue(["Typeset", MathJax.Hub, u.currentSlide]);
+        });
+      });
+    }
+  };
+}, v = () => {
+  let n, s = {
+    tex: {
+      inlineMath: [["$", "$"], ["\\(", "\\)"]]
+    },
+    options: {
+      skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code"]
+    },
+    startup: {
+      ready: () => {
+        MathJax.startup.defaultReady(), MathJax.startup.promise.then(() => {
+          n.layout();
+        });
+      }
+    }
+  };
+  function r(l, a) {
+    let t = document.createElement("script");
+    t.type = "text/javascript", t.id = "MathJax-script", t.src = l, t.async = !0, t.onload = () => {
+      typeof a == "function" && (a.call(), a = null);
+    }, document.head.appendChild(t);
+  }
+  return {
+    id: "mathjax3",
+    init: function(l) {
+      n = l;
+      let a = n.getConfig().mathjax3 || {}, t = { ...s, ...a };
+      t.tex = { ...s.tex, ...a.tex }, t.options = { ...s.options, ...a.options }, t.startup = { ...s.startup, ...a.startup };
+      let e = t.mathjax || "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
+      t.mathjax = null, window.MathJax = t, r(e, function() {
+        n.addEventListener("slidechanged", function(i) {
+          MathJax.typeset();
+        });
+      });
+    }
+  };
+}, J = x;
+/*!
+ * This plugin is a wrapper for the MathJax2,
+ * MathJax3 and KaTeX typesetter plugins.
+ */
+const S = Plugin = Object.assign(J(), {
+  KaTeX: M,
+  MathJax2: x,
+  MathJax3: v
+});
+export {
+  S as default
+};

dist/plugin/search.js

@@ -0,0 +1,7 @@
+(function(p,n){typeof exports=="object"&&typeof module<"u"?module.exports=n():typeof define=="function"&&define.amd?define(n):(p=typeof globalThis<"u"?globalThis:p||self,p.RevealSearch=n())})(this,function(){"use strict";/*!
+ * Handles finding a text string anywhere in the slides and showing the next occurrence to the user
+ * by navigatating to that slide and highlighting it.
+ *
+ * @author Jon Snyder <snyder.jon@gmail.com>, February 2013
+ */return()=>{let n,t,i,o,a,g,f;function v(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML=`<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>
+		</span>`,i=t.querySelector(".searchinput"),i.style.width="240px",i.style.fontSize="14px",i.style.padding="4px 6px",i.style.color="#000",i.style.background="#fff",i.style.borderRadius="2px",i.style.border="0",i.style.outline="0",i.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",i.style["-webkit-appearance"]="none",n.getRevealElement().appendChild(t),i.addEventListener("keyup",function(r){switch(r.keyCode){case 13:r.preventDefault(),k(),g=!1;break;default:g=!0}},!1),x()}function C(){t||v(),t.style.display="inline",i.focus(),i.select()}function x(){t||v(),t.style.display="none",f&&f.remove()}function E(){t||v(),t.style.display!=="inline"?C():x()}function k(){if(g){var r=i.value;r===""?(f&&f.remove(),o=null):(f=new L("slidecontent"),o=f.apply(r),a=0)}o&&(o.length&&o.length<=a&&(a=0),o.length>a&&(n.slide(o[a].h,o[a].v),a++))}function L(r,c){var I=document.getElementById(r)||document.body,m=c||"EM",M=new RegExp("^(?:"+m+"|SCRIPT|FORM)$"),N=["#ff6","#a0ffff","#9f9","#f99","#f6f"],S=[],B=0,y="",d=[];this.setRegex=function(e){e=e.trim(),y=new RegExp("("+e+")","i")},this.getRegex=function(){return y.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(e){if(!(e==null||!e)&&y&&!M.test(e.nodeName)){if(e.hasChildNodes())for(var l=0;l<e.childNodes.length;l++)this.hiliteWords(e.childNodes[l]);if(e.nodeType==3){var R,s;if((R=e.nodeValue)&&(s=y.exec(R))){for(var u=e;u!=null&&u.nodeName!="SECTION";)u=u.parentNode;for(var b=n.getIndices(u),D=d.length,T=!1,l=0;l<D;l++)d[l].h===b.h&&d[l].v===b.v&&(T=!0);T||d.push(b),S[s[0].toLowerCase()]||(S[s[0].toLowerCase()]=N[B++%N.length]);var h=document.createElement(m);h.appendChild(document.createTextNode(s[0])),h.style.backgroundColor=S[s[0].toLowerCase()],h.style.fontStyle="inherit",h.style.color="#000";var w=e.splitText(s.index);w.nodeValue=w.nodeValue.substring(s[0].length),e.parentNode.insertBefore(h,w)}}}},this.remove=function(){for(var e=document.getElementsByTagName(m),l;e.length&&(l=e[0]);)l.parentNode.replaceChild(l.firstChild,l)},this.apply=function(e){if(!(e==null||!e))return this.remove(),this.setRegex(e),this.hiliteWords(I),d}}return{id:"search",init:r=>{n=r,n.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",function(c){c.key=="F"&&(c.ctrlKey||c.metaKey)&&(c.preventDefault(),E())},!1)},open:C,close:x,toggle:E}}});

dist/plugin/search.mjs

@@ -0,0 +1,85 @@
+/*!
+ * Handles finding a text string anywhere in the slides and showing the next occurrence to the user
+ * by navigatating to that slide and highlighting it.
+ *
+ * @author Jon Snyder <snyder.jon@gmail.com>, February 2013
+ */
+const D = () => {
+  let c, t, l, n, a, y, s;
+  function g() {
+    t = document.createElement("div"), t.classList.add("searchbox"), t.style.position = "absolute", t.style.top = "10px", t.style.right = "10px", t.style.zIndex = 10, t.innerHTML = `<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>
+		</span>`, l = t.querySelector(".searchinput"), l.style.width = "240px", l.style.fontSize = "14px", l.style.padding = "4px 6px", l.style.color = "#000", l.style.background = "#fff", l.style.borderRadius = "2px", l.style.border = "0", l.style.outline = "0", l.style.boxShadow = "0 2px 18px rgba(0, 0, 0, 0.2)", l.style["-webkit-appearance"] = "none", c.getRevealElement().appendChild(t), l.addEventListener("keyup", function(r) {
+      switch (r.keyCode) {
+        case 13:
+          r.preventDefault(), k(), y = !1;
+          break;
+        default:
+          y = !0;
+      }
+    }, !1), v();
+  }
+  function w() {
+    t || g(), t.style.display = "inline", l.focus(), l.select();
+  }
+  function v() {
+    t || g(), t.style.display = "none", s && s.remove();
+  }
+  function C() {
+    t || g(), t.style.display !== "inline" ? w() : v();
+  }
+  function k() {
+    if (y) {
+      var r = l.value;
+      r === "" ? (s && s.remove(), n = null) : (s = new T("slidecontent"), n = s.apply(r), a = 0);
+    }
+    n && (n.length && n.length <= a && (a = 0), n.length > a && (c.slide(n[a].h, n[a].v), a++));
+  }
+  function T(r, f) {
+    var L = document.getElementById(r) || document.body, x = f || "EM", I = new RegExp("^(?:" + x + "|SCRIPT|FORM)$"), E = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"], m = [], M = 0, p = "", d = [];
+    this.setRegex = function(e) {
+      e = e.trim(), p = new RegExp("(" + e + ")", "i");
+    }, this.getRegex = function() {
+      return p.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
+    }, this.hiliteWords = function(e) {
+      if (!(e == null || !e) && p && !I.test(e.nodeName)) {
+        if (e.hasChildNodes())
+          for (var i = 0; i < e.childNodes.length; i++)
+            this.hiliteWords(e.childNodes[i]);
+        if (e.nodeType == 3) {
+          var N, o;
+          if ((N = e.nodeValue) && (o = p.exec(N))) {
+            for (var h = e; h != null && h.nodeName != "SECTION"; )
+              h = h.parentNode;
+            for (var S = c.getIndices(h), B = d.length, R = !1, i = 0; i < B; i++)
+              d[i].h === S.h && d[i].v === S.v && (R = !0);
+            R || d.push(S), m[o[0].toLowerCase()] || (m[o[0].toLowerCase()] = E[M++ % E.length]);
+            var u = document.createElement(x);
+            u.appendChild(document.createTextNode(o[0])), u.style.backgroundColor = m[o[0].toLowerCase()], u.style.fontStyle = "inherit", u.style.color = "#000";
+            var b = e.splitText(o.index);
+            b.nodeValue = b.nodeValue.substring(o[0].length), e.parentNode.insertBefore(u, b);
+          }
+        }
+      }
+    }, this.remove = function() {
+      for (var e = document.getElementsByTagName(x), i; e.length && (i = e[0]); )
+        i.parentNode.replaceChild(i.firstChild, i);
+    }, this.apply = function(e) {
+      if (!(e == null || !e))
+        return this.remove(), this.setRegex(e), this.hiliteWords(L), d;
+    };
+  }
+  return {
+    id: "search",
+    init: (r) => {
+      c = r, c.registerKeyboardShortcut("CTRL + Shift + F", "Search"), document.addEventListener("keydown", function(f) {
+        f.key == "F" && (f.ctrlKey || f.metaKey) && (f.preventDefault(), C());
+      }, !1);
+    },
+    open: w,
+    close: v,
+    toggle: C
+  };
+};
+export {
+  D as default
+};

dist/plugin/zoom.js

@@ -0,0 +1,9 @@
+(function(f,u){typeof exports=="object"&&typeof module<"u"?module.exports=u():typeof define=="function"&&define.amd?define(u):(f=typeof globalThis<"u"?globalThis:f||self,f.RevealZoom=u())})(this,function(){"use strict";/*!
+ * reveal.js Zoom plugin
+ */const f={id:"zoom",init:function(n){n.getRevealElement().addEventListener("mousedown",function(o){var l=/Linux/.test(window.navigator.platform)?"ctrl":"alt",r=(n.getConfig().zoomKey?n.getConfig().zoomKey:l)+"Key",s=n.getConfig().zoomLevel?n.getConfig().zoomLevel:2;o[r]&&!n.isOverview()&&(o.preventDefault(),m.to({x:o.clientX,y:o.clientY,scale:s,pan:!1}))})},destroy:()=>{m.reset()}},u=()=>f;/*!
+ * zoom.js 0.3 (modified for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
+ */var m=function(){var n=1,o=0,l=0,r=-1,s=-1,y="transform"in document.body.style;y&&(document.body.style.transition="transform 0.8s ease"),document.addEventListener("keyup",function(e){n!==1&&e.keyCode===27&&m.out()}),document.addEventListener("mousemove",function(e){n!==1&&(o=e.clientX,l=e.clientY)});function w(e,t){var i=c();if(e.width=e.width||1,e.height=e.height||1,e.x-=(window.innerWidth-e.width*t)/2,e.y-=(window.innerHeight-e.height*t)/2,y)if(t===1)document.body.style.transform="";else{var d=i.x+"px "+i.y+"px",h="translate("+-e.x+"px,"+-e.y+"px) scale("+t+")";document.body.style.transformOrigin=d,document.body.style.transform=h}else t===1?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(i.x+e.x)/t+"px",document.body.style.top=-(i.y+e.y)/t+"px",document.body.style.width=t*100+"%",document.body.style.height=t*100+"%",document.body.style.zoom=t);n=t,document.documentElement.classList&&(n!==1?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function a(){var e=.12,t=window.innerWidth*e,i=window.innerHeight*e,d=c();l<i?window.scroll(d.x,d.y-(1-l/i)*(14/n)):l>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-l)/i)*(14/n)),o<t?window.scroll(d.x-(1-o/t)*(14/n),d.y):o>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-o)/t)*(14/n),d.y)}function c(){return{x:window.scrollX!==void 0?window.scrollX:window.pageXOffset,y:window.scrollY!==void 0?window.scrollY:window.pageYOffset}}return{to:function(e){if(n!==1)m.out();else{if(e.x=e.x||0,e.y=e.y||0,e.element){var t=20,i=e.element.getBoundingClientRect();e.x=i.left-t,e.y=i.top-t,e.width=i.width+t*2,e.height=i.height+t*2}e.width!==void 0&&e.height!==void 0&&(e.scale=Math.max(Math.min(window.innerWidth/e.width,window.innerHeight/e.height),1)),e.scale>1&&(e.x*=e.scale,e.y*=e.scale,w(e,e.scale),e.pan!==!1&&(r=setTimeout(function(){s=setInterval(a,1e3/60)},800)))}},out:function(){clearTimeout(r),clearInterval(s),w({x:0,y:0},1),n=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return n}}}();return u});

dist/plugin/zoom.mjs

@@ -0,0 +1,102 @@
+/*!
+ * reveal.js Zoom plugin
+ */
+const c = {
+  id: "zoom",
+  init: function(n) {
+    n.getRevealElement().addEventListener("mousedown", function(o) {
+      var l = /Linux/.test(window.navigator.platform) ? "ctrl" : "alt", f = (n.getConfig().zoomKey ? n.getConfig().zoomKey : l) + "Key", m = n.getConfig().zoomLevel ? n.getConfig().zoomLevel : 2;
+      o[f] && !n.isOverview() && (o.preventDefault(), r.to({
+        x: o.clientX,
+        y: o.clientY,
+        scale: m,
+        pan: !1
+      }));
+    });
+  },
+  destroy: () => {
+    r.reset();
+  }
+}, h = () => c;
+/*!
+ * zoom.js 0.3 (modified for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
+ */
+var r = function() {
+  var n = 1, o = 0, l = 0, f = -1, m = -1, u = "transform" in document.body.style;
+  u && (document.body.style.transition = "transform 0.8s ease"), document.addEventListener("keyup", function(e) {
+    n !== 1 && e.keyCode === 27 && r.out();
+  }), document.addEventListener("mousemove", function(e) {
+    n !== 1 && (o = e.clientX, l = e.clientY);
+  });
+  function y(e, t) {
+    var i = s();
+    if (e.width = e.width || 1, e.height = e.height || 1, e.x -= (window.innerWidth - e.width * t) / 2, e.y -= (window.innerHeight - e.height * t) / 2, u)
+      if (t === 1)
+        document.body.style.transform = "";
+      else {
+        var d = i.x + "px " + i.y + "px", w = "translate(" + -e.x + "px," + -e.y + "px) scale(" + t + ")";
+        document.body.style.transformOrigin = d, document.body.style.transform = w;
+      }
+    else
+      t === 1 ? (document.body.style.position = "", document.body.style.left = "", document.body.style.top = "", document.body.style.width = "", document.body.style.height = "", document.body.style.zoom = "") : (document.body.style.position = "relative", document.body.style.left = -(i.x + e.x) / t + "px", document.body.style.top = -(i.y + e.y) / t + "px", document.body.style.width = t * 100 + "%", document.body.style.height = t * 100 + "%", document.body.style.zoom = t);
+    n = t, document.documentElement.classList && (n !== 1 ? document.documentElement.classList.add("zoomed") : document.documentElement.classList.remove("zoomed"));
+  }
+  function a() {
+    var e = 0.12, t = window.innerWidth * e, i = window.innerHeight * e, d = s();
+    l < i ? window.scroll(d.x, d.y - (1 - l / i) * (14 / n)) : l > window.innerHeight - i && window.scroll(d.x, d.y + (1 - (window.innerHeight - l) / i) * (14 / n)), o < t ? window.scroll(d.x - (1 - o / t) * (14 / n), d.y) : o > window.innerWidth - t && window.scroll(d.x + (1 - (window.innerWidth - o) / t) * (14 / n), d.y);
+  }
+  function s() {
+    return {
+      x: window.scrollX !== void 0 ? window.scrollX : window.pageXOffset,
+      y: window.scrollY !== void 0 ? window.scrollY : window.pageYOffset
+    };
+  }
+  return {
+    /**
+     * Zooms in on either a rectangle or HTML element.
+     *
+     * @param {Object} options
+     *   - element: HTML element to zoom in on
+     *   OR
+     *   - x/y: coordinates in non-transformed space to zoom in on
+     *   - width/height: the portion of the screen to zoom in on
+     *   - scale: can be used instead of width/height to explicitly set scale
+     */
+    to: function(e) {
+      if (n !== 1)
+        r.out();
+      else {
+        if (e.x = e.x || 0, e.y = e.y || 0, e.element) {
+          var t = 20, i = e.element.getBoundingClientRect();
+          e.x = i.left - t, e.y = i.top - t, e.width = i.width + t * 2, e.height = i.height + t * 2;
+        }
+        e.width !== void 0 && e.height !== void 0 && (e.scale = Math.max(Math.min(window.innerWidth / e.width, window.innerHeight / e.height), 1)), e.scale > 1 && (e.x *= e.scale, e.y *= e.scale, y(e, e.scale), e.pan !== !1 && (f = setTimeout(function() {
+          m = setInterval(a, 1e3 / 60);
+        }, 800)));
+      }
+    },
+    /**
+     * Resets the document zoom state to its default.
+     */
+    out: function() {
+      clearTimeout(f), clearInterval(m), y({ x: 0, y: 0 }, 1), n = 1;
+    },
+    // Alias
+    magnify: function(e) {
+      this.to(e);
+    },
+    reset: function() {
+      this.out();
+    },
+    zoomLevel: function() {
+      return n;
+    }
+  };
+}();
+export {
+  h as default
+};

dist/reset.css

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}

dist/reveal.d.ts

@@ -0,0 +1,571 @@
+declare interface Config {
+    /**
+     * The "normal" size of the presentation, aspect ratio will be preserved
+     * when the presentation is scaled to fit different resolutions
+     *
+     * @defaultValue 960
+     */
+    width?: number | string;
+    /**
+     * The "normal" size of the presentation, aspect ratio will be preserved
+     * when the presentation is scaled to fit different resolutions
+     *
+     * @defaultValue 700
+     */
+    height?: number | string;
+    /**
+     * Factor of the display size that should remain empty around the content
+     *
+     * @defaultValue 0.04
+     */
+    margin?: number;
+    /**
+     * Bounds for smallest/largest possible scale to apply to content
+     *
+     * @defaultValue 0.2
+     */
+    minScale?: number;
+    /**
+     *
+     * @defaultValue 2.0
+     */
+    maxScale?: number;
+    /**
+     * Display presentation control arrows
+     * - true: Display controls in all views
+     * - false: Hide controls in all views
+     * - 'speaker-only': Display controls only in the speaker view
+     *
+     * @defaultValue true
+     */
+    controls?: boolean | 'speaker-only';
+    /**
+     * Help the user learn the controls by providing hints, for example by
+     * bouncing the down arrow when they first encounter a vertical slide
+     *
+     * @defaultValue true
+     */
+    controlsTutorial?: boolean;
+    /**
+     * Determines where controls appear, "edges" or "bottom-right"
+     *
+     * @defaultValue 'bottom-right'
+     */
+    controlsLayout?: 'edges' | 'bottom-right';
+    /**
+     * Visibility rule for backwards navigation arrows; "faded", "hidden"
+     * or "visible"
+     *
+     * @defaultValue 'faded'
+     */
+    controlsBackArrows?: 'faded' | 'hidden' | 'visible';
+    /**
+     * Display a presentation progress bar
+     *
+     * @defaultValue true
+     */
+    progress?: boolean;
+    /**
+     * Display the page number of the current slide
+     * - true:    Show slide number
+     * - false:   Hide slide number
+     *
+     * Can optionally be set as a string that specifies the number formatting:
+     * - "h.v":	  Horizontal . vertical slide number (default)
+     * - "h/v":	  Horizontal / vertical slide number
+     * - "c":	  Flattened slide number
+     * - "c/t":	  Flattened slide number / total slides
+     *
+     * Alternatively, you can provide a function that returns the slide
+     * number for the current slide. The function should take in a slide
+     * object and return an array with one string [slideNumber] or
+     * three strings [n1,delimiter,n2]. See #formatSlideNumber().
+     *
+     * @defaultValue false
+     */
+    slideNumber?: boolean | 'h.v' | 'h/v' | 'c' | 'c/t' | ((slide: any) => string | [string, string, string]);
+    /**
+     * Can be used to limit the contexts in which the slide number appears
+     * - "all":      Always show the slide number
+     * - "print":    Only when printing to PDF
+     * - "speaker":  Only in the speaker view
+     *
+     * @defaultValue 'all'
+     */
+    showSlideNumber?: 'all' | 'print' | 'speaker';
+    /**
+     * Use 1 based indexing for # links to match slide number (default is zero
+     * based)
+     *
+     * @defaultValue false
+     */
+    hashOneBasedIndex?: boolean;
+    /**
+     * Add the current slide number to the URL hash so that reloading the
+     * page/copying the URL will return you to the same slide
+     *
+     * @defaultValue false
+     */
+    hash?: boolean;
+    /**
+     * Flags if we should monitor the hash and change slides accordingly
+     *
+     * @defaultValue true
+     */
+    respondToHashChanges?: boolean;
+    /**
+     * Enable support for jump-to-slide navigation shortcuts
+     *
+     * @defaultValue true
+     */
+    jumpToSlide?: boolean;
+    /**
+     * Push each slide change to the browser history. Implies `hash: true`
+     *
+     * @defaultValue false
+     */
+    history?: boolean;
+    /**
+     * Enable keyboard shortcuts for navigation
+     *
+     * @defaultValue true
+     */
+    keyboard?: boolean;
+    /**
+     * Optional function that blocks keyboard events when returning false
+     *
+     * If you set this to 'focused', we will only capture keyboard events
+     * for embedded decks when they are in focus
+     *
+     * @defaultValue null
+     */
+    keyboardCondition?: null | 'focused' | ((event: KeyboardEvent) => boolean);
+    /**
+     * Disables the default reveal.js slide layout (scaling and centering)
+     * so that you can use custom CSS layout
+     *
+     * @defaultValue false
+     */
+    disableLayout?: boolean;
+    /**
+     * Enable the slide overview mode
+     *
+     * @defaultValue true
+     */
+    overview?: boolean;
+    /**
+     * Vertical centering of slides
+     *
+     * @defaultValue true
+     */
+    center?: boolean;
+    /**
+     * Enables touch navigation on devices with touch input
+     *
+     * @defaultValue true
+     */
+    touch?: boolean;
+    /**
+     * Loop the presentation
+     *
+     * @defaultValue false
+     */
+    loop?: boolean;
+    /**
+     * Change the presentation direction to be RTL
+     *
+     * @defaultValue false
+     */
+    rtl?: boolean;
+    /**
+     * Changes the behavior of our navigation directions.
+     *
+     * "default"
+     * Left/right arrow keys step between horizontal slides, up/down
+     * arrow keys step between vertical slides. Space key steps through
+     * all slides (both horizontal and vertical).
+     *
+     * "linear"
+     * Removes the up/down arrows. Left/right arrows step through all
+     * slides (both horizontal and vertical).
+     *
+     * "grid"
+     * When this is enabled, stepping left/right from a vertical stack
+     * to an adjacent vertical stack will land you at the same vertical
+     * index.
+     *
+     * Consider a deck with six slides ordered in two vertical stacks:
+     * 1.1    2.1
+     * 1.2    2.2
+     * 1.3    2.3
+     *
+     * If you're on slide 1.3 and navigate right, you will normally move
+     * from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
+     * from 1.3 -> 2.3.
+     *
+     * @defaultValue 'default'
+     */
+    navigationMode?: 'default' | 'linear' | 'grid';
+    /**
+     * Randomizes the order of slides each time the presentation loads
+     *
+     * @defaultValue false
+     */
+    shuffle?: boolean;
+    /**
+     * Turns fragments on and off globally
+     *
+     * @defaultValue true
+     */
+    fragments?: boolean;
+    /**
+     * Flags whether to include the current fragment in the URL,
+     * so that reloading brings you to the same fragment position
+     *
+     * @defaultValue true
+     */
+    fragmentInURL?: boolean;
+    /**
+     * Flags if the presentation is running in an embedded mode,
+     * i.e. contained within a limited portion of the screen
+     *
+     * @defaultValue false
+     */
+    embedded?: boolean;
+    /**
+     * Flags if we should show a help overlay when the question-mark
+     * key is pressed
+     *
+     * @defaultValue true
+     */
+    help?: boolean;
+    /**
+     * Flags if it should be possible to pause the presentation (blackout)
+     *
+     * @defaultValue true
+     */
+    pause?: boolean;
+    /**
+     * Flags if speaker notes should be visible to all viewers
+     *
+     * @defaultValue false
+     */
+    showNotes?: boolean;
+    /**
+     * Flags if slides with data-visibility="hidden" should be kept visible
+     *
+     * @defaultValue false
+     */
+    showHiddenSlides?: boolean;
+    /**
+     * Global override for autoplaying embedded media (video/audio/iframe)
+     * - null:   Media will only autoplay if data-autoplay is present
+     * - true:   All media will autoplay, regardless of individual setting
+     * - false:  No media will autoplay, regardless of individual setting
+     *
+     * @defaultValue null
+     */
+    autoPlayMedia?: null | boolean;
+    /**
+     * Global override for preloading lazy-loaded iframes
+     * - null:   Iframes with data-src AND data-preload will be loaded when within
+     *           the viewDistance, iframes with only data-src will be loaded when visible
+     * - true:   All iframes with data-src will be loaded when within the viewDistance
+     * - false:  All iframes with data-src will be loaded only when visible
+     *
+     * @defaultValue null
+     */
+    preloadIframes?: null | boolean;
+    /**
+     * Can be used to globally disable auto-animation
+     *
+     * @defaultValue true
+     */
+    autoAnimate?: boolean;
+    /**
+     * Optionally provide a custom element matcher that will be
+     * used to dictate which elements we can animate between.
+     *
+     * @defaultValue null
+     */
+    autoAnimateMatcher?: null | Function;
+    /**
+     * Default settings for our auto-animate transitions, can be
+     * overridden per-slide or per-element via data arguments
+     *
+     * @defaultValue 'ease'
+     */
+    autoAnimateEasing?: 'ease' | string;
+    /**
+     * Number of seconds to animate each element.
+     *
+     * @defaultValue 1.0
+     */
+    autoAnimateDuration?: number;
+    /**
+     * Should unmatched elements be faded in?
+     *
+     * @defaultValue true
+     */
+    autoAnimateUnmatched?: boolean;
+    /**
+     * CSS properties that can be auto-animated. Position & scale
+     * is matched separately so there's no need to include styles
+     * like top/right/bottom/left, width/height or margin.
+     *
+     * @defaultValue ['opacity', 'color', 'background-color', 'padding', 'font-size', 'line-height', 'letter-spacing', 'border-width', 'border-color', 'border-radius', 'outline', 'outline-offset']
+     */
+    autoAnimateStyles?: string[];
+    /**
+     * Controls automatic progression to the next slide
+     * - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
+     *           is present on the current slide or fragment
+     * - 1+:     All slides will progress automatically at the given interval
+     * - false:  No auto-sliding, even if data-autoslide is present
+     *
+     * @defaultValue 0
+     */
+    autoSlide?: number | false;
+    /**
+     * Stop auto-sliding after user input
+     *
+     * @defaultValue true
+     */
+    autoSlideStoppable?: boolean;
+    /**
+     * Use this method for navigation when auto-sliding (defaults to navigateNext)
+     *
+     * @defaultValue null
+     */
+    autoSlideMethod?: null | Function;
+    /**
+     * Specify the average time in seconds that you think you will spend
+     * presenting each slide. This is used to show a pacing timer in the
+     * speaker view
+     *
+     * @defaultValue null
+     */
+    defaultTiming?: null;
+    /**
+     * Enable slide navigation via mouse wheel
+     *
+     * @defaultValue false
+     */
+    mouseWheel?: boolean;
+    /**
+     * Opens links in an iframe preview overlay
+     * Add `data-preview-link` and `data-preview-link="false"` to customize each link
+     * individually
+     *
+     * @defaultValue false
+     */
+    previewLinks?: boolean;
+    /**
+     * Exposes the reveal.js API through window.postMessage
+     *
+     * @defaultValue true
+     */
+    postMessage?: boolean;
+    /**
+     * Dispatches all reveal.js events to the parent window through postMessage
+     *
+     * @defaultValue false
+     */
+    postMessageEvents?: boolean;
+    /**
+     * Focuses body when page changes visibility to ensure keyboard shortcuts work
+     *
+     * @defaultValue true
+     */
+    focusBodyOnPageVisibilityChange?: boolean;
+    /**
+     * Transition style
+     *
+     * @defaultValue 'slide'
+     */
+    transition?: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom';
+    /**
+     * Transition speed
+     *
+     * @defaultValue 'default'
+     */
+    transitionSpeed?: 'default' | 'fast' | 'slow';
+    /**
+     * Transition style for full page slide backgrounds
+     *
+     * @defaultValue 'fade'
+     */
+    backgroundTransition?: 'fade' | 'none' | 'slide' | 'convex' | 'concave' | 'zoom';
+    /**
+     * Parallax background image
+     *
+     * @defaultValue ''
+     */
+    parallaxBackgroundImage?: null | string;
+    /**
+     * Parallax background size
+     *
+     * @defaultValue ''
+     */
+    parallaxBackgroundSize?: null | string;
+    /**
+     * Parallax background repeat
+     *
+     * @defaultValue ''
+     */
+    parallaxBackgroundRepeat?: null | string;
+    /**
+     * Parallax background position
+     *
+     * @defaultValue ''
+     */
+    parallaxBackgroundPosition?: null | string;
+    /**
+     * Amount of pixels to move the parallax background per slide step
+     *
+     * @defaultValue null
+     */
+    parallaxBackgroundHorizontal?: null | number;
+    /**
+     *
+     * @defaultValue null
+     */
+    parallaxBackgroundVertical?: null | number;
+    /**
+     * Can be used to initialize reveal.js in one of the following views:
+     * - print:   Render the presentation so that it can be printed to PDF
+     * - scroll:  Show the presentation as a tall scrollable page with scroll
+     *            triggered animations
+     *
+     * @defaultValue null
+     */
+    view?: null | 'print' | 'scroll';
+    /**
+     * Adjusts the height of each slide in the scroll view.
+     * - full:       Each slide is as tall as the viewport
+     * - compact:    Slides are as small as possible, allowing multiple slides
+     *               to be visible in parallel on tall devices
+     *
+     * @defaultValue 'full'
+     */
+    scrollLayout?: 'full' | 'compact';
+    /**
+     * Control how scroll snapping works in the scroll view.
+     * - false:   	No snapping, scrolling is continuous
+     * - proximity:  Snap when close to a slide
+     * - mandatory:  Always snap to the closest slide
+     *
+     * Only applies to presentations in scroll view.
+     *
+     * @defaultValue 'mandatory'
+     */
+    scrollSnap?: false | 'proximity' | 'mandatory';
+    /**
+     * Enables and configures the scroll view progress bar.
+     * - 'auto':    Show the scrollbar while scrolling, hide while idle
+     * - true:      Always show the scrollbar
+     * - false:     Never show the scrollbar
+     *
+     * @defaultValue 'auto'
+     */
+    scrollProgress?: 'auto' | boolean;
+    /**
+     * Automatically activate the scroll view when we the viewport falls
+     * below the given width.
+     *
+     * @defaultValue 435
+     */
+    scrollActivationWidth?: number;
+    /**
+     * The maximum number of pages a single slide can expand onto when printing
+     * to PDF, unlimited by default
+     *
+     * @defaultValue Number.POSITIVE_INFINITY
+     */
+    pdfMaxPagesPerSlide?: number;
+    /**
+     * Prints each fragment on a separate slide
+     *
+     * @defaultValue true
+     */
+    pdfSeparateFragments?: boolean;
+    /**
+     * Offset used to reduce the height of content within exported PDF pages.
+     * This exists to account for environment differences based on how you
+     * print to PDF. CLI printing options, like phantomjs and wkpdf, can end
+     * on precisely the total height of the document whereas in-browser
+     * printing has to end one pixel before.
+     *
+     * @defaultValue -1
+     */
+    pdfPageHeightOffset?: number;
+    /**
+     * Number of slides away from the current that are visible
+     *
+     * @defaultValue 3
+     */
+    viewDistance?: number;
+    /**
+     * Number of slides away from the current that are visible on mobile
+     * devices. It is advisable to set this to a lower number than
+     * viewDistance in order to save resources.
+     *
+     * @defaultValue 2
+     */
+    mobileViewDistance?: number;
+    /**
+     * The display mode that will be used to show slides
+     *
+     * @defaultValue 'block'
+     */
+    display?: string;
+    /**
+     * Hide cursor if inactive
+     *
+     * @defaultValue true
+     */
+    hideInactiveCursor?: boolean;
+    /**
+     * Time before the cursor is hidden (in ms)
+     *
+     * @defaultValue 5000
+     */
+    hideCursorTime?: number;
+    /**
+     * Should we automatically sort and set indices for fragments
+     * at each sync? (See Reveal.sync)
+     *
+     * @defaultValue true
+     */
+    sortFragmentsOnSync?: boolean;
+    /**
+     * Script dependencies to load
+     *
+     * @defaultValue []
+     */
+    dependencies?: any[];
+    /**
+     * Plugin objects to register and use for this presentation
+     *
+     * @defaultValue []
+     */
+    plugins?: any[];
+}
+
+/**
+ * Expose the Reveal class to the window. To create a
+ * new instance:
+ * let deck = new Reveal( document.querySelector( '.reveal' ), {
+ *   controls: false
+ * } );
+ * deck.initialize().then(() => {
+ *   // reveal.js is ready
+ * });
+ */
+declare const Reveal: {
+    initialize: (options?: Config) => Promise<void>;
+    [key: string]: any;
+};
+export default Reveal;
+
+export { }