creating slides

and more

Emil Hvitfeldt

Quarto For Python Devs Workshop

posit::conf 2023

File layout

format: revealjs

# is used to denote sections and ## denotes new slides

Slides doesn’t need an header title

index.qmd

---
format: revealjs
title: "Interesting Topic"
---
  
# Section 1

## Header 1
  
text

## Header 2

### Sub header
  
More text

##

No header text

Multiple columns

using .columns and .column classes

output-location: column nice short hand

index.qmd

---
format: revealjs
---

## Multiple columns

:::: {.columns}

::: {.column width="40%"}
Left column
:::

::: {.column width="60%"}
Right column
:::

::::

## Output location

```{r}
#| echo: true
#| output-location: column
plot(mpg ~ disp, data = mtcars)
```

Quarto Revealjs tricks

index.qmd

---
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 Constract Checker

Google fonts

Setting the theme - sass variables

index.qmd

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

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

styles.scss

$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;
}

Creating slide classes

style.scss

$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

index.qmd

---
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

index.qmd

---
format: revealjs
---

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

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

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

Custom fragments

styles.scss

.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

index.qmd

---
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

I’m EmilHvitfeldt online

Slidecraft 101 blog series at emilhvitfeldt.com