Sliding in Style

class: left title-slide
background-image: url(assets/img/unsplash_W5qgKZj-qnk.jpg)
background-size: 135%
background-position: bottom center

[remarkjs]: https://github.com/gnab/remark
[remark-wiki]: https://github.com/gnab/remark/wiki
[xaringan]: https://slides.yihui.org/xaringan/
[xaringan-wiki]: https://github.com/yihui/xaringan/wiki
[xaringanthemer]: https://pkg.garrickadenbuie.com/xaringanthemer
[xaringanExtra]: https://pkg.garrickadenbuie.com/xaringanExtra
[metathis]: https://pkg.garrickadenbuie.com/metathis
[grrrck]: https://twitter.com/grrrck
[gab]: https://www.garrickadenbuie.com
[rsthemes]: https://www.garrickdenbuie.com/projects/rsthemes
[regexplain]: https://www.garrickdenbuie.com/projects/regexplain
[shrtcts]: https://pkg.garricakdenbuie.com/shrtcts

# Sliding in Style

<div class="title-where">
South Coast MA UseR Group<br>
April 1, 2021
</div>

.side-text[
[&commat;grrrck][grrrck] | [garrickadenbuie.com][gab]
]

.remark-visible .title-slide {
  animation: slide-style-color 20s linear infinite;
}

@keyframes slide-style-color {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.title-slide h1 {
  font-size: 100px;
  font-family: Jost, sans;
  margin-bottom: 0;
  margin-top: 435px;
}

.side-text {
  color: white;
  position: absolute;
  font-size: 20px;
  bottom: 1em;
  right: 3em;
}

.side-text:hover {
  opacity: 1;
}

.side-text a {
  color: white;
}

.title-where {
  color: white;
  font-family: 'Amatic SC', sans;
  font-size: 40px;
  font-weight: 800;
}
</style>

---
layout: false

# About Me

.f3[
&#x1F44B; Hi, I'm **Garrick Aden-Buie**
]

.f3[
&#x1F426; [&commat;grrrck](https://twitter.com/grrrck)
]

.f3[
&#x1F9D1;&#x200D;&#x1F4BB; [garrickadenbuie.com](https://garrickadenbuie.com)
]

.f3[
&#x1F4BC; [RStudio Education](https://rstudio.com): [.code[gradethis]](https://github.com/rstudio-education/gradethis), [.code[learnr]](https://github.com/rstudio/learnr)
]

.f3[
&#x1F379; .code[[rsthemes][rsthemes]], .code[[regexplain][regexplain]], .code[[shrtcts][shrtcts]]
]

---

# Try it Yourself (Later)

.f3[
&#x1F371; [garrickadenbuie.com/talk](https://garrickadenbuie.com/talk/sliding-in-style-south-coast-ma/)

&#x1F4BD; [grrrck/sliding-in-style](https://hub.docker.com/r/grrrck/sliding-in-style)

```bash
docker run -d --rm -p 8787:8787 -e DISABLE_AUTH=true grrrck/sliding-in-style
```
]

---
class: middle

.f3.primary.w-60.center.lh-copy[
.silver[Thank you] Katie Jolly

[Applying design guidelines to slides with {xaringanthemer}](https://www.katiejolly.io/blog/2021-03-16/designing-slides)
]

---
class: inverse, center, middle

# xaringan crash course

---
class: center, middle

# xaringan

### /ʃæ.'riŋ.ɡæn/

.f1[
&#x1F937;&#x200D;
]

---

# How To Get xaringan

```r
install.packages("xaringan")
```

---
class: inverse center middle

# Let's Make Some Slides

---
class: inverse center middle

# Anatomy of a Slide

---

# Anatomy of a Slide

```markdown
---
class: middle right
background-image: url('banana.jpg')
background-size: cover

# Knock-Knock

## Who's there?

## Banana!

```

---

class: hide-count
background-image: url('assets/img/anatomy/xaringan-slides-1.jpg')
background-size: contain
background-position: top left

---
class: hide-count
background-image: url('assets/img/anatomy/xaringan-slides-2.jpg')
background-size: contain
background-position: top left

---
class: hide-count
background-image: url('assets/img/anatomy/xaringan-slides-3.jpg')
background-size: contain
background-position: top left

---
class: hide-count
background-image: url('assets/img/anatomy/xaringan-slides-4.jpg')
background-size: contain
background-position: top left

---
class: middle right
background-image: url('assets/img/banana.jpg')
background-size: cover

# Knock-Knock

## Who's there?

## Banana!

---

# Slide Properties

.w-30.fl[
<div class="f3 mt0 pt0 code">class:</div>

**Horizontal**

- `left`
- `center`
- `right`

**Vertical**

- `top`
- `middle`
- `bottom`
]

.w-70.fl[
<div class="f3 mt0 pt0 code">background-image:</div>

`url('image.png')`

<div class="f3 mt3 pt0 code">background-size:</div>

`160px 90px`

<div class="f3 mt3 pt0 code">background-position:</div>

`top right`  
`bottom left`  
`5% 5%`
]

---
class: center middle

# Learn Markdown in 15 Minutes

.f2[
[commonmark.org/help/tutorial](https://commonmark.org/help/tutorial/)
]

---
layout: false

# CSS Classes and Rules

.pull-left[
### CSS Styles

```css
.book-title {
  font-size: 1.25em;
  font-style: italic;
  font-family: Georgia, serif;
}

.purple {
  color: #887ba3;
}
```

.purple {
  color: #887ba3;
}
</style>
]

.pull-right[
### Markdown

<pre><code style="font-size: 1.1em">.book-title&#8203;[
The Tale of The<br>.purple&#8203;[Flopsy Bunnies]
]
</code></pre>

### HTML

<p class="book-title">The Tale of The <span class="purple">Flopsy Bunnies</span></p>
]

---
name: resources
layout: false
class: center middle inverse

# Learning xaringan

---

# Resources

1. Reference Pages
    - [The xaringan intro slides](https://slides.yihui.org/xaringan)
    - [The xaringan wiki](https://github.com/yihui/xaringan/wiki)
    - [The remarkjs wiki](https://github.com/gnab/remark/wiki)
   
1. Awesome xaringan resources
    - [Meet xaringan | Alison Hill](https://alison.rbind.io/talk/2019-rsc-xaringan/)
    - [Sharing Your Work with xaringan](https://spcanelon.github.io/xaringan-basics-and-beyond/index.html)
    - [Chapter 7 xaringan Presentations | R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/xaringan.html)
    
1. Finishing Up Your Slides
    - [Sharing Your xaringan Slides · Garrick Aden‑Buie](https://www.garrickadenbuie.com/blog/sharing-xaringan-slides/)
    - [Sharing on Short Notice](https://rstudio-education.github.io/sharing-short-notice)
    - [xaringanBuilder](https://github.com/jhelvy/xaringanBuilder)

---
name: xaringanthemer
layout: false
class: center middle inverse

# xaringanthemer

.f3[[.light-gray.o-40[pkg.garrickadenbuie.com/xaringanthemer]][xaringanthemer]]

---

# Custom xaringan themes

#### Install

```r
install.packages("xaringanthemer")
```

.w-50.fl[
#### In your slides `.Rmd`

````markdown
```{r xaringan-themer, include=FALSE}
library(xaringanthemer)
style_mono_light()
```
````
]

.w-50.fl.pl3[
#### In the YAML of your slide

```yaml
---
output:
  xaringan::moon_reader:
*    css: xaringan-themer.css
---
```
]