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/workflows/js.yml

@@ -1,24 +0,0 @@
-name: tests
-
-on: [push]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [10.x, 14.x, 16.x]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm run build --if-present
-    - run: npm test
-      env:
-        CI: true

.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,3 +9,5 @@ log/*.log
 tmp/**
 node_modules/
 .sass-cache
+reveal-js-presentation
+reveal-js-presentation.zip

.npmignore

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

.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
+}

LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2011-2022 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

README.md

@@ -4,7 +4,7 @@
   </a>
   <br><br>
   <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
-  <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
+  <a href="https://slides.com/"><img src="https://static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
 </p>
 
 reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
@@ -13,39 +13,12 @@ The framework comes with a powerful feature set including [nested slides](https:
 
 ---
 
-### Sponsors
-Hakim's open source work is supported by <a href="https://github.com/sponsors/hakimel">GitHub sponsors</a>. Special thanks to:
-<div align="center">
-  <table>
-    <td align="center">
-      <a href="https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
-        <div>
-          <img src="https://user-images.githubusercontent.com/629429/151508669-efb4c3b3-8fe3-45eb-8e47-e9510b5f0af1.svg" width="290" alt="WorkOS">
-        </div>
-        <b>Your app, enterprise-ready.</b>
-        <div>
-          <sub>Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.</sup>
-        </div>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://www.doppler.com/?utm_cam![Uploading workos-logo-white-bg.svg…]()
-      paign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
-        <div>
-          <img src="https://user-images.githubusercontent.com/629429/151510865-9fd454f1-fd8c-4df4-b227-a54b87313db4.png" width="290" alt="Doppler">
-        </div>
-        <b>All your environment variables, in one place</b>
-        <div>
-          <sub>Stop struggling with scattered API keys, hacking together home-brewed tools, and avoiding access controls. Keep your team and servers in sync with Doppler.</sup>
-        </div>
-      </a>
-    </td>
-  </table>
-</div>
+Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.
 
 ---
 
 ### Getting started
+
 - 🚀 [Install reveal.js](https://revealjs.com/installation)
 - 👀 [View the demo presentation](https://revealjs.com/demo)
 - 📖 [Read the documentation](https://revealjs.com/markup/)
@@ -54,13 +27,6 @@ Hakim's open source work is supported by <a href="https://github.com/sponsors/ha
 
 ---
 
-### Online Editor
-Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js.
-
-<br>
-<br>
-
---- 
 <div align="center">
-  MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se
+  MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
 </div>

css/layout.scss

@@ -25,6 +25,7 @@
 // Stack multiple elements on top of each other
 .reveal .r-stack {
 	display: grid;
+	grid-template-rows: 100%;
 }
 
 .reveal .r-stack > * {
@@ -37,7 +38,8 @@
 .reveal .r-hstack {
 	display: flex;
 
-	img, video {
+	img,
+	video {
 		min-width: 0;
 		min-height: 0;
 		object-fit: contain;
@@ -57,13 +59,31 @@
 }
 
 // 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 .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; }
+.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.scss

@@ -1,47 +1,41 @@
-/* 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 {
 	html:not(.print-pdf) {
-
-		background: #fff;
+		overflow: visible;
 		width: auto;
 		height: auto;
-		overflow: visible;
 
 		body {
-			background: #fff;
-			font-size: 20pt;
-			width: auto;
-			height: auto;
-			border: 0;
-			margin: 0 5%;
+			margin: 0;
 			padding: 0;
 			overflow: visible;
-			float: none !important;
+		}
 	}
 
-		.nestedarrow,
+	html:not(.print-pdf) .reveal {
+		background: #fff;
+		font-size: 20pt;
+
 		.controls,
-		.fork-reveal,
-		.share-reveal,
 		.state-background,
-		.reveal .progress,
-		.reveal .backgrounds,
-		.reveal .slide-number {
+		.progress,
+		.backgrounds,
+		.slide-number {
 			display: none !important;
 		}
 
-		body, p, td, li {
+		p,
+		td,
+		li {
 			font-size: 20pt !important;
 			color: #000;
 		}
 
-		h1,h2,h3,h4,h5,h6 {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: #000 !important;
 			height: auto;
 			line-height: normal;
@@ -49,13 +43,26 @@
 			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; }
+		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 {
@@ -64,7 +71,10 @@
 			text-decoration: underline;
 		}
 
-		ul, ol, div, p {
+		ul,
+		ol,
+		div,
+		p {
 			visibility: visible;
 			position: static;
 			width: auto;
@@ -74,18 +84,19 @@
 			margin: 0;
 			text-align: left !important;
 		}
-		.reveal pre,
-		.reveal table {
+		pre,
+		table {
 			margin-left: 0;
 			margin-right: 0;
 		}
-		.reveal pre code {
+		pre code {
 			padding: 20px;
 		}
-		.reveal blockquote {
+		blockquote {
 			margin: 20px 0;
 		}
-		.reveal .slides {
+
+		.slides {
 			position: static !important;
 			width: auto !important;
 			height: auto !important;
@@ -106,7 +117,7 @@
 
 			perspective-origin: 50% 50%;
 		}
-		.reveal .slides section {
+		.slides section {
 			visibility: visible !important;
 			position: static !important;
 			width: auto !important;
@@ -129,19 +140,24 @@
 			transform: none !important;
 			transition: none !important;
 		}
-		.reveal .slides section.stack {
+		.slides section.stack {
 			padding: 0 !important;
 		}
-		.reveal section:last-of-type {
+		.slides section:last-of-type {
 			page-break-after: avoid !important;
 		}
-		.reveal section .fragment {
+		.slides section .fragment {
 			opacity: 1 !important;
 			visibility: visible !important;
 
 			transform: none !important;
 		}
-		.reveal section img {
+
+		.r-fit-text {
+			white-space: normal !important;
+		}
+
+		section img {
 			display: block;
 			margin: 15px 0px;
 			background: rgba(255, 255, 255, 1);
@@ -149,11 +165,11 @@
 			box-shadow: none;
 		}
 
-		.reveal section small {
+		section small {
 			font-size: 0.8em;
 		}
 
-		.reveal .hljs {
+		.hljs {
 			max-height: 100%;
 			white-space: pre-wrap;
 			word-wrap: break-word;
@@ -161,11 +177,11 @@
 			font-size: 15pt;
 		}
 
-		.reveal .hljs .hljs-ln-numbers {
+		.hljs .hljs-ln-numbers {
 			white-space: nowrap;
 		}
 
-		.reveal .hljs td {
+		.hljs td {
 			font-size: inherit !important;
 			color: inherit !important;
 		}

css/print/pdf.scss

@@ -5,7 +5,7 @@
  * https://revealjs.com/pdf-export/
  */
 
