Add example for slide-specific CSS

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 %}}

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.
 

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>