index

slidecrafting with quarto

Salt Lake City RUG

November 27th, 2023

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

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

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

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

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.

Doing a lot with a little

you want to work with

colors

sizes

fonts

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