-html.print-pdf {
+html.reveal-print {
 	* {
 		-webkit-print-color-adjust: exact;
 	}
@@ -36,7 +36,6 @@ html.print-pdf {
 
 	.reveal pre code {
 		overflow: hidden !important;
-		font-family: Courier, 'Courier New', monospace !important;
 	}
 
 	.reveal {
@@ -71,6 +70,10 @@ html.print-pdf {
 		page-break-after: always;
 	}
 
+	.reveal .slides .pdf-page:last-of-type {
+		page-break-after: avoid;
+	}
+
 	.reveal .slides section {
 		visibility: visible !important;
 		display: block !important;
@@ -100,7 +103,6 @@ html.print-pdf {
 		box-shadow: none;
 	}
 
-
 	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
 	.reveal .backgrounds {
 		display: none;
@@ -133,7 +135,7 @@ html.print-pdf {
 	}
 
 	/* Layout option which makes notes appear on a separate page */
-	.reveal .speaker-notes-pdf[data-layout="separate-page"] {
+	.reveal .speaker-notes-pdf[data-layout='separate-page'] {
 		position: relative;
 		color: inherit;
 		background-color: transparent;
@@ -147,6 +149,7 @@ html.print-pdf {
 		display: block;
 		position: absolute;
 		font-size: 14px;
+		visibility: visible;
 	}
 
 	/* This accessibility tool is not useful in PDF and breaks it visually */

css/reset.css

@@ -0,0 +1,31 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   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,
+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;
+}
+/* prettier-ignore */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}

css/theme/README.md

@@ -4,18 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep
 
 ## Creating a Theme
 
-To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- 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.
 
 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.
+   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.
-
-4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
+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. **Optionally add custom fonts and/or additional styles**

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.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.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.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.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.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.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.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.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.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,41 +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(./fonts/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-
-
-// Override theme settings (see ../template/settings.scss)
-$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) );
-}
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/black.scss

@@ -1,46 +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(./fonts/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;
-
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/blood.scss

@@ -1,87 +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;
-
-// Change text colors against dark slide backgrounds
-@include light-bg-text-color(#222);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------
-
-// some overrides after theme template import
-
-.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: $codeBackground;
-    display: inline-block;
-    border-radius: 7px;
-}
-
-.reveal small code {
-    vertical-align: baseline;
-}

css/theme/source/league.scss

@@ -1,36 +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(./fonts/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-
-// Override theme settings (see ../template/settings.scss)
-$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) );
-}
-
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/moon.scss

@@ -1,58 +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(./fonts/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;
-
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/night.scss

@@ -1,37 +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;
-
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/serif.scss

@@ -1,38 +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;
-}
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/simple.scss

@@ -1,40 +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);
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/source/sky.scss

@@ -1,49 +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 );
-}
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-
-
-// 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(./fonts/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,46 +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(./fonts/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;
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------

