Creating Stunning Presentations with Quarto

Creating Stunning

Presentations

with Quarto

Quarto Revealjs Basics

---
title: "Basic Revealjs"
format: revealjs
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

Quarto Revealjs tricks

---
title: "Tricky Revealjs"
format: revealjs
---

## Columns

::: columns
::: {.column width="50%"}
Columns

Columns
:::

::: {.column width="50%"}
Columns

Columns
:::
:::

## Absolute positioning

![](images/oreo.png){.absolute top=200 left=0 width="350" height="300"}

![](images/presto.png){.absolute top=50 right=50 width="250" height="450"}

![](images/wiggles.png){.absolute bottom=0 right="30%" width="300" height="300"}

## Centering {.center}

Is normally super hard

## {.center}

[big text]{.r-fit-text}

Colors and fonts

Color Contrast Checker

Google fonts

Setting the theme - sass variables

---
format: 
  revealjs:
    theme: style.scss
---

/*-- scss:defaults --*/

@import url(‘https://fonts.googleapis.com/css2?family=Crimson+Text:ital@0;1&family=Sail&display=swap’);

$font-family-sans-serif: “Crimson Text”;

$presentation-font-size-root: 46px;

$link-color: #440033;

$bg-color: #B7D9F6;

/*-- scss:rules --*/

setting the palette

$theme-purple: #BF65C5;
$theme-blue: #76AADB;
$theme-teal: #50847B;
$theme-cream: #F5F5F5;
$theme-dark-purple: #1A1626;

$theme-yellow: #FFD571;
$theme-brown: #a37100;
$theme-pink: #FED7E1;

$body-bg: white;
$body-color: black;
$link-color: $theme-purple;
$selection-bg: $theme-pink;

.blue {
color: $theme-blue;
}

.teal {
color: $theme-teal;
}

Doing a lot with a little

you want to work with

colors

sizes

fonts

Styling code highlighting

Positioning

matters!

## {background-image="images/markus-spiske.jpg"}

:::: {.absolute left="55%" top="35%" style="color:#6A2434; font-size:2.5em;"}
Positioning

matters!
:::

Positioning

matters!

.frosted {
  color:#6A2434; 
  font-size:2.5em; 
  padding: 0.5em 1em; 
  background-color: rgba(255, 255, 255, .15); 
  backdrop-filter: blur(5px); 
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
  border-radius: 5px;
}

Creating slide classes

$theme-blue: #394D85;

@mixin background-full {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.theme-slide2 {
  &:is(.slide-background) {
    background-image: url(‘../../../../../assets/slide2.svg’);
    @include background-full;
  }
  h3 {
    color: $theme-blue;
  }
  h2, h3, h4, h5, p, pre {
    margin-left: 100px;
  }
}

Creating slide classes

---
format: 
  revealjs:
    theme: style.scss
---

## Amazing Title {.theme-title1 .center}

## Welcome! {.theme-slide1}

## Getting started {.theme-section2 .center}

## Install R {.theme-slide3}

## Try to install Python {.theme-slide3}

Fragments

---
format: revealjs
---

:::: {.fragment}
Fade in
:::

:::: {.fragment .fade-out}
Fade out
:::

:::: {.fragment .highlight-red}
Highlight red
:::

Custom fragments

.reveal .slides section .fragment.highlight-orange {
opacity: 1;
visibility: inherit
}

.reveal .slides section .fragment.highlight-orange.visible {
background-color: $theme-orange;
}

Revealjs API

// Relative navigation
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();

// Returns an object with the scaled 
// presentationWidth & presentationHeight
Reveal.getComputedSlideSize();

Reveal.getCurrentSlide();

Reveal.getProgress();

Revealjs Events

Reveal.on( 'slidechanged', event => {
  // event.previousSlide, event.currentSlide
} );

Reveal.on( 'resize', event => {
  // event.scale, event.oldScale, event.size
} );

Reveal.on( 'fragmentshown', event => {
  // event.fragment = the fragment DOM element
} );
Reveal.on( 'fragmenthidden', event => {
  // event.fragment = the fragment DOM element
} );

fragments with javascript

Reveal.on( 'fragmentshown', event => {  
  if (event.fragment.classList.contains("advance-slide")) {  
    Reveal  
      .getCurrentSlide().querySelector("iframe")  
      .contentWindow.Reveal.right()  
  }  
} );  

Reveal.on( 'fragmenthidden', event => {  
  if (event.fragment.classList.contains("advance-slide")) {  
    Reveal  
      .getCurrentSlide().querySelector("iframe")  
      .contentWindow.Reveal.left()  
  }  
} );

fragments with javascript

---
format:
  revealjs: 
    include-after-body: 
      - "custom-fragments.html"
---

<iframe class="slide-deck" src="basics.html"></iframe>

:::: {.fragment .advance-slide}
:::
:::: {.fragment .advance-slide}
:::
:::: {.fragment .advance-slide}
:::

Thank you

Slidecraft 101 blog series at emilhvitfeldt.com