From 3cf15427c3b5f70c79609f65d3501ec0bd87fb20 Mon Sep 17 00:00:00 2001
From: dzello <jdzielak@gmail.com>
Date: Tue, 14 Aug 2018 01:00:03 +0200
Subject: [PATCH] Add example for slide-specific CSS

---
 exampleSite/content/home/shortcodes/slide.md  | 59 +++++++++++++++++++
 exampleSite/data/home.toml                    |  2 +-
 .../partials/home/reveal-hugo/head.html       | 10 ++++
 3 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
index 1813def..2b38fc1 100644
--- a/exampleSite/content/home/shortcodes/slide.md
+++ b/exampleSite/content/home/shortcodes/slide.md
@@ -166,3 +166,62 @@ If a template exists in multiple configurations, it's properties will be merged.
 {{< slide content="home.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 %}}
diff --git a/exampleSite/data/home.toml b/exampleSite/data/home.toml
index 4e4e83c..6c4a8f7 100644
--- a/exampleSite/data/home.toml
+++ b/exampleSite/data/home.toml
@@ -1,6 +1,6 @@
 reusable = '''
 
-# Reusable slides
+## Reusable slides
 
 Store markdown in a [data template](https://gohugo.io/templates/data-templates/) and reuse it in multiple sections or presentations.
 
diff --git a/exampleSite/layouts/partials/home/reveal-hugo/head.html b/exampleSite/layouts/partials/home/reveal-hugo/head.html
index 5f50404..e8a1607 100644
--- a/exampleSite/layouts/partials/home/reveal-hugo/head.html
+++ b/exampleSite/layouts/partials/home/reveal-hugo/head.html
@@ -18,4 +18,14 @@
 .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%;
+}
 </style>