/*
 * These rules are not in the `slidewright` layer, so they win over the
 * theme. The theme properties are listed in packages/react/README.md#styling.
 */

/* Colours for both schemes, and fonts. */
[data-deck] {
  --deck-bg: light-dark(#f5f6ef, #121610);
  --deck-fg: light-dark(#1c2419, #e3e8dc);
  --deck-muted: light-dark(#56604f, #9aa592);
  --deck-accent: light-dark(#2d6a35, #8fcf7e);
  --deck-border: light-dark(#dde2d2, #2a3226);
  --deck-surface: light-dark(#ebeee2, #1a2018);
  --deck-backdrop: light-dark(#e2e6d8, #080a07);

  --deck-font-heading:
    Rockwell, "Roboto Slab", "Zilla Slab", "DejaVu Serif", Georgia, serif;
  --deck-radius: 3px;
}

[data-slide] :where(h1, h2) {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* A layout made with CSS alone: `layout: agenda` in a slide's frontmatter. */
[data-layout="agenda"] ol {
  padding: 0;
  font-family: var(--deck-font-heading);
  font-size: 1.5em;
  list-style: none;
  counter-reset: agenda;
}

[data-layout="agenda"] li {
  counter-increment: agenda;
}

[data-layout="agenda"] li::before {
  display: inline-block;
  width: 2em;
  color: var(--deck-accent);
  content: counter(agenda, decimal-leading-zero);
}

/* `class: inverse` in a slide's frontmatter. */
[data-slide].inverse {
  --deck-muted: color-mix(in srgb, var(--deck-bg) 75%, transparent);
  --deck-accent: var(--deck-bg);

  background: light-dark(#2d6a35, #8fcf7e);
  color: var(--deck-bg);
}

/* `:::callout` in a slide. */
[data-directive="callout"] {
  margin-top: auto;
  padding: 0.7em 1em;
  border-left: 4px solid var(--deck-accent);
  background: var(--deck-surface);
  font-size: 0.8em;
}

[data-directive="callout"] > :last-child {
  margin-bottom: 0;
}

/* Steps slide up as they fade in. */
[data-slide] [data-step-state] {
  transition:
    opacity var(--deck-step-duration) ease,
    transform var(--deck-step-duration) ease,
    visibility var(--deck-step-duration);
}

[data-slide] [data-step-state="future"] {
  transform: translateY(0.4em);
}

---
title: Field notes
# style.css defines light and dark colours. Try light or auto.
colorScheme: dark
layout: cover
---

# Field notes

A deck with its own look: colours, fonts and a layout, all in `style.css`

---
layout: agenda
---

# Agenda

1. Where we are
2. What we learned
3. What comes next

<!-- notes
`agenda` is not a built-in layout. The slide renders like `default`, and
style.css arranges it by its name.
-->

---
layout: section
class: inverse
---

# Where we are

---

# Three numbers

| Service  | Deploys a week | Time to restore |
| -------- | -------------: | --------------: |
| Checkout |             14 |          18 min |
| Search   |              9 |          42 min |
| Accounts |              2 |         3 hours |

:::callout
**Note:** A directive without a component is a `div`. This one is styled
with `[data-directive="callout"]`.
:::

---
layout: quote
---

> Most of the time went to waiting, not to work.

The team retrospective

---

# What comes next

- Smaller releases

<!-- step -->

- One owner for each service

<!-- step -->

- A review every month

<!-- notes
Steps slide up as they appear: style.css adds a transform to the built-in
fade.
-->

---
layout: statement
---

# Thank you

Questions are welcome

bun run dev theme