gabe /presentato-mf

+++
title = "Example Deck"
description = "How to write a presentation in this site"
date = 2026-08-27

[extra]
theme = "forest"            # starting color scheme for this deck
reveal_transition = "slide"
+++

# Example Deck

Markdown in, slides out.

Press <kbd>Space</kbd> to advance, <kbd>Esc</kbd> for the overview.

Note:
Speaker notes go after a `Note:` line. Press S to open the speaker view.

---

## Horizontal slides

Separate top-level slides with a `---` on its own line.

--

## Vertical slides

Separate stacked slides with `--`.

Use these for optional detail you can skip past.

---

## Everything markdown does

- Bullet lists
- **Bold**, *italic*, `inline code`
- [Links](https://revealjs.com)

> Blockquotes work too.

---

## Code, highlighted

```rust
fn main() {
    println!("hello from a slide");
}
```

---

## Fragments

Use reveal attributes with `<!-- .element: -->`:

- Appears first
- Appears second <!-- .element: class="fragment" -->
- Appears third <!-- .element: class="fragment" -->

---

## Per-slide options

<!-- .slide: data-background-color="#1b4965" -->

Set backgrounds and other slide attributes with `<!-- .slide: -->`
as the first line of the slide.

---

## Images

Put files in `static/` and reference them with an absolute path:

`![diagram](/img/diagram.png)`

They are capped to fit the slide, so a full-resolution screenshot needs no
resizing beforehand.

--

## Side by side

Wrap them in `<div class="cols">` — blank lines around the markdown matter:

```markdown
<div class="cols">

![left](/img/a.png)

![right](/img/b.png)

</div>
```

Each direct child becomes a column, so this works for any number of images.

--

## Columns with captions

Give a column more than one block by nesting a `<div>`:

```markdown
<div class="cols">
<div>

![before](/img/a.png)

**Before**

</div>
<div>

![after](/img/b.png)

**After**

</div>
</div>
```

Uneven split: `<div class="cols" style="grid-template-columns: 2fr 1fr">`.
Taller images: add `style="--img-height: 620px"`.

---

## Color schemes

Six schemes ported from **neiam.co**: her, afterdark, forest, sky, clays, stones.

Hit <kbd>T</kbd> or use the swatches in the corner — your pick follows you
across every deck and page on the site.

---

# Fin

`?print-pdf` on the URL gives you a printable version.