Initial commit

themes/reveal-hugo/exampleSite/.forestry/settings.yml

@@ -0,0 +1,12 @@
+---
+new_page_extension: md
+auto_deploy: false
+admin_path: 
+webhook_url: 
+sections: 
+upload_dir: "./exampleSite/static/uploads"
+public_path: "/uploads"
+front_matter_path: ''
+use_front_matter_path: false
+file_template: ":filename:"
+version: 0.38.1

themes/reveal-hugo/exampleSite/assets/custom-theme.scss

@@ -0,0 +1,35 @@
+@import "reveal-js/css/theme/template/mixins";
+@import "reveal-js/css/theme/template/settings";
+
+$backgroundColor: rgb(3, 129, 45);
+
+$mainColor: #fff;
+$headingColor: #fff;
+
+$mainFontSize: 38px;
+$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;
+
+@import "reveal-js/css/theme/template/theme";
+
+section.has-light-background {
+	&, h1, h2, h3, h4, h5, h6 {
+		color: #222;
+	}
+}
+
+.reveal pre {
+	margin: 50px auto;
+}

themes/reveal-hugo/exampleSite/config.toml

@@ -0,0 +1,37 @@
+baseURL = "https://example.com/"
+languageCode = "en-us"
+title = "A Hugo theme for creating Reveal.js presentations"
+disableKinds = ["sitemap", "RSS"]
+theme = "."
+themesDir = "../"
+
+# uncomment for browsing at file:///
+# relativeURLs = true
+# uglyURLs = true
+
+[author]
+name = "Josh Dzielak"
+
+# currently only the unsafe mode for goldmark is supported
+[markup.goldmark.renderer]
+unsafe = true
+
+# choose between Hugo compile-time or Highlight.js
+# syntax highlighting for code inside of code fences
+[markup.highlight]
+codeFences = false  # use highlight.js 
+# codeFences = true  # use hugo highlighting at compile time
+style = "tango"  # set a style for hugo highlighting
+
+[outputFormats.Reveal]
+baseName = "index"
+mediaType = "text/html"
+isHTML = true
+
+[params.reveal_hugo]
+history = true
+
+# used in content/template-example
+[params.reveal_hugo.templates.grey]
+background = "#424242"
+transition = "convex"

themes/reveal-hugo/exampleSite/content/_index.md

