slidecrafting with quarto

Salt Lake City RUG

November 27th, 2023

Photo by micheile henderson on Unsplash

What is Quarto

Quarto is an

open-source

scientific and technical

publishing system

built on Pandoc.

Quarto vs R Markdown


At its core, Quarto is multilingual and independent of computational systems


Has expanded upon R Markdown to add new languages and can add more in the future


Let’s bring R Markdown to everybody!

Quarto Revealjs Basics

index.qmd

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

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation.

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

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

https://colourcontrast.cc/

Google fonts

Setting the theme - sass variables

https://quarto.org/docs/presentations/revealjs/themes.html#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;
}

Doing a lot with a little

Colors, sizes, and fonts are fundamental aspects to consider when creating slides. They significantly impact the effectiveness of your presentation. Colors hold the power to communicate emotions and set a specific tone. Carefully chosen color schemes can draw attention to important points and create a memorable visual experience. Warm colors like red and orange can evoke energy and enthusiasm, while cool tones like blue and green encourage calmness and trust.

Sizes play a pivotal role in visual hierarchy. By varying the sizes of headings, subheadings, and bullet points, you can guide the audience’s focus and enhance comprehension. Important details can be emphasized with larger text or visuals, while less significant information can be presented in smaller sizes. Organized and well-sized elements facilitate better understanding and retention of the main messages.

Fonts are also essential in slide design. The right font choice improves readability and reinforces the overall theme or tone of your presentation. Clean and modern designs often use sans-serif fonts such as Helvetica or Arial, while serif fonts like Times New Roman or Georgia can convey a more traditional and reliable feel. It is advisable to limit the number of fonts used, maintaining consistency and avoiding visual overload. Carefully selecting appropriate fonts enhances legibility and the overall visual impact.

To summarize, colors, sizes, and fonts are crucial elements in slide design, directly influencing the effectiveness and visual appeal of your presentation. By giving careful consideration to these aspects, you can engage your audience, effectively communicate your message, and leave a lasting impression.

Text generated with gPT3.5-Chatbot




Doing a lot with a little



you want to work with


colors

sizes

fonts

Positioning

matters!

Photo by Markus Spiske on Unsplash




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

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

matters!
:::

Photo by Markus Spiske on Unsplash

Positioning

matters!

Photo by Markus Spiske on Unsplash



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

Photo by Markus Spiske on Unsplash

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}

https://github.com/EmilHvitfeldt/quarto-revealjs-earth

https://github.com/EmilHvitfeldt/quarto-revealjs-letterbox

Fragments

index.qmd

---
format: revealjs
---

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

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

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

https://quarto.org/docs/presentations/revealjs/advanced.html#fragments

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();

https://revealjs.com/api/

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

https://revealjs.com/api/

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


Slidecraft 101 blog series at emilhvitfeldt.com

Photo by Sixteen Miles Out on Unsplash