Slides demo

class: middle, center
# Markdown-based slides

[computationalliteracies.net](https://computationalliteracies.net)

*Press -> to continue*

---
# Why?

You can create slides using Markdown.
This ends up being most useful when you're focused on content and don't need a lot of 
specific formatting--in that case, a visual editor such as Google Slides
works best.

HTML slides also make it possible to embed arbitrary HTML into your slides.

---
# How it works

This deck is rendered from Markdown. You can see the source code
at `handbook/site/slides_demo.md`. To create slides: 
- Use `template = "slides.html"` in the page front matter.
- The page content should be wrapped in `<textarea id="source">`. 
  For example:

```html
+++
title = "Hear me speak"
template = "slides.html"
+++

<textarea id="source">
class: middle, center
# Welcome
---
## About me
</textarea>
```

---
# Presenter mode

Slides are rendered using [remark js](https://remarkjs.com), which comes
with a nice presenter mode.

- Press `c` to clone the slideshow in a new window. Move the clone to your
  external display. Press `f` to expand to full-screen.
- On your laptop, press `p` to enter presenter mode. The two presentations 
  will remain synced.
- Press `h` to see all supported keyboard shortcuts.

---
# Style

Chris has written a few custom style extensions:

- Footnote citations .cite[1]
- Custom layout classes:
  - `full-bleed` for when you want an image to fill the slide without margins
  - Divide a slide in half horizontally; useful for transition slides
    - `half-frame-left` and `half-frame-right` for content with margins
    - `full-bleed-left` and `full-bleed-right` for images without margins
- Otherwise, it's just HTML and CSS!

.refs[
.anchor[1] Proctor, 2019
]