@@ -0,0 +1,22 @@
++++
+title = "reveal-hugo"
+description = "A Hugo theme for creating Reveal.js presentations"
+outputs = ["Reveal"]
+[reveal_hugo]
+custom_theme = "reveal-hugo/themes/robot-lung.css"
+margin = 0.2
+highlight_theme = "color-brewer"
+transition = "slide"
+transition_speed = "fast"
+[reveal_hugo.templates.hotpink]
+class = "hotpink"
+background = "#FF4081"
++++
+
+# 📽️
+
+# reveal-hugo
+
+A Hugo theme for creating Reveal.js presentations.
+
+~ made by [@dzello](https://dzello.com/) ~

themes/reveal-hugo/exampleSite/content/bundle-example/continued.md

@@ -0,0 +1,16 @@
++++
++++
+
+If more markdown files are present in the bundle, their contents will be added to the presentation.
+
+---
+
+Specify `weight` in the frontmatter if it's necessary to order them.
+
+---
+
+If you don't want them to be included, specify `layout = "list"` in the front matter instead of `layout = "bundle"`.
+
+---
+
+## THE END

themes/reveal-hugo/exampleSite/content/bundle-example/index.md

@@ -0,0 +1,30 @@
++++
+title = "Bundle example presentation"
+outputs = ["Reveal"]
+layout = "bundle"
+[reveal_hugo]
+theme = "night"
+margin = 0.2
++++
+
+# Page Bundles
+
+---
+
+[Hugo page bundles](https://gohugo.io/content-management/page-bundles/) are a useful way to organize content.
+
+---
+
+To create a reveal-hugo presentation from the `index.md` file of a leaf page bundle, you need to specify the layout manually.
+
+```toml
+layout = "bundle"
+```
+
+---
+
+Why? By default, reveal-hugo doesn't create pages for single template types (foo.md), only for list template types (_index.md).
+
+---
+
+This technique can also be used to output an HTML file for any section of a presentation, should you need to.

themes/reveal-hugo/exampleSite/content/custom-theme-example/_index.md

@@ -0,0 +1,74 @@
++++
+title = "Custom theme example presentation"
+outputs = ["Reveal"]
+[reveal_hugo]
+custom_theme = "custom-theme.scss"
+custom_theme_compile = true
++++
+
+## 🖌 ️
+
+## Custom Themes
+
+*with Hugo Pipes*
+
+---
+
+This presentation uses a custom Reveal.js theme written in SCSS that is compiled by Hugo, using [Hugo pipes](https://gohugo.io/hugo-pipes/).
+
+---
+
+Hugo pipes compiles the source code of the theme, located in `assets/custom-theme.scss`, into CSS.
+
+---
+
+## 😄
+
+No separate build process is required, which means you can iterate on your theme and your content at the same time.
+
+---
+
+To set a custom theme and use Hugo to compile it:
+
+```toml
+[reveal_hugo]
+custom_theme = "custom-theme.scss"
+custom_theme_compile = true
+```
+
+`custom-theme.scss` must live in the `assets` folder.
+
+---
+
+To pass compilation options, use the `custom_theme_options` param:
+
+```toml
+[reveal_hugo.custom_theme_options]
+targetPath = "css/custom-theme.css"
+enableSourceMap = true
+```
+
+See all the [available options](https://gohugo.io/hugo-pipes/scss-sass/#options).
+
+---
+
+Note: to use a custom theme that doesn't need compilation, put it in the `static` directory and do not set the `custom_theme_compile` parameter. It will be served to the browser directly.
+
+---
+
+Write a custom Reveal.js theme in four steps:
+
+```text
+1. Import `mixins` and `settings` from the templates directory
+2. Override variables and functions for colors, fonts and sizes
+3. Import `theme` from the templates directory
+4. Add any additional selectors to override the built CSS
+```
+
+---
+
+See the [Reveal.js theme docs](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md) to learn what overrides are possible.
+
+---
+
+See `assets/custom-theme.scss` or any file in `assets/reveal-js/css/theme/source` for an example.

themes/reveal-hugo/exampleSite/content/extending-layout-example/_index.md

@@ -0,0 +1,53 @@
++++
+title = "Extend layout with configuration"
+outputs = ["Reveal"]
+[reveal_hugo]
+theme = "night"
+margin = 0.2
+custom_css = "css/custom.css"
+custom_js = "js/custom.js"
++++
+
+### Extending an existing layout
+
+If you are using an existing theme and you want to a specific CSS class or add a dynamic function using javascript. It is possible to extend existing layout.
+
+---
+
+### Extending CSS
+
+You can use `partials` or you can specify `custom_css` in your configuration :
+
+```toml
+[reveal_hugo]
+custom_css = "css/custom.css"
+```
+<small>
+The `custom.css` can be present in `static/css/custom.css`
+</small>
+
+---
+
+### Extending with javascript
+
+Same as CSS you can extend your presentation with javascript using `partials` or with `custom_js` in your configuration:
+
+```toml
+[reveal_hugo]
+custom_js = "js/custom.js"
+```
+
+<small>
+The `custom.js` can be present in `static/js/custom.js`
+</small>
+
+---
+
+{{< slide class="custom" id="customjs" >}}
+## Extend layout example
+Here the slide has an additional css class `custom` using `slide` *shortcode*. This class is hosted in a custom CSS.
+
+If you click on this text background-color will using a custom javascript file. 
+
+
+

themes/reveal-hugo/exampleSite/content/highlightjs-linenumbers-example/_index.md

@@ -0,0 +1,160 @@
++++
+title = "Reveal.js 3.9.0 highlighting example"
+outputs = ["Reveal"]
+
+[reveal_hugo]
+theme = "white"
+highlight_theme = "vs"
++++
+
+## Multiline highlighting with Highlight.js
+
+---
+
+This presentation shows the use of the [new highlighting features](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0).
+
+---
+
+## Prerequisite
+
+Disable `codeFences` in to your `config.toml` to prevent Hugo's built-in highlighting for code inside of `---` fences.
+
+{{< highlight toml "style=github" >}}
+[markup.highlight]
+codeFences = false
+{{< /highlight >}}
+
+---
+
+## Theme
+
+Specify a theme for Highlight.js in `config.toml`
+
+{{< highlight toml "style=github" >}}
+[params.reveal_hugo]
+highlight_theme = "github"
+{{< /highlight >}}
+
+---
+
+...or in the `_index.md` front matter
+
+{{< highlight toml "style=github" >}}
+[reveal_hugo]
+highlight_theme = "github"
+{{< /highlight >}}
+
+---
+
+## Usage
+
+The line highlighting is configured by adding `{}` immediately after the language selection of the markdown code block.
+
+{{< highlight md >}}  
+```foo{}
+
+```
+{{< /highlight >}}
+
+---
+
+## Just line numbers
+
+`{}`
+
+{{< highlight md >}}  
+```go{}
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+{{< /highlight >}}
+   
+```go{}
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+
+---
+
+## Highlight specific lines
+
+`{<line numbers separated by comma>}`
+
+{{< highlight md >}}
+```go{1,3-5}
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+{{< /highlight >}}
+```go{1,3-5}
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+
+---
+
+## Multi step highlight
+
+`{<line numbers separated by pipe>}`
+
+{{< highlight md >}}
+```go{1|2|3-5}
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+{{< /highlight >}}
+
+```go{1|2|3-5}
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+---
+
+## Hiding the line numbers
+
+There is no Reveal.js parameter to use line highlighting *without* line numbers. 
+However it can be achieved by adding the some [custom CSS](https://github.com/dzello/reveal-hugo#adding-html-to-the-layout).
+
+{{< highlight html "style=github" >}}
+<style>
+  .hljs-ln-numbers {
+    display: none;
+  }
+</style>
+{{< /highlight >}}
+
+---
+
+💡 Put the custom CSS in either of these partials:
+
+```text
+# for all presentations
+layouts/partials/reveal-hugo/body.html
+```
+
+```text
+# for one presentation
+layouts/partials/{presentation-name}/reveal-hugo/body.html
+```
+
+---
+
+Thanks!

themes/reveal-hugo/exampleSite/content/home/configuration.md

@@ -0,0 +1,170 @@
++++
+weight = 21
++++
+
+# Configuration
+
+Place configuration values in `config.toml` or a presentation's front matter (`_index.md`).
+
+---
+
+## Reveal.js themes
+
+Themes control the look and feel of your presentation. Set the `theme` param to any [valid Reveal.js theme](https://github.com/hakimel/reveal.js/#theming).
+
+```toml
+[params.reveal_hugo]
+theme = "moon"
+```
+
+---
+
+## Use a custom theme
+
+To use a custom Reveal.js theme, place the CSS file in the `static` directory and set the `custom_theme` param.
+
+```toml
+[params.reveal_hugo]
+custom_theme = "reveal-hugo/themes/robot-lung.css"
+```
+
+---
+
+### Use a custom theme (advanced)
+
+To use Hugo pipes to build a custom Reveal.js theme, place the source file (SCSS / PostCSS) in the `assets` directory and set the `custom_theme_compile` param.
+
+```toml
+[params.reveal_hugo]
+custom_theme = "reveal-hugo/themes/custom-theme.scss"
+custom_theme_compile = true
+```
+
+<small>
+
+💡 See the [custom theme example presentation](/custom-theme-example/) for more details.
+
+</small>
+
+---
+
+## Bundled themes
+
+reveal-hugo comes with 2 extra Reveal.js themes:
+
+- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one)
+- [sunblind](https://github.com/dzello/revealjs-themes#sunblind)
+
+<br>
+
+<small>
+
+They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).
+
+</small>
+
+---
+
+## Reveal.js params
+
+Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
+
+```toml
+[params.reveal_hugo]
+history = true
+slide_number = true
+transition = 'zoom'
+transition_speed = 'fast'
+```
+
+[Full list of params](https://github.com/hakimel/reveal.js/#configuration)
+
+---
+
+## highlight.js themes
+
+To change the syntax highlighting theme, set the `highlight_theme`
+to a valid [highlight.js theme name](https://highlightjs.org/static/demo/).
+
+```toml
+[params.reveal_hugo]
+highlight_theme = "zenburn"
+```
+
+---
+
+## Extending the layout
+
+Use partials to add HTML to the page for one or all presentations at a time.
+
+<small>
+💡 This is the recommended way to add script and style tags to customize your presentations.
+</small>
+
+---
+
+Here is where to put partials for different presentations and places in the DOM.
+<br><br>
+
+| Presentation | Before &lt;/head&gt;            | Before &lt;/body&gt;            |
+|--------------|---------------------------------|---------------------------------|
+| All          | reveal-hugo/head.html           | reveal-hugo/body.html           |
+| Root         | home/reveal-hugo/head.html      | home/reveal-hugo/body.html      |
+| Section      | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html |
+
+&nbsp;
+
+<small>
+
+💡 You can also create an `end.html` to put content before the end of the `.reveal` div tag.
+
+</small>
+
+---
+
+## Custom CSS Example
+
+In `home/reveal-hugo/head.html`:
+
+```html
+<style>
+.reveal section h1 {
+  color: blue;
+}
+</style>
+```
+
+---
+
+## Custom JS Example
+
+In `home/reveal-hugo/body.html`:
+
+```html
+<script type="text/javascript">
+Reveal.addEventListener('slidechanged', function(event) {
+  console.log("🎞️ Slide is now " + event.indexh);
+});
+</script>
+```
+
+---
+
+### Extending the layout 
+#### (alternative)
+
+You can declare a custom CSS or javascript in your configuration.
+
+```toml
+[reveal_hugo]
+custom_css = "css/custom.css"
+custom_js = "js/custom.js"
+```
+
+<small>
+
+These files can be located in `static/css`, `static/js` folder 
+
+💡 See the [extending layout example](/extending-layout-example/#) for more details.
+
+</small>

themes/reveal-hugo/exampleSite/content/home/features.md

@@ -0,0 +1,25 @@
++++
+weight = 10
++++
+
+## What's included?
+
+- All Reveal.js HTML, CSS and JS (v3.9.2)
+- All out-of-the-box Reveal.js themes
+- Two custom Reveal.js themes (including this one)
+
+<br>
+<br>
+
+[see the code on github](https://github.com/dzello/reveal-hugo)
+
+---
+
+## Features
+
+- Write slides in Markdown in one or more files
+- Shortcodes for fragments, sections, slides & more
+- All Reveal.js parameters can be customized
+- Any Hugo section can be output as a presentation
+- Supports offline development or using a CDN
+

themes/reveal-hugo/exampleSite/content/home/resources.md

@@ -0,0 +1,43 @@
++++
+weight = 42
++++
+
+# Resources
+
+---
+
+## Code and docs
+
+- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
+- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
+
+---
+
+## External resources
+
+- [Reveal.js](https://revealjs.com/)
+- [Hugo docs](https://gohugo.io/)
+- [Hugo output format docs](https://gohugo.io/templates/output-formats/)
+
+---
+
+## Designed to...
+
+- Deploy to [Netlify](https://netlify.com/)
+- Edit with [Forestry](https://forestry.io/)
+
+---
+
+# 🙏
+
+Contribute by opening issues and pull requests.
+
+---
+
+# Thanks!
+
+---
+
+# ↩️
+
+#### [Start over](#)

themes/reveal-hugo/exampleSite/content/home/shortcodes/fragment.md

@@ -0,0 +1,41 @@
++++
+weight = 30
++++
+
+## Fragment
+
+The `fragment` shortcode makes content appear incrementally.
+
+```
+{{%/* fragment */%}} One {{%/* /fragment */%}}
+{{%/* fragment */%}} Two {{%/* /fragment */%}}
+{{%/* fragment */%}} Three {{%/* /fragment */%}}
+```
+
+{{% fragment %}} One {{% /fragment %}}
+{{% fragment %}} Two {{% /fragment %}}
+{{% fragment %}} Three {{% /fragment %}}
+
+---
+
+## Frag
+
+The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute.
+
+```
+{{</* frag c="One" */>}}
+{{</* frag c="Two" */>}}
+{{</* frag c="Three" */>}}
+```
+
+{{< frag c="One" >}}
+{{< frag c="Two" >}}
+{{< frag c="Three" >}}
+
+---
+
+Both `fragment` and `frag` accept two additional parameters:
+
+- `class`: sets the class of the wrapping `span` element
+- `index`: controls the order in which sections will appear
+

themes/reveal-hugo/exampleSite/content/home/shortcodes/introduction.md

@@ -0,0 +1,11 @@
++++
+weight = 29
++++
+
+# Shortcodes
+
+---
+
+Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown.
+
+[Shortcode documentation](https://gohugo.io/content-management/shortcodes/)

themes/reveal-hugo/exampleSite/content/home/shortcodes/markdown.md

@@ -0,0 +1,38 @@
++++
+weight = 36
++++
+
+{{< markdown >}}
+
+## Markdown
+
+Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode.
+
+```markdown
+{{</* markdown */>}}
+
+# Hello world!
+
+{{</* /markdown */>}}
+```
+
+<br>
+<small>
+💡 Make sure to use the `{{</* */>}}` shortcode syntax to avoid rendering by Hugo.
+</small>
+
+---
+
+<!-- .slide: data-background="#FF4081" -->
+
+Reveal.js markdown uses HTML comments to change slide properties, like background color.
+
+```markdown
+{{</* markdown */>}}
+<!-- .slide: data-background="#FF4081" -->
+# I'm a colorful slide
+{{</* /markdown */>}}
+```
+
+{{< /markdown >}}
+

themes/reveal-hugo/exampleSite/content/home/shortcodes/other.md

@@ -0,0 +1,49 @@
++++
+weight = 38
++++
+
+## Notes
+
+Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes.
+
+```markdown
+---
+
+{{%/* note */%}}
+- You found the **speaker notes**!
+{{%/* /note */%}}
+
+---
+```
+
+{{% note %}}
+- You found the **speaker notes**!
+{{% /note %}}
+
+---
+
+{{< slide notes="You found the notes!" >}}
+
+## Notes
+
+You can also add notes with the `slide` shortcode and `notes` attribute:
+
+```markdown
+---
+
+{{%/* slide notes="You found the notes!" */%}}
+
+---
+```
+
+---
+
+<section data-noprocess>
+  <h2>Write slides in HTML</h2>
+  <p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</p>
+  <pre>
+&lt;section data-noprocess&gt;
+  &lt;h1&gt;Hello world!&lt;/h1&gt;
+&lt;/section&gt;</pre>
+  <small>💡 This is useful if you can't get Markdown to output exactly what you want.</small>
+</section>

themes/reveal-hugo/exampleSite/content/home/shortcodes/section.md

@@ -0,0 +1,44 @@
++++
+weight = 33
++++
+
+{{% section %}}
+
+## Section
+
+The `section` shortcode groups slides into a **vertical display**.
+
+<br>
+<small>
+use the down arrow or swipe down to continue
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+Put the shortcode around the slides you want to group together.
+
+```markdown
+{{%/* section */%}}
+
+## Section slide 1
+
+---
+
+## Section slide 2
+
+{{%/* /section */%}}
+```
+
+Keep going down.
+
+---
+
+## That's it!
+
+Use the right arrow or swipe right to continue.
+
+{{% /section %}}
+
+

themes/reveal-hugo/exampleSite/content/home/shortcodes/slide.md

@@ -0,0 +1,250 @@
++++
+weight = 34
++++
+
+## Slide
+
+Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
+
+---
+
+{{< slide class="hello" >}}
+
+## Slide
+
+Add the shortcode above the slide's content, below the `---`.
+
+```markdown
+---
+
+{{</* slide class="hello" */>}}
+
+## Hello, world!
+
+---
+```
+
+---
+
+{{< slide transition="zoom" transition-speed="fast" >}}
+
+## Custom slide 1
+
+<small>Did you notice? This slide has a fast zoom transition.</small>
+
+```markdown
+---
+
+{{</* slide transition="zoom" transition-speed="fast" */>}}
+
+## Custom slide 1
+
+---
+```
+
+---
+
+{{< slide background-color="#FF4081" >}}
+
+## Custom slide 2
+
+<small>This slide has a different background color.</small>
+
+```markdown
+---
+
+{{</* slide background-color="#FF4081" */>}}
+
+## Custom slide 2
+
+---
+```
+
+---
+
+{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}
+
+## Custom slide 3
+
+<small>This slide has a background image.</small>
+
+```markdown
+---
+
+{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
+
+---
+```
+
+<small>(credit <a href="https://unsplash.com/@alexlitvin">Alex Litvin</a>)</small>
+
+---
+
+{{< slide id="custom-slide" >}}
+
+💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
+<br><br>
+
+```markdown
+---
+
+{{</* slide id="custom-slide" */>}}
+
+## Custom slide
+
+---
+```
+
+---
+
+```markdown
+[Try the link](#custom-slide)
+```
+
+<br>
+
+[Try the link](#custom-slide)
+
+---
+
+Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js):
+
+- `autoslide`
+- `state`
+- `background`
+- `background-color`
+- `background-image`
+- `background-size`
+- `background-position`
+- `background-repeat`
+
+---
+
+- `background-video`
+- `background-video-loop`
+- `background-video-muted`
+- `background-interactive`
+- `background-iframe`
+- `background-transition`
+- `transition` (can have different in and out transitions)
+- `transition-speed`
+- `notes` (can also use the note shortcode)
+- `timing`
+
+---
+
+{{% section %}}
+
+## Slide templates
+
+Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.
+
+<br>
+<small>
+navigate down to learn more
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name:
+
+```toml
+[reveal_hugo.templates.hotpink]
+class = "hotpink"
+background = "#FF4081"
+```
+
+---
+
+{{< slide template="hotpink" >}}
+
+Apply the template using the **template** attribute of the slide shortcode:
+
+```markdown
+{{</* slide template="hotpink" */>}}
+
+# I'm a hot pink slide!
+```
+
+---
+
+If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:
+
+- page
+- section (_index.md)
+- site (config.toml)
+
+{{% /section %}}
+
+---
+
+{{% section %}}
+
+{{< slide content="home.reusable" >}}
+
+---
+
+{{< slide content="common.nested.reusable" >}}
+
+{{% /section %}}
+
+---
+
+{{% section %}}
+
+## Slide-specific CSS
+
+Add more variety to your presentation by applying slide-specific CSS.
+
+<br>
+<small>
+navigate down to learn more
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+First, use the `slide` shortcode to give the slide a class:
+
+```markdown
+---
+
+{{</* slide class="side-by-side" */>}}
+
+# 📈
+
+# 📊
+
+---
+```
+
+---
+
+Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors:
+
+```html
+<style>
+.reveal section.side-by-side h1 {
+  position: absolute;
+}
+.reveal section.side-by-side h1:first-of-type {
+  left: 25%;
+}
+.reveal section.side-by-side h1:nth-of-type(2) {
+  right: 25%;
+}
+</style>
+```
+
+---
+
+{{< slide class="side-by-side" >}}
+
+# 📈
+
+# 📊
+
+{{% /section %}}

themes/reveal-hugo/exampleSite/content/home/usage.md

@@ -0,0 +1,109 @@
++++
+weight = 20
++++
+
+# Usage
+
+---
+
+## Prerequisite
+
+First, add this to your `config.toml`:
+
+```toml
+[outputFormats.Reveal]
+baseName = "index"
+mediaType = "text/html"
+isHTML = true
+```
+
+---
+
+### Presentation at site root
+
+Create `content/_index.md`:
+
+```markdown
++++
+outputs = ["Reveal"]
++++
+
+# Slide 1
+
+Hello world!
+```
+
+---
+
+### Add slides
+
+Separate them by `---` surrounded by blank lines:
+
+```
+# Slide 1
+
+Hello world!
+
+---
+
+# Slide 2
+
+Hello program!
+```
+
+---
+
+### Add slides with other files
+
+Add slides to `content/home/*.md`
+
+```markdown
++++
+weight = 10
++++
+
+# Slide 3
+
+---
+
+# Slide 4
+```
+
+<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
+
+---
+
+### Presentation at '/{section}/'
+
+Add slides to `content/{section}/_index.md`:
+
+```markdown
++++
+outputs = ["Reveal"]
++++
+
+# Slide 1
+
+---
+
+# Slide 2
+```
+
+---
+
+Add slides from other files in `content/{section}/*.md`
+
+```markdown
++++
+weight = 10
++++
+
+# Slide 3
+
+---
+
+# Slide 4
+```
+
+<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
+

themes/reveal-hugo/exampleSite/content/hugo-hl-example/_index.md

@@ -0,0 +1,113 @@
++++
+title = "Hugo highlighting example"
+outputs = ["Reveal"]
+
+[reveal_hugo]
+theme = "simple"
++++
+
+## Hugo Highlighter Presentation
+
+This is an example of a presentation using Hugo's compile-time syntax highlighter.
+
+---
+
+Reveal.js uses Javascript for syntax highlighting (via Highlight.js). This might slow the presentation down if many slides contain code.
+
+---
+
+Hugo has a built-in [compile-time highlighter](https://gohugo.io/content-management/syntax-highlighting/), and it's lightning fast too!
+
+---
+
+You can enable it using the `highlight` shortcode.
+
+{{< highlight go >}}
+{{</* highlight go */>}}
+
+package main
+ 
+import "fmt"
+ 
+func main() {
+    fmt.Println("Hello world!")
+}
+
+{{</* /highlight */>}}
+{{< /highlight >}}
+
+---
+
+Several options are supported, check [Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/).
+
+{{< highlight go "style=github,linenos=inline,hl_lines=8" >}}
+{{</* highlight go "style=github,linenos=inline,hl_lines=6" */>}}
+
+package main
+ 
+import "fmt"
+ 
+func main() {
+    fmt.Println("Hello world!")
+}
+
+{{</* /highlight */>}}
+{{< / highlight >}}
+
+---
+
+You can also use Hugo's highlighter in markdown code fences, 
+by putting this in `config.toml`:
+
+{{< highlight toml "style=github" >}}
+
+# use Hugo's hl in markdown (with or without a language tag)
+[markup.highlight]
+codeFences = true
+style = "github"
+
+{{< /highlight >}}
+
+(This can only be enabled globally for all presentations.)
+
+---
+
+- Highlight.js is automatically disabled in code blocks highlighted by Hugo.
+- The two highlighters can be even mixed.
+
+{{< highlight go >}}
+package main
+ 
+import "fmt"
+ 
+func main() {
+    fmt.Println("Hello world!")
+}
+{{< / highlight >}}
+
+```go
+package main
+ 
+import "fmt"
+ 
+func main() {
+    fmt.Println("Hello world!")
+}
+```
+
+---
+
+If you don't need highlight.js at all, you can prevent it from loading.
+
+{{< highlight toml "style=github" >}}
+
+# This works both in config.toml and a presentation's front
+# matter. Default plugins include highlight.js, so disable them
+# and load those that we want manually.
+
+[params.reveal_hugo]
+load_default_plugins = false
+plugins = [
+  "reveal-js/plugin/zoom-js/zoom.js",
+  "reveal-js/plugin/notes/notes.js",
+]

themes/reveal-hugo/exampleSite/content/logo-example/_index.md

@@ -0,0 +1,103 @@
++++
+title = "Logo presentation example"
+outputs = ["Reveal"]
+[logo]
+src = "github-logo.png"
+alt = "GitHub logo with Octocat"
+[reveal_hugo]
+custom_theme = "reveal-hugo/themes/robot-lung.css"
+margin = 0.2
++++
+
+## logo-example
+
+This presentation shows how to add a logo to each slide, like the GitHub one you see above.
+
+You can generalize the concept to add any additional markup to your presentations.
+
+---
+
+[See the code for this presentation](https://github.com/dzello/reveal-hugo/blob/master/exampleSite/content/logo-example/_index.md)
+
+---
+
+First, create a partial called `body.html` and put it in this directory:
+
+```text
+layouts/partials/{section}/reveal-hugo/body.html
+```
+
+---
+
+Substitute `{section}` for `home` if you are adding a logo to the presentation at `content/_index.md`. Otherwise, substitute the name of the Hugo section where your presentation lives. 
+
+---
+
+The presentation you're looking at right now is in `content/logo-example`, so the partial to add the logo lives in:
+
+```text
+layouts/partials/logo-example/reveal-hugo/body.html
+```
+
+---
+
+💡 Tip: to make the logo appear in every presentation, put it here:
+
+```text
+layouts/partials/reveal-hugo/body.html
+```
+
+---
+
+💡 Tip: In addition to `body.html`, you can create partials `head.html` and `end.html` in any of those directories. 
+
+---
+
+- head.html: Add markup just before the closing `</head>` tag
+- body.html: Add markup just before the closing `</body>` tag
+- end.html: Add markup just before the closing of the Reveal.js `div.slides` container
+
+---
+
+Once the partial exists in `body.html`, we can add our image tag to it:
+
+```html
+<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">
+```
+
+---
+
+In this example, the src and alt attributes are set to values from the content's front matter or site's configuration, which you can see in `logo-example/_index.md`:
+
+```toml
+[logo]
+src = "/images/github-logo.png"
+alt = "GitHub logo with Octocat"
+```
+
+---
+
+To position the logo, we can add a style tag to `body.html`:
+
+```html
+<style>
+  #logo {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 250px;
+  }
+</style>
+```
+
+<small>
+💡 Depending on the theme you're using, your styles will be different. <br>You may also prefer to put your CSS in an external file or your Reveal.js theme.
+</small>
+
+---
+
+# 🤗
+
+That's it.
+
+Happy Hugo-ing!

themes/reveal-hugo/exampleSite/content/plugin-example/_index.md

@@ -0,0 +1,83 @@
++++
+title = "plugin-example"
+description = "Shows how a Reveal.js plugin can be added and used"
+outputs = ["Reveal"]
+[reveal_hugo]
+theme = "night"
+margin = 0.2
+plugins = ["plugin/gallery/gallery.plugin.js"]
++++
+
+# plugin-example
+
+---
+
+This presentation demonstrates how a Reveal.js plugin can be added.
+
+---
+
+The plugin is called [revealjs-simple-gallery](https://github.com/marcins/revealjs-simple-gallery).
+
+---
+
+It can make any slide an image gallery. Here are a few examples.
+
+---
+
+<ul class="gallery">
+  <li><img src="sample1.jpg" alt="Default settings (Photo by Oscar Fernandez Alonso on Flickr)"></li>
+  <li><img src="sample2.jpg" alt="Default settings (Photo by bullcitydogs on Flickr)"></li>
+  <li><img src="sample3.jpg" alt="Default settings (Photo by Lance McCord on Flickr)"></li>
+</ul>
+
+---
+
+<ul class="gallery" data-iterations="0" data-interval="1">
+  <li><img src="sample1.jpg" alt="Infinite iterations, fast transition (Photo by Oscar Fernandez Alonso on Flickr)"></li>
+  <li><img src="sample2.jpg" alt="Infinite iterations, fast transition (Photo by bullcitydogs on Flickr)"></li>
+  <li><img src="sample3.jpg" alt="Infinite iterations, fast transition (Photo by Lance McCord on Flickr)"></li>
+</ul>
+
+---
+
+<ul class="gallery" data-iterations="2" data-interval="2" data-mode="full-screen">
+  <li><img src="sample1.jpg" alt="Full screen, two iterations, slow transition (Photo by Oscar Fernandez Alonso on Flickr)"></li>
+  <li><img src="sample2.jpg" alt="Full screen, two iterations, slow transition (Photo by bullcitydogs on Flickr)"></li>
+  <li><img src="sample3.jpg" alt="Full screen, two iterations, slow transition (Photo by Lance McCord on Flickr)"></li>
+</ul>
+
+---
+
+See the [revealjs-simple-gallery GitHub repo](https://github.com/marcins/revealjs-simple-gallery) to learn about more customization options.
+
+---
+
+These were the steps to use this plugin for this reveal-hugo presentation.
+
+---
+
+### 1
+
+Copy the plugin CSS and JavaScript into the static directory
+
+---
+
+### 2
+
+Add the JavaScript file path to the `plugins` field in the front matter
+
+---
+
+### 3
+
+Create a `head.html` partial inside of `layouts/partials/plugin-example/reveal-hugo`
+
+---
+
+### 4
+
+In `head.html`, add a stylesheet link tag that loads the plugin CSS
+
+---
+
+## THE END

themes/reveal-hugo/exampleSite/content/section-example/_index.md

@@ -0,0 +1,19 @@
++++
+title = "Section presentation example"
+outputs = ["Reveal"]
+[reveal_hugo]
+theme = "night"
+margin = 0.2
++++
+
+# Section Presentation
+
+This is an example of a section presentation.
+
+---
+
+Section presentations are completely separate from the root presentation and each other.
+
+---
+
+Additional content files can be placed in the section and will be added to the presentation in the order of their weight.

themes/reveal-hugo/exampleSite/content/section-example/presentation.md

@@ -0,0 +1,8 @@
++++
+weight = 10
++++
+
+# Including...
+
+Content from files like this one.
+

themes/reveal-hugo/exampleSite/content/template-example/_index.md

@@ -0,0 +1,45 @@
++++
+title = "Template presentation"
+outputs = ["Reveal"]
+[reveal_hugo]
+theme = "night"
+margin = 0.2
+[reveal_hugo.templates.blue]
+background = "#0011DD"
+transition = "zoom"
++++
+
+## Template Example
+
+---
+
+This presentation shows how to take advantage of reveal-hugo's slide template feature.
+
+---
+
+Slide templates let you specify groups of slide attributes in one place and reuse them throughout the presentation.
+
+---
+
+{{< slide template="blue" >}}
+
+Here's an example of using a template called `blue`, defined in the front matter of this presentation's `_index.md` file.
+
+---
+
+The template can contain any valid slide customization params:
+
+```toml
+[reveal_hugo.templates.blue]
+background = "#0011DD"
+transition = "zoom"
+```
+
+---
+
+Then add it to any slide using the slide shortcode:
+
+```
+{{</* slide template="blue" */>}}
+```
+

themes/reveal-hugo/exampleSite/content/template-example/continued.md

@@ -0,0 +1,16 @@
++++
++++
+
+{{< slide template="grey" >}}
+
+Templates can be specified in `config.toml` as well, for reusability across multiple presentations.
+
+```
+[params.reveal_hugo.templates.grey]
+background = "#424242"
+transition = "convex"
+```
+
+---
+
+## THE END

themes/reveal-hugo/exampleSite/data/common/nested.toml

@@ -0,0 +1,19 @@
+reusable = '''
+
+You can organize reusables into folder.
+
+An an `example` key in `data/common/nested.toml`
+
+```toml
+example = "I'm a slide"
+```
+<br>
+
+Set the `content` attribute to "common.nested.example":
+
+```markdown
+{{< slide content="common.nested.example" >}}
+```
+
+'''
+

themes/reveal-hugo/exampleSite/data/home.toml

@@ -0,0 +1,46 @@
+# Note: it seems that under goldmark, markdown in data templates has issues.
+#       In particular "---" is converted to <hr> even inside code fences!
+
+reusable = '''
+
+## Reusable slides
+
+Store markdown in a [data template](https://gohugo.io/templates/data-templates/) and reuse it in multiple sections or presentations.
+
+<br>
+<small>
+navigate down to learn more
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+Add a `example` key to data/home.toml:
+
+```toml
+example = "I'm a slide"
+```
+<br>
+
+Set the `content` attribute to "home.example":
+
+```markdown
+{{< slide content="home.example" >}}
+```
+
+---
+
+💡 Each data template entry can contain one or more slides, separated by `---` with newlines.
+
+---
+
+💡 All other slide shortcode attributes (background, transition, etc.) can be used and will be applied to each slide in the data template entry.
+
+---
+
+💡 Adding a new file in `data` folder requires to restart `hugo`
+
+💡 Symbolinc links are not allowed in `data` folder
+
+'''

themes/reveal-hugo/exampleSite/layouts/partials/highlightjs-linenumbers-example/reveal-hugo/body.html

@@ -0,0 +1,6 @@
+<!-- hide Highlight.js line numbers -->
+<style>
+  .hljs-ln-numbers {
+    display: none;
+  }
+</style>

themes/reveal-hugo/exampleSite/layouts/partials/home/reveal-hugo/body.html

@@ -0,0 +1,9 @@
+<!-- This partial is included before the end of the body tag for only the 'example' presentation -->
+<!-- A common use would be to add JavaScript to the page to customize interactions -->
+<!-- The Reveal.js JavaScript API is located at https://github.com/hakimel/reveal.js/#api -->
+<script type="text/javascript">
+// Log the current slide to the console when it changes
+Reveal.addEventListener('slidechanged', function(event) {
+  console.log("🎞️ Slide is now " + event.indexh);
+});
+</script>

themes/reveal-hugo/exampleSite/layouts/partials/home/reveal-hugo/end.html

@@ -0,0 +1,4 @@
+<div class="line top"></div>
+<div class="line bottom"></div>
+<div class="line left"></div>
+<div class="line right"></div>

themes/reveal-hugo/exampleSite/layouts/partials/home/reveal-hugo/head.html

@@ -0,0 +1,39 @@
+<!-- This partial is included before the end of the head tag for only the 'example' presentation -->
+<!-- A common use would be to add CSS to the page to customize the theme -->
+<style>
+/* Add padding, margin and a hover effect on code samples */
+.reveal section pre {
+  box-shadow: none;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  border: 1px solid lightgrey;
+}
+.reveal section pre:hover {
+  border: 1px solid grey;
+  transition: border 0.3s ease;
+}
+.reveal section pre > code {
+  padding: 10px;
+}
+.reveal table {
+  font-size: 0.65em;
+}
+/* For slide-specific CSS example */
+.reveal section.side-by-side h1 {
+  position: absolute;
+}
+.reveal section.side-by-side h1:first-of-type {
+  left: 25%;
+}
+.reveal section.side-by-side h1:nth-of-type(2) {
+  right: 25%;
+}
+.reveal section[data-background-image] a,
+.reveal section[data-background-image] p,
+.reveal section[data-background-image] h2 {
+  color: white;
+}
+.reveal section[data-background-image] a {
+  text-decoration: underline;
+}
+</style>

themes/reveal-hugo/exampleSite/layouts/partials/logo-example/reveal-hugo/body.html

@@ -0,0 +1,9 @@
+<style>
+  #logo {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 250px;
+  }
+</style>
+<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">

themes/reveal-hugo/exampleSite/layouts/partials/plugin-example/reveal-hugo/head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/plugin/gallery/gallery.css">

themes/reveal-hugo/exampleSite/static/_redirects

@@ -0,0 +1,2 @@
+# Redirect default Netlify subdomain to primary domain
+https://reveal-hugo.netlify.com/* https://reveal-hugo.dzello.com/:splat 301!

themes/reveal-hugo/exampleSite/static/css/custom.css

@@ -0,0 +1,11 @@
+.custom em{
+    color: #a32843
+}
+
+.custom code{
+    color: #ff2f86
+}
+
+.customjs {
+    background-color: #504e9e
+}

themes/reveal-hugo/exampleSite/static/js/custom.js

@@ -0,0 +1,3 @@
+document.getElementById("customjs").addEventListener("click", function(){
+    this.className += " customjs"
+})

themes/reveal-hugo/exampleSite/static/plugin/gallery/gallery.css

@@ -0,0 +1,67 @@
+.reveal ul.gallery {
+	position: relative;
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	width: 960px;
+	height: 700px;
+}
+
+.reveal ul.gallery[data-mode=full-screen] {
+	width: 100%;
+	height: 100%;
+}
+
+.gallery li {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 960px;
+	height: 700px;
+	opacity: 0;
+	-webkit-transition: opacity 0.3s ease-in-out;
+	-moz-transition: opacity 0.3s ease-in-out;
+	transition: opacity 0.3s ease-in-out;
+}
+
+.gallery[data-mode=full-screen] li {
+	width: 100%;
+	height: 100%;
+	background-size: 100% 100%;
+	background-attachment:fixed;
+    background-position: center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+
+.gallery .active {
+	opacity: 1;
+}
+
+.gallery .inactive {
+	opacity: 0;
+}
+
+.gallery img {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	border: none !important;
+}
+
+.gallery label {
+	display: block;
+	position: absolute;
+	bottom: 20px;
+	min-width: 150px;
+	left: 0;
+	padding: 10px;
+	background-color: rgba(0, 0, 0, 0.6);
+	color: #fff;
+	font-size: 24px;
+}

themes/reveal-hugo/exampleSite/static/plugin/gallery/gallery.plugin.js

@@ -0,0 +1,119 @@
+(function(Gallery) {
+	var galleryTimer, galleryMode;
+
+	Gallery.step = function (items, iterations) {
+		var length = items.length,
+			ptr = 0,
+			loops = 0;
+
+		return function () {
+			if (iterations > 0 && loops === iterations) {
+				return;
+			}
+			items[ptr].className = "inactive";
+			if (ptr === length - 1) {
+				loops++;
+				if (iterations === 0 || loops < iterations) {
+					ptr = 0;
+				}
+			} else {
+				ptr++;
+			}
+			items[ptr].className = "active";
+		};
+	};
+
+	Gallery.start = function (galleryNode, contextNode) {
+		contextNode = contextNode || document.body.firstChild;
+		galleryMode = galleryNode.dataset.mode || 'normal';
+
+		if (galleryMode === 'full-screen') {
+			// FIXME remove depenency on Reveal, have a callback? function
+			// that will get a root node to move full screen slides to (ie. slidesNode)
+
+			// for full screen mode we need to: 
+			// - take the gallery out of the flow and insert it before "slides"
+			// - hide slides
+			// - make it full screen
+
+			var placeholder = document.createElement("div");
+			placeholder.id = "gallery-placeholder";
+			galleryNode.parentNode.replaceChild(placeholder, galleryNode);
+
+			if (contextNode.parentNode) {
+				contextNode.parentNode.insertBefore(galleryNode, contextNode);
+			}
+		}
+
+		var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
+		items.forEach(function (item, index) {
+			if (index === 0) {
+				item.className = "active";
+			} else {
+				item.className = "inactive";
+			}
+			var label = item.querySelector("label");
+			var img = item.querySelector("img");
+
+			if (galleryMode === 'full-screen') {
+				img.style.display = "none";
+				item.style.backgroundImage = "url(" + img.src + ")";
+			} else {
+				img.style.display = "";
+			}
+
+			if (!label && img.attributes.alt) {
+				label = document.createElement("label");
+				label.innerHTML = img.attributes.alt.value;
+				item.appendChild(label);
+			}
+		});
+
+		var iterations = galleryNode.dataset.iterations ? +galleryNode.dataset.iterations : 1;
+		var interval = (galleryNode.dataset.interval || 1) * 1000;
+		galleryTimer = setInterval(Gallery.step(items, iterations), interval);
+	};
+
+	// FIXME Gallery.stop should take elem and root nodes as well
+	Gallery.stop = function (galleryNode, contextNode) {
+		clearInterval(galleryTimer);
+
+		if (galleryMode === "full-screen") {
+			// - put the gallery back where it was
+			var placeholder = document.getElementById("gallery-placeholder");
+			placeholder.parentNode.replaceChild(galleryNode, placeholder);
+
+			var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
+			items.forEach(function (item, index) {
+				var img = item.querySelector("img");
+				item.style.backgroundImage = "";
+				img.style.display = "";
+			});
+		}
+	};
+})(window.Gallery = window.Gallery || {});(function() {
+	if( typeof window.addEventListener === 'function' ) {
+		var slidesNode = document.querySelector(".slides");
+		Reveal.addEventListener("slidechanged", function (event) {
+	    console.log(event)
+			var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
+			if (galleryNode) {
+				Gallery.stop(galleryNode, slidesNode);
+			}
+
+			galleryNode = event.currentSlide.querySelector('.gallery');
+			if (galleryNode) {				
+				Gallery.start(galleryNode, slidesNode);
+			}
+
+		});
+
+		// during initial load
+		if (Reveal.getCurrentSlide()) {
+			var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
+			if (galleryNode) {
+				Gallery.start(galleryNode, slidesNode);
+			}
+		}
+	}
+})();

themes/reveal-hugo/exampleSite/static/reveal-hugo/themes/robot-lung.css

@@ -0,0 +1,340 @@
+/**
+
+  [ robot-lung ]
+
+  A hot pink theme for Reveal.js with Roboto fonts and a colorful border.
+  By Josh Dzielak, https://dzello.com/, License MIT
+
+  The bold border is optional and requires some HTML. To use it:
+
+  1. Add 4 divs to your HTML page:
+    <div class="line top"></div>
+    <div class="line bottom"></div>
+    <div class="line left"></div>
+    <div class="line right"></div>
+
+  2. Set { margin: 0.2 } in the Reveal.js initializer to make sure
+  your presentation content doesn't collide with the frame.
+
+  Like the theme but don't like the colors? Don't fret. Just change
+  $borderColor and/or $linkColor below to something else and rebuild.
+
+  Or if you don't want to rebuild the theme just override the .line background
+  property with some CSS:
+
+  .line {
+    background: <new-color>;
+  }
+
+*/
+@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
+@import url(https://fonts.googleapis.com/css?family=Roboto:700);
+section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
+  color: #141414; }
+
+.reveal .controls {
+  right: 50px;
+  bottom: 50px; }
+
+.line {
+  content: '';
+  position: fixed;
+  background: #FF4081;
+  z-index: 105; }
+  .line.top {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 30px; }
+    @media (max-width: 840px) {
+      .line.top {
+        height: 15px; } }
+  .line.bottom {
+    left: 0;
+    top: auto;
+    bottom: 0;
+    width: 100%;
+    height: 30px; }
+    @media (max-width: 840px) {
+      .line.bottom {
+        height: 15px; } }
+  .line.left {
+    left: 0;
+    top: 0;
+    width: 30px;
+    height: 200%; }
+    @media (max-width: 840px) {
+      .line.left {
+        width: 15px; } }
+  .line.right {
+    left: auto;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 200%; }
+    @media (max-width: 840px) {
+      .line.right {
+        width: 15px; } }
+
+.reveal.has-dark-background .line {
+  display: none; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #fff;
+  background-color: #fff; }
+
+.reveal {
+  font-family: "Roboto Slab", serif;
+  font-size: 32px;
+  font-weight: normal;
+  color: #363636; }
+
+::selection {
+  color: #fff;
+  background: #ffc0d5;
+  text-shadow: none; }
+
+::-moz-selection {
+  color: #fff;
+  background: #ffc0d5;
+  text-shadow: none; }
+
+.reveal .slides > section,
+.reveal .slides > section > section {
+  line-height: 1.3;
+  font-weight: inherit; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #141414;
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: normal;
+  text-transform: uppercase;
+  text-shadow: none;
+  word-wrap: break-word; }
+
+.reveal h1 {
+  font-size: 2.6em; }
+
+.reveal h2 {
+  font-size: 2.2em; }
+
+.reveal h3 {
+  font-size: 1.7em; }
+
+.reveal h4 {
+  font-size: 1.4em; }
+
+.reveal h1 {
+  text-shadow: none; }
+
+/*********************************************
+ * OTHER
+ *********************************************/
+.reveal p {
+  margin: 20px 0;
+  line-height: 1.3; }
+
+/* Ensure certain elements are never larger than the slide itself */
+.reveal img,
+.reveal video,
+.reveal iframe {
+  max-width: 95%;
+  max-height: 95%; }
+
+.reveal strong,
+.reveal b {
+  font-weight: bold; }
+
+.reveal em {
+  font-style: italic; }
+
+.reveal ol,
+.reveal dl,
+.reveal ul {
+  display: inline-block;
+  text-align: left;
+  margin: 0 0 0 1em; }
+
+.reveal ol {
+  list-style-type: decimal; }
+
+.reveal ul {
+  list-style-type: disc; }
+
+.reveal ul ul {
+  list-style-type: square; }
+
+.reveal ul ul ul {
+  list-style-type: circle; }
+
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
+  display: block;
+  margin-left: 40px; }
+
+.reveal dt {
+  font-weight: bold; }
+
+.reveal dd {
+  margin-left: 40px; }
+
+.reveal blockquote {
+  display: block;
+  position: relative;
+  width: 70%;
+  margin: 20px auto;
+  padding: 5px;
+  font-style: italic;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
+  display: inline-block; }
+
+.reveal q {
+  font-style: italic; }
+
+.reveal pre {
+  display: block;
+  position: relative;
+  width: 90%;
+  margin: 20px auto;
+  text-align: left;
+  font-size: 0.55em;
+  font-family: monospace;
+  line-height: 1.2em;
+  word-wrap: break-word;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+
+.reveal code {
+  font-family: monospace;
+  text-transform: none; }
+
+.reveal pre code {
+  display: block;
+  padding: 5px;
+  overflow: auto;
+  max-height: 400px;
+  word-wrap: normal; }
+
+.reveal table {
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+.reveal table th {
+  font-weight: bold; }
+
+.reveal table th,
+.reveal table td {
+  text-align: left;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  border-bottom: 1px solid; }
+
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
+  text-align: center; }
+
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
+  text-align: right; }
+
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
+  border-bottom: none; }
+
+.reveal sup {
+  vertical-align: super; }
+
+.reveal sub {
+  vertical-align: sub; }
+
+.reveal small {
+  display: inline-block;
+  font-size: 0.6em;
+  line-height: 1.2em;
+  vertical-align: top; }
+
+.reveal small * {
+  vertical-align: top; }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a {
+  color: #FF4081;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:hover {
+  color: #ff8db3;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #f30053; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #363636;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
+.reveal a img {
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #FF4081;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls {
+  color: #FF4081; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2);
+  color: #FF4081; }
+
+.reveal .progress span {
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+.reveal .progress {
+  z-index: 1000;
+  color: #FF80A1; }