Ella Kaye Presentation

Subtitle

Ella Kaye

November 17, 2025

Introduction

This is a Quarto presentation format consistent with the style of Ella Kaye’s personal website, particularly the colours.

Colours

Colour classes for text and highlights:

pink

blue

purple

orange

lime

green

pink-hl

blue-hl

purple-hl

orange-hl

lime-hl

green-hl

Inverse class for new sections

Or use colour backgrounds

Or colour backgrounds for stressing key points

Typography

I use Figtree for body text, Outfit for headings, and Fira Mono for code.

Difference from my website fonts

On my website, I use LemonMilkPro for body and headings and MonoLisa for code. Those are paid-for, licensed fonts. For presentations, I prefer to use free fonts, which can be used in presentations published on GitHub pages, without needing font files.

Custom syntax highlighting

penguins |>
  mutate(
    long_flipper = case_when(
      species == "Adelie" & flipper_len > 195 ~ TRUE,
      species == "Chinstrap" & flipper_len > 200 ~ TRUE,
      species == "Gentoo" & flipper_len > 225 ~ TRUE,
      TRUE ~ FALSE
    )
  ) |>
  mutate(
    body_mass_kg = body_mass / 1000,
    bill_len_cm = bill_len / 10,
    bill_dep_cm = bill_dep / 10
  )

Custom callouts

Note

A note

Warning

A warning

Important

Something important

Tip

This is a good idea

Caution

Be careful about doing this

Columns with backgrounds

Use class .col-box-{color} to apply colour box styling

Box 1: pink

Default height is 450px

Box 2: blue

Box 3: purple

Columns with backgrounds: tall and short

Colour box styling can be applied to entire columns

This has height 600px

Or to divs within columns to create stacks

This div has height 300px

Some other nice-to-haves

Alignment

There are classes to help with text alignment:

{.center-h} gives horizontally-centered text

{.right} gives right-aligned text

Note

For all revealjs Quarto presentations, applying {.center} to the slide title vertically centers the whole slide.

Sizing

There are classes to help size text by a given percentage:

{.smaller90}, {.smaller80}, {.smaller75} {.smaller70}, {.smaller60}, {.smaller50}

{.larger125}, {.larger150}, {.larger175}, {.larger200}, {.larger250}

More information

You can learn more about Quarto Revealjs presentations at https://quarto.org/docs/presentations/revealjs/

You can learn more about Quarto extensions at https://quarto.org/docs/extensions/

You can find these slides at https://ellakaye.github.io/ellakayepres/