Merge pull request #21 from gavinr/dev-summit-2023

Spring 2023 updates
Esri · Dec 9, 2022 · fee262b · fee262b
2 parents f59afce + 0050cce
commit fee262b
Show file tree

Hide file tree

Showing 93 changed files with 5,123 additions and 3,482 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,5 +8,4 @@ out/
 log/*.log
 tmp/**
 node_modules/
-.sass-cache
-dist/*.map
+.sass-cache
diff --git a/README.md b/README.md
@@ -2,17 +2,16 @@
 
 > Esri branded reveal.js slide deck templates
 
-A jumpstart for folks that want to give a presentation using [reveal.js](https://github.com/hakimel/reveal.js/) using a slide deck template that matches the ones for PowerPoint.
+A jump-start for folks that want to give a presentation using [reveal.js](https://github.com/hakimel/reveal.js/) using a slide deck template that matches the ones for PowerPoint.
 
 <p align="center">
-  <a href="https://esri.github.io/reveal.js/uc-2022-technical-workshops.html"><img src="img/project-preview.gif" alt="project preview" /></a>
+  <a href="https://esri.github.io/reveal.js/dev-summit-2023.html"><img src="img/project-preview.gif" alt="project preview" /></a>
 </p>
 
 Live demos:
 
-* [2022 User Conference - Technical Workshops](https://esri.github.io/reveal.js/uc-2022-technical-workshops.html)
-* [2022 User Conference - Pre-conference Seminars](https://esri.github.io/reveal.js/uc-2022-preconference-seminars.html)
-* [2022 User Conference - User Presentations](https://esri.github.io/reveal.js/uc-2022-user-presentations.html)
+- [Federal GIS Conference 2023](https://esri.github.io/reveal.js/fed-gis-2023.html)
+- [Developer Summit 2023](https://esri.github.io/reveal.js/dev-summit-2023.html)
 
 For archived older versions, please see [releases](https://github.com/esri/reveal.js/releases).
 
@@ -24,7 +23,7 @@ See: [reveal.js documentation](https://github.com/hakimel/reveal.js/blob/master/
 
 ## License
 
-Copyright (c) 2018 Esri
+Copyright (c) 2022 Esri
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

diff --git a/css/layout.scss b/css/layout.scss
@@ -16,7 +16,7 @@
 	box-sizing: border-box;
 }
 
-// Text that auto-fits it's container
+// Text that auto-fits its container
 .reveal .r-fit-text {
 	display: inline-block; // https://github.com/rikschennink/fitty#performance
 	white-space: nowrap;

diff --git a/css/print/paper.scss b/css/print/paper.scss
@@ -141,6 +141,11 @@
 
 			transform: none !important;
 		}
+
+		.reveal .r-fit-text {
+			white-space: normal !important;
+		}
+
 		.reveal section img {
 			display: block;
 			margin: 15px 0px;

diff --git a/css/print/pdf.scss b/css/print/pdf.scss
@@ -100,7 +100,6 @@ html.print-pdf {
 		box-shadow: none;
 	}
 
-
 	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
 	.reveal .backgrounds {
 		display: none;

diff --git a/css/reveal.scss b/css/reveal.scss
@@ -33,6 +33,16 @@ html.reveal-full-page {
 	color: #000;
 }
 
+// Force the presentation to cover the full viewport when we
+// enter fullscreen mode. Fixes sizing issues in Safari.
+.reveal-viewport:fullscreen {
+	top: 0 !important;
+	left: 0 !important;
+	width: 100% !important;
+	height: 100% !important;
+	transform: none !important;
+}
+
 
 /*********************************************
  * VIEW FRAGMENTS
@@ -713,6 +723,8 @@ $controlsArrowAngleActive: 36deg;
 
 .reveal .slides>section.past,
 .reveal .slides>section.future,
+.reveal .slides>section.past>section,
+.reveal .slides>section.future>section,
 .reveal .slides>section>section.past,
 .reveal .slides>section>section.future {
 	opacity: 0;

diff --git a/demo.html b/demo.html
@@ -52,7 +52,7 @@ <h2>Vertical Slides</h2>
 						<p>Slides can be nested inside of each other.</p>
 						<p>Use the <em>Space</em> key to navigate through all slides.</p>
 						<br>
-						<a href="#" class="navigate-down">
+						<a href="#/2/1" class="navigate-down">
 							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
@@ -273,6 +273,11 @@ <h2>Slide Backgrounds</h2>
 							<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>

diff --git a/dev-summit-2023.html b/dev-summit-2023.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+
+    <title>Esri Developer Summit</title>
+
+    <link rel="stylesheet" href="dist/reset.css" />
+    <link rel="stylesheet" href="dist/reveal.css" />
+    <link rel="stylesheet" href="dist/theme/black.css" />
+
+    <!-- Override the Reveal theme variables: -->
+    <!-- https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss -->
+    <style type="text/css">
+      :root {
+        /* Color from slides */
+        --r-background-color: #000;
+
+        /* Main text color */
+        --r-main-color: #fff;
+
+        /* Arial font is recommended */
+        --r-heading-font: Arial, Helvetica Neue, Helvetica, sans-serif;
+        --r-main-font: Arial, Helvetica Neue, Helvetica, sans-serif;
+
+        /* For consistency with the template: */
+        --r-heading-font-weight: normal;
+        --r-heading-text-transform: none;
+        --r-heading-text-shadow: none;
+
+        /* Section subheader color per theme */
+        --r-section-subhead-color: #eaff46;
+      }
+    </style>
+
+    <!-- Theme used for syntax highlighted code -->
+    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
+  </head>
+  <body>
+    <div class="reveal">
+      <div class="slides">
+        <section
+          data-background="img/2023/dev/01.png"
+          data-background-size="contain"
+        >
+          <h1 style="text-align: right; font-size: 60px; margin-top: 35%">
+            Presentation Title
+          </h1>
+          <p
+            style="
+              text-align: right;
+              font-size: 30px;
+              color: var(--r-section-subhead-color);
+            "
+          >
+            Name(s)
+          </p>
+          <p style="text-align: right; font-size: 30px">
+            Slides:
+            <a href="http://bit.ly/abc123"><code>http://bit.ly/abc123</code></a>
+          </p>
+        </section>
+
+        <section data-markdown data-background="img/2023/dev/02.png">
+          <script type="text/template">
+            ## Content Headline
+
+            - Bullet 1
+            - Bullet 2
+            - Bullet 3
+          </script>
+        </section>
+
+        <section data-markdown data-background="img/2023/dev/03.png">
+          <script type="text/template">
+            ## Content Headline
+
+            Code block support:
+
+            ```js []
+            const hello = 'Hello';
+            const world = 'World';
+            alert(`${hello} ${world}!`);
+            ```
+          </script>
+        </section>
+
+        <section data-background="img/2023/dev/05.png">
+          <h2 style="text-align: left">Section Title</h2>
+          <p style="text-align: left; color: var(--r-section-subhead-color)">
+            Section Subtitle
+          </p>
+        </section>
+
+        <section data-background="img/2023/dev/04.png">
+          <h2 style="text-align: right">Demo Title</h2>
+          <p style="text-align: right; color: var(--r-section-subhead-color)">
+            Demo Subtitle
+          </p>
+        </section>
+
+        <!-- FEEDBACK SLIDE: -->
+        <!-- <section data-markdown data-background="img/2023/dev/06.png"></section> -->
+
+        <!-- ESRI LOGO SLIDE: -->
+        <section data-markdown data-background="img/2023/dev/06.png"></section>
+      </div>
+    </div>
+
+    <script src="dist/reveal.js"></script>
+    <script src="plugin/notes/notes.js"></script>
+    <script src="plugin/markdown/markdown.js"></script>
+    <script src="plugin/highlight/highlight.js"></script>
+    <script>
+      // More info about initialization & config:
+      // - https://revealjs.com/initialization/
+      // - https://revealjs.com/config/
+      Reveal.initialize({
+        hash: true,
+        width: 1920,
+        height: 1080,
+
+        // Learn about plugins: https://revealjs.com/plugins/
+        plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
+      });
+    </script>
+  </body>
+</html>
diff --git a/dist/reveal.css b/dist/reveal.css
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.esm.js.map b/dist/reveal.esm.js.map
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/dist/reveal.js.map b/dist/reveal.js.map
diff --git a/examples/auto-animate.html b/examples/auto-animate.html
@@ -176,6 +176,37 @@ <h3>B1</h3>
 					<h3>B2</h3>
 				</section>
 
+				<section>
+					<section id="stacked-slide-1" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 0px;">A</div>
+					</section>
+					<section id="stacked-slide-2" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 25%;">A</div>
+					</section>
+					<section id="stacked-slide-3" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 50%;">A</div>
+					</section>
+					<section id="stacked-slide-4" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 75%;">A</div>
+					</section>
+				</section>
+
 			</div>
 
 		</div>