css/theme/template/exposer.scss

@@ -1,28 +0,0 @@
-// Exposes theme's variables for easy re-use in CSS for plugin authors
-
-:root {
-  --r-background-color: #{$backgroundColor};
-  --r-main-font: #{$mainFont};
-  --r-main-font-size: #{$mainFontSize};
-  --r-main-color: #{$mainColor};
-  --r-block-margin: #{$blockMargin};
-  --r-heading-margin: #{$headingMargin};
-  --r-heading-font: #{$headingFont};
-  --r-heading-color: #{$headingColor};
-  --r-heading-line-height: #{$headingLineHeight};
-  --r-heading-letter-spacing: #{$headingLetterSpacing};
-  --r-heading-text-transform: #{$headingTextTransform};
-  --r-heading-text-shadow: #{$headingTextShadow};
-  --r-heading-font-weight: #{$headingFontWeight};
-  --r-heading1-text-shadow: #{$heading1TextShadow};
-  --r-heading1-size: #{$heading1Size};
-  --r-heading2-size: #{$heading2Size};
-  --r-heading3-size: #{$heading3Size};
-  --r-heading4-size: #{$heading4Size};
-  --r-code-font: #{$codeFont};
-  --r-link-color: #{$linkColor};
-  --r-link-color-dark: #{darken($linkColor , 15% )};
-  --r-link-color-hover: #{$linkColorHover};
-  --r-selection-background-color: #{$selectionBackgroundColor};
-  --r-selection-color: #{$selectionColor};
-}

css/theme/template/mixins.scss

@@ -1,36 +1,12 @@
-@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 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 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% );
-}
-
 @mixin light-bg-text-color($color) {
 	section.has-light-background {
-		&, h1, h2, h3, h4, h5, h6 {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: $color;
 		}
 	}
@@ -38,7 +14,13 @@
 
 @mixin dark-bg-text-color($color) {
 	section.has-dark-background {
-		&, h1, h2, h3, h4, h5, h6 {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: $color;
 		}
 	}

css/theme/template/settings.scss

@@ -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,10 +4,8 @@
  * GLOBAL STYLES
  *********************************************/
 
-@import "./exposer";
-
 .reveal-viewport {
-	@include bodyBackground();
+	background: var(--r-background);
 	background-color: var(--r-background-color);
 }
 
@@ -60,16 +58,23 @@
 	word-wrap: break-word;
 }
 
-.reveal h1 {font-size: var(--r-heading1-size); }
-.reveal h2 {font-size: var(--r-heading2-size); }
-.reveal h3 {font-size: var(--r-heading3-size); }
-.reveal h4 {font-size: var(--r-heading4-size); }
+.reveal h1 {
+	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
  *********************************************/
@@ -221,13 +226,13 @@
 	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;
 }
 
@@ -260,7 +265,6 @@
 	margin: var(--r-block-margin) 0;
 }
 
-
 /*********************************************
  * LINKS
  *********************************************/
@@ -268,7 +272,7 @@
 .reveal a {
 	color: var(--r-link-color);
 	text-decoration: none;
-	transition: color .15s ease;
+	transition: color 0.15s ease;
 }
 .reveal a:hover {
 	color: var(--r-link-color-hover);
@@ -280,10 +284,8 @@
 	color: #fff;
 	// background: darken( var(--r-link-color), 15% );
 	background: var(--r-link-color-dark);
-
 }
 
-
 /*********************************************
  * Frame helper
  *********************************************/
@@ -294,7 +296,7 @@
 }
 
 .reveal a .r-frame {
-	transition: all .15s linear;
+	transition: all 0.15s linear;
 }
 
 .reveal a:hover .r-frame {
@@ -302,7 +304,6 @@
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
-
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
@@ -311,7 +312,6 @@
 	color: var(--r-link-color);
 }
 
-
 /*********************************************
  * PROGRESS BAR
  *********************************************/

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.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,47 +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="dist/reset.css">
-		<link rel="stylesheet" href="dist/reveal.css">
-		<link rel="stylesheet" href="dist/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="plugin/highlight/monokai.css">
+		<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>
 					<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">
+						<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>
 
@@ -51,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>
+						<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">
+							<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 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">
+							<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>
@@ -73,37 +101,46 @@
 				<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`.
+						This slide is visible in the source, but hidden when the presentation is viewed. You can
+						show all hidden slides by setting the `showHiddenSlides` config option to `true`.
 					</p>
 				</section>
 
 				<section data-auto-animate>
 					<h2 data-id="code-title">Pretty Code</h2>
-					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
-						import React, { useState } from 'react';
+					<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>
+					<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" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
-						import React, { useState } from 'react';
+					<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);
@@ -135,60 +172,92 @@
 
 				<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.
-					</p>
-					<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.)
+						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)">
+				<section
+					data-auto-animate
+					data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
+				>
 					<h2>Auto-Animate</h2>
-					<p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p>
+					<p>
+						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
+							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)">
+				<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
+							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>
+					<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)">
+				<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; border-radius: 200px;"></div>
-						<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
-						<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
+						<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>
+					<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 [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 [docs](https://revealjs.com/markdown/).
@@ -197,6 +266,25 @@
 					</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>
@@ -207,7 +295,10 @@
 						<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.
@@ -220,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> -
@@ -247,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','dist/theme/black.css'); return false;">Black (default)</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/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>
 
@@ -267,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 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">
+							<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-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://static.slid.es/reveal/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://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;">
+					<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>
@@ -292,26 +461,48 @@
 					</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>
 
@@ -367,11 +558,19 @@
 				<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>
 
@@ -385,18 +584,36 @@
 
 				<section>
 					<h2>Speaker View</h2>
-					<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>
+						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://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>
+					<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>
@@ -411,7 +628,8 @@
 				<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.on( 'customevent', function() {
@@ -423,7 +641,8 @@ Reveal.on( '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>
 
@@ -433,30 +652,42 @@ Reveal.on( 'customevent', function() {
 						<li>Right-to-left support</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/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>
 		</div>
 
+		<!-- Use the built assets if you want to run reveal.js without a web server -->
+		<!--
 		<script src="dist/reveal.js"></script>
-		<script src="plugin/zoom/zoom.js"></script>
-		<script src="plugin/notes/notes.js"></script>
-		<script src="plugin/search/search.js"></script>
-		<script src="plugin/markdown/markdown.js"></script>
-		<script src="plugin/highlight/highlight.js"></script>
-		<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 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';
 
 			// Also available as an ES module, see:
 			// https://revealjs.com/initialization/
@@ -467,10 +698,8 @@ Reveal.on( 'customevent', function() {
 				hash: true,
 
 				// Learn about plugins: https://revealjs.com/plugins/
-				plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
+				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

@@ -1,30 +1 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v4.0 | 20180602
-   License: none (public domain)
-*/
-
-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;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, main, menu, nav, section {
-  display: block;
-}
+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 { }

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

@@ -1,10 +0,0 @@
-@font-face {
-    font-family: 'League Gothic';
-    src: url('./league-gothic.eot');
-    src: url('./league-gothic.eot?#iefix') format('embedded-opentype'),
-         url('./league-gothic.woff') format('woff'),
-         url('./league-gothic.ttf') format('truetype');
-
-    font-weight: normal;
-    font-style: normal;
-}

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

@@ -1,39 +0,0 @@
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-regular.eot');
-    src: url('./source-sans-pro-regular.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-regular.woff') format('woff'),
-         url('./source-sans-pro-regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-italic.eot');
-    src: url('./source-sans-pro-italic.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-italic.woff') format('woff'),
-         url('./source-sans-pro-italic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-semibold.eot');
-    src: url('./source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-semibold.woff') format('woff'),
-         url('./source-sans-pro-semibold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Source Sans Pro';
-    src: url('./source-sans-pro-semibolditalic.eot');
-    src: url('./source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'),
-         url('./source-sans-pro-semibolditalic.woff') format('woff'),
-         url('./source-sans-pro-semibolditalic.ttf') format('truetype');
-    font-weight: 600;
-    font-style: italic;
-}