Sharing Your Work with xaringan

class: title-slide, right, top
background-image: url(img/hex-xaringan.png), url(img/frame-art.png)
background-position: 90% 75%, 75% 75%
background-size: 8%, cover

.right-column[
# Sharing Your Work<br>with xaringan
### An Introduction to xaringan:<br>The Beyond

**Silvia Canelón, Ph.D.**<br>
Nov. 5th, 2020 &#8212; Day 2
]

.palegrey[.left[.footnote[Graphic by [Vernon Adams](https://www.rawpixel.com/image/575297/artistic-canvas-background-template)]]]

???

Welcome to the workshop on sharing your work with xaringan.

Where I'll show you how to create impressive presentation slides that can be deployed to the web for easy sharing.

---
name: about-me
layout: false
class: about-me-slide, inverse, middle, center

# About me

## Silvia Canelón

### Postdoctoral Research Scientist

.fade[University of Pennsylvania<br>Philadelphia, PA, USA]

[<svg viewBox="0 0 512 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg> silvia.rbind.io](https://silvia.rbind.io)
[<svg viewBox="0 0 512 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> @spcanelon](https://twitter.com/spcanelon)
[<svg viewBox="0 0 496 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> @spcanelon](https://github.com/spcanelon)

---
layout: true

<a class="footer-link" href="http://bit.ly/xaringan-nhsr">bit.ly/xaringan-nhsr &mdash; Silvia Canelón</a>

---
class: top

# Acknowledgments

.pull-left-narrow[.center[<img style="border-radius: 50%;" src="https://lauriebaker.rbind.io/author/dr.-laurie-baker/avatar_hu30116ce9545207e6cc07ea892252ff02_106302_270x270_fill_q90_lanczos_center.jpg" width="100px"/>]]

.pull-right-wide[
[Laurie Baker](https://lauriebaker.rbind.io), co-pilot for this workshop and Data Science Lecturer at the Data Science Campus, Office for National Statistics, UK.as
]

.pull-left-narrow[.center[
<img style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/53170984?s=200&v=4" width="125px"/>]]

.pull-right-wide[
[NHS-R Community](https://nhsrcommunity.com/) for the opportunity to provide this workshop
- [nhsrtheme 📦](https://github.com/nhs-r-community/nhsrtheme) developed by Tom Jemmett
- [NHSRdatasets 📦](https://github.com/nhs-r-community/NHSRdatasets) developed by Chris Mainey
]

.pull-left-narrow[.center[
<svg viewBox="0 0 496 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:3em;color:#e5bf00;" xmlns="http://www.w3.org/2000/svg">  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>]]

.pull-right-wide[
- [xaringan 📦](https://github.com/yihui/xaringan#xaringan) developed by Yihui Xie
- [xaringanExtra 📦](https://github.com/gadenbuie/xaringanExtra/#xaringanExtra) developed by Garrick Aden-Buie
- Materials developed by [Alison Hill](https://twitter.com/apreshill) that have inspired and informed this workshop
]

---
class: left

# About you

--
.pull-left-narrow[.center[
<img src="https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/xaringan.png" width="25%"/>]]
.pull-right-wide[### you know xaringan]

.pull-left-narrow[
.center[<svg viewBox="0 0 496 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:2em;" xmlns="http://www.w3.org/2000/svg">  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 7.9 47.2 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zm-227.9-57.5c-1 6.2 5.4 11 11 7.9l31.3-16.3 31.3 16.3c5.6 3.1 12-1.7 11-7.9l-6-34.9 25.4-24.6c4.5-4.5 1.9-12.2-4.3-13.2l-34.9-5-15.5-31.6c-2.9-5.8-11-5.8-13.9 0l-15.5 31.6-34.9 5c-6.2.9-8.9 8.6-4.3 13.2l25.4 24.6-6.1 34.9zm259.7-72.7l-34.9-5-15.5-31.6c-2.9-5.8-11-5.8-13.9 0l-15.5 31.6-34.9 5c-6.2.9-8.9 8.6-4.3 13.2l25.4 24.6-6 34.9c-1 6.2 5.4 11 11 7.9l31.3-16.3 31.3 16.3c5.6 3.1 12-1.7 11-7.9l-6-34.9 25.4-24.6c4.5-4.6 1.8-12.2-4.4-13.2z"></path></svg>]]
.pull-right-wide[### you've seen pretty slides in the wild]

.pull-left-narrow[
.center[<svg viewBox="0 0 576 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:2em;" xmlns="http://www.w3.org/2000/svg">  <path d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v48H54a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6v-10h48zm42-336H150a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6V86a6 6 0 0 0-6-6zm6-48c26.51 0 48 21.49 48 48v256c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h384zM264 144c0 22.091-17.909 40-40 40s-40-17.909-40-40 17.909-40 40-40 40 17.909 40 40zm-72 96l39.515-39.515c4.686-4.686 12.284-4.686 16.971 0L288 240l103.515-103.515c4.686-4.686 12.284-4.686 16.971 0L480 208v80H192v-48z"></path></svg>]]
.pull-right-wide[### .my-gold[**you want to make your own pretty slides**]]

---
class: left

# About .my-gold[future] you

.pull-left-narrow[.center[
# **&#x1F3A1;**]]
.pull-right-wide[.center[### **you can make your slides .my-gold[extra special]<br>with the xaringanExtra 📦**]]

.pull-left-narrow[.center[
<i class="fab fa-css3 fa-2x"></i>]]
.pull-right-wide[### **you can customize your slides .my-gold[using CSS**]]

---
name: question
class: inverse, middle, center

---
template: question

# <svg style="height:0.8em;top:.04em;position:relative;fill:#E8EDEE;" viewBox="0 0 512 512"><path d="M496 448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h480c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zm-304-64l-64-32 64-32 32-64 32 64 64 32-64 32-16 32h208l-86.41-201.63a63.955 63.955 0 0 1-1.89-45.45L416 0 228.42 107.19a127.989 127.989 0 0 0-53.46 59.15L64 416h144l-16-32zm64-224l16-32 16 32 32 16-32 16-16 32-16-32-32-16 32-16z"/></svg>
# What's the extra?

----

.left-col[.center[
<svg viewBox="0 0 512 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:2em;" xmlns="http://www.w3.org/2000/svg">  <path d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"></path></svg>
### slide overview
]]

.center-col[
.center[
<svg viewBox="0 0 576 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:2em;" xmlns="http://www.w3.org/2000/svg">  <path d="M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"></path></svg>
### slide embedding
]]

.right-col[.center[
<svg viewBox="0 0 512 512" style="fill:currentColor;position:relative;display:inline-block;top:.1em;height:2em;" xmlns="http://www.w3.org/2000/svg">  <path d="M464 128H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zm0 272H48V112h140.12l54.63 54.63c6 6 14.14 9.37 22.63 9.37H464v224z"></path></svg>
### slide panels
]]

---
### These .my-gold[extra] features are made possible by the [xaringanExtra 📦](https://github.com/gadenbuie/xaringanExtra#xaringanextra)

> 🎡 A playground of enhancements and extensions for xaringan slides.

---
name: demo-tile-view

## Slide overview with [Tile View](https://github.com/gadenbuie/xaringanExtra#-tile-view-demo) <i class="fas fa-th" style = "float: right"></i>

.panelset[

.panel[.panel-name[Example]
.center[
<img src="img/demo-tile-view.png" width="80%"/>
]
]

.panel[.panel-name[How-to]
**Step 1.** Install xaringanExtra from GitHub

```r
devtools::install_github("gadenbuie/xaringanExtra")
```

**Step 2.** Load the library and add the `use_tile_view()` function to your setup chunk

```r
library(xaringanExtra)
xaringanExtra::use_tile_view()
```

**Step 3.** Save and render your slides

**Step 4.** Press the letter "O" (for **O**verview) on your keyboard to see a slide overview!<br>
.small[You can also try pressing "O" right now!]

]

]

---
name: demo-share-again

## Slide embedding with [Share Again](https://github.com/gadenbuie/xaringanExtra#-share-again) <i class="fas fa-share-square" style = "float: right"></i>

.panelset[

.panel[.panel-name[Example]
.center[
<img src="img/demo-share-again.png" width="70%" />
<br>.small[[spcanelon.github.io/xaringan-basics-and-beyond](https://spcanelon.github.io/xaringan-basics-and-beyond/)]]

]

.panel[.panel-name[How-to]

.pull-left-narrow[
**Now**, in your current document
]

.pull-right-wide[
**Step 1.** Add the `use_share_again()` function to your setup chunk

```r
xaringanExtra::use_share_again()
```

**Step 2.** Style share bar and choose social media sites in setup chunk

```r
xaringanExtra::style_share_again(share_buttons = c("twitter", "linkedin", "pocket"))
```
]

.pull-left-narrow[
**Later**, in a different document
]

.pull-right-wide[
**Step 3.** Embed your slides in blogdown or R Markdown HTML docs

```r
xaringanExtra::embed_xaringan(url = "my-slides.html", ratio = "16:9")
```
]]

]

---
name: your-turn
background-color: var(--my-red)
class: inverse

.left-column[
## Your turn<br><svg viewBox="0 0 576 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg><br>
### [.my-pink[5:00 mins]](https://apps.garrickadenbuie.com/countdown/)
]

.right-column[

### Make your slides a little extra

----

Options:
1. Slide overview feature with [tile view](#demo-tile-view)
2. Slide embedding feature with [share again](#demo-share-again)
]

---
name: panelset-how-to

## Slide panels with [Panelset](https://github.com/gadenbuie/xaringanExtra#-panelset) <i class="fas fa-folder" style = "float: right"></i>

.panelset[

.panel[.panel-name[Example]
<iframe src="https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-02-beyond.html#demo-tile-view" width="100%" height="400px"></iframe>
.small[[spcanelon.github.io/xaringan-basics-and-beyond/slides/day-02-beyond.html#demo-tile-view](https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-02-beyond.html#demo-tile-view)]
]

.panel[.panel-name[How-to]

.pull-left[
**Step 1.** Add the `use_panelset()` function to your setup chunk

```r
xaringanExtra::use_panelset()
```

]

.pull-right[
**Step 2.** Create a `.panelset[]` containing a `.panel[]` that itself has a `.panel-name[]`
```markdown
.panelset[
.panel[.panel-name[NAME]
...your content goes here...
] 
] 
```
.small[.right[See this example in the next slide <svg viewBox="0 0 512 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"></path></svg>]]
]

⭐ **Tip:** The nested class brackets can get a little confusing, so I like to add a comment to signal the "end" of a set of brackets. Comments in html are written like this: ``

]

]

---
name: example-panelset

### Example from [this panelset slide](#panelset-how-to)

.panelset[
.panel[.panel-name[NAME]
...your content goes here...
] 
]

---
name: live-coding
background-color: var(--my-yellow)
class: middle, center

---
name: your-turn
background-color: var(--my-red)
class: inverse

.right-column[
### Add another panel to the slide template<br>provided below

----

**Tip:** you can hover over the code chunk and see the "Copy Code" button in the top-right corner 🙂

```markdown
---
# This slide has panels

.panelset[
.panel[.panel-name[PANEL 1]
...your content goes here...
] 
] 
---
```
.small[Hint: try adding `.panel[.panel-name[PANEL 2]]` underneath ``]
]

---
background-image: url(img/explore.jpg)
background-size: cover
class: top, right

.my-pink[.small[Photo by [.my-pink[Dominika Roseclay]](https://www.pexels.com/photo/cubes-with-letters-on-wooden-surface-near-fern-leaves-4288760/)]]

---
template: question

### Let's get into it!

---
class: middle, center

# Our approach

----

Take a look the default xaringan styling sheet

Go through the modifications made to create the `nhsr` theme

Make some of our own helpful modifications

Make our own super fun and fabulous .my-gold[**party theme**] 🥳<br>
.small[Credit for this idea goes to Laurie Baker!]

----

.my-coral[**By the end** you'll have some styling skills that you can use in and out of xaringan!]

---

# CSS goes beyond xaringan

.left-column[
The CSS basics we'll cover today can be used<br>to better understand how _any website_<br>is styled.
]

.right-column[
### A little CSS know-how can go a long way.

Here are examples of <svg viewBox="0 0 581 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"></path></svg> places I've managed to apply what I've learned:

- Personal [blogdown](https://bookdown.org/yihui/blogdown/) website

- [Distill](https://rstudio.github.io/distill/website.html) site for this workshop

- Xaringan slides for this workshop (of course)
]

---
name: xaringan-default-css

## xaringan's `default.css`<i class="fab fa-css3" style = "float: right"></i>

Remember in part 1 of this workshop when said that xaringan generates a directory of libraries using `lib_dir` [in the YAML](https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-01-basics.html?panelset1=yaml-2&panelset4=remark.js2&panelset5=nhsrtheme2&panelset6=moon-reader2&panelset7=markdown2#14)?

The `default.css` styling sheet is tucked away in there.

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-folder-open"></i></span>That directory is <b>libs</b> and it contains:</li>
  <ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-folder"></i></span>lots of different folders</li>
    <li><span class="fa-li"><i class="fas fa-folder"></i></span>for everything we could possibly need in our slide deck</li>
    <li><span class="fa-li"><i class="fas fa-folder"></i></span>depending on which packages and functions we use</li>
    <li><span class="fa-li"><i class="fas fa-folder-open"></i></span>one of these folders is <b>remark-css</b></li>
    <ul class="fa-ul">
      <li><span class="fa-li"><i class="fas fa-file-code"></i></span><b>default.css</b></li>
    </ul>
  </ul>
</ul>

When we make custom style sheets like `nhsr.css` or `nhsr-fonts.css` and ask xaringan to use them ([in the YAML](https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-01-basics.html?panelset1=yaml-1&panelset4=remark.js2&panelset5=nhsrtheme2&panelset6=moon-reader2&panelset7=markdown2#14)), xaringan follows those rules first and _then_ fills in the blanks with `default.css` rules.

???
So a custom style sheet need not have _all_ the same rules as `default.css`, only the ones to modify.

---
template: live-coding

### We'll take a look at the **default.css** file

---
name: css-basics

## CSS basics<i class="fab fa-css3" style = "float: right"></i>

.panelset[

.panel[.panel-name[Rules]

This is the basic structure we're going to come across. Our sheets have a bunch of CSS rules: `selectors` of various types, each with 1+ `properties` that are assigned a `value`.

![:scale 95%](https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/04/LV2OI0TM.png?resize=2048%2C667&ssl=1)<br>
.small[[css-tricks.com/complete-guide-to-css-functions](https://css-tricks.com/complete-guide-to-css-functions/)]
]

.panel[.panel-name[Selectors]
CSS `selectors` are patterns used to select `elements`; they point to an element to style,<br>like a heading (`h1`) for example.

.pull-left[

The rules can be written on one line...

![](https://www.w3schools.com/whatis/img_selector.gif)
<br>
.small[[w3schools.com/whatis/whatis_css.asp](https://www.w3schools.com/whatis/whatis_css.asp)]

.small[This rule selects all level 1 headers (`#` in Markdown) and assigns them the `color` blue and a `font-size` of 12px.]
]

.pull-right[
...or on multiple lines.

```css
h1 { 
  color: blue; 
  font-size: 12px;
}
```

.small[**Note**: Unlike with many <svg viewBox="0 0 581 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"></path></svg> functions, `color` cannot be replaced with `colour` in CSS land 😞]
]
]

.panel[.panel-name[Class Selectors]
.pull-left[

The most common type of `selector` we'll see is the `class selector`, which begins with a `.`

Where else have we heard the term "class" or seen the `.` syntax?

----

**Tip:** Try `prismatic::colour("#272822")` in the console to get a sense for what colour that hex code maps to.
]

.pull-right[
This example from `default.css` reads
> .small[all HTML elements with class="inverse" will have a [background colour](https://css-tricks.com/almanac/properties/b/background/) `#272822`, text [colour](https://css-tricks.com/almanac/properties/c/color/) `#d6d6d6`, and some particular [text shadowing](https://css-tricks.com/almanac/properties/t/text-shadow/).]

```css
.inverse {
  background-color: #272822;
  color: #d6d6d6;
  text-shadow: 0 0 20px #333;
}
```
]
]

.panel[.panel-name[Elements]
.pull-left-narrow[This CSS rule doesn't use a class selector but selects individual elements.]

.pull-right-wide[
In this case:
> .small[all HTML elements of type `a` (anchors/links), including those of type `code` that are nested in anchors/links, are assigned the [color](https://css-tricks.com/almanac/properties/c/color/) `rgb(249, 38, 114)` and are assigned no [text decoration](https://css-tricks.com/almanac/properties/t/text-decoration/).]

```css
a, a > code {
  color: rgb(249, 38, 114);
  text-decoration: none;
}
```
]
]

.panel[.panel-name[Almanac]

My go-to resource for looking up `selectors` or `property` options is the [CSS-Tricks Almanac](https://css-tricks.com/almanac/)

.center[
<img src="img/css-tricks-almanac.png" width="62%" />
]

]

]

---
name: css-nhsr
background-image: url(https://nhsrcommunity.com/wp-content/uploads/2018/02/logo.png)
background-size: 90px
background-position: 1020px 60px

---
template: css-nhsr

## The NHS-R theme's `nhsr.css`

The following slides will incrementally walk through the modifications made to<br>the default xaringan theme.

Each slide will include:

- The code as reflected in xaringan's `default.css` on the left<br>and the modified css used in the `nhsr.css` on the right.
- A visual example of the modifications made<br>using example slides [from this slide deck](https://spcanelon.github.io/xaringan-basics-and-beyond/materials/nhsr-example-slides/nhsr-example-slides.html)

.footnote[
Presenting the material this way was [kindly suggested by Laurie Baker](https://github.com/spcanelon/xaringan-basics-and-beyond/issues/8#issue-737162464)]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Anchors/links:] `default.css`

```css
a, a > code {
  color: rgb(249, 38, 114);
  text-decoration: none;
}
```

]

.pull-right[
.my-coral[Anchors/links:] `nhsr.css`

```css
a {
  color:              #005EB8;
  border-bottom:      2px solid #005EB8;
  line-height:        1.5em;
}
a:hover {
  border-bottom:      0px;
}
```

]

]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Anchors/links:] `nhsr.css`

]
.pull-right[
.my-coral[Anchors/links:] `nhsr.css`

]

] 
]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Headings:] `default.css`

> The default xaringan theme did not change any properties from the "root" HTML file
> - paragraph text is 16px
> - text is the colour black

----

**[A note about font sizes and units](https://css-tricks.com/rems-ems/)** 
- Document level adj. should be in `px`
- Modules (i.e. classes) will scale with the document, in `rem`
- Type will scale with module, in `em`

]

.pull-right[
.my-coral[Headings:] `nhsr.css`

```css
.remark-slide-content h1 {
  color:              #005EB8;
  font-size:          45px;
  line-height:        1em;
}
.remark-slide-content h2 {
  font-size:          35px;
  color:              #005EB8;
  line-height:        1em;
}
.remark-slide-content h3 {
  font-size:          25px;
  color:              #005EB8;
}
```

]

] 
.panel[.panel-name[Output]

.pull-left[
.my-coral[Headings:] `default.css`

<img src="img/css-ex-headings-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Headings:] `nhsr.css`

<img src="img/css-ex-headings-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---
template: css-nhsr

.panelset[

.panel[.panel-name[Code]

.pull-left[
.my-coral[Paragraph text:] `default.css`

> Again, nothing specific here.

]

.pull-right[
.my-coral[Paragraph text:] `nhsr.css`

```css
.remark-slide-content {
  font-size:          20px;
  line-height:        1.2em;
}
```

]
]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Paragraph text:] `default.css`

]

.pull-right[
.my-coral[Paragraph text:] `nhsr.css`

]

]

]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Horizontal bars:] `default.css`

> Standard values were used by xaringan.

]

.pull-right[
.my-coral[Horizontal bars:] `nhsr.css`

```css
hr {
  content:            none;
  display:            block;
  border:             none;
  background-color:   #231F20;
  height:             0.08em;
}
```

]

] 
.panel[.panel-name[Output]

.pull-left[
.my-coral[Horizontal bars:] `default.css`

<img src="img/css-ex-horizontalbar-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Horizontal bars:] `nhsr.css`

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Bottom of slide stuff:] `default.css`

```css
/*-- Footnote --*/
.footnote {
  position: absolute;
  bottom: 3em;
  padding-right: 4em;
  font-size: 90%;
}
```

How do we write comments in CSS?

]

.pull-right[
.my-coral[Bottom of slide stuff:] `nhsr.css`

```css
/*-- Footnote --*/
.footnote {
  position:           absolute;
  bottom:             2em;
  padding-right:      4em;
  font-size:          80%;
  line-height:        1.3em;
}

/*-- Slide number --*/
.remark-slide-number {
  color:              #000000;
}
```

]

] 
.panel[.panel-name[Output]

.pull-left[
.my-coral[Bottom of slide stuff:] `default.css`

<img src="img/css-ex-footnote-pg-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]
.pull-right[
.my-coral[Bottom of slide stuff:] `nhsr.css`

<img src="img/css-ex-footnote-pg-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Inline code:] `default.css`

```css
.remark-code-line-highlighted { background-color: #ffff88; }
```

```css
/* Can also be written: */

.remark-code-line-highlighted { 
  background-color: #ffff88; 
}
```

]

.pull-right[
.my-coral[Inline code:] `nhsr.css`

```css
/*-- In-line highlighting within text --*/
.remark-code, .remark-inline-code {
  font-size:          90%;
  font-weight:        400;
  color:              #231F20;
  background:         #E8EDEE;
  border-radius:      3px;
  padding:            1px 1px 1px 1px;
}

/*-- Line highlighting within code --*/
.remark-code-line-highlighted {
  background-color:   #E8EDEE;
}
```

]

]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Inline code:] `default.css`

<img src="img/css-ex-code-highlight-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Inline code:] `nhsr.css`

<img src="img/css-ex-code-highlight-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---

template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Code chunks:] `default.css`

> Nothing specific in the xaringan default style sheet -- it's possible `highlightStyle` [in the YAML](https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-01-basics.html?panelset1=yaml-2&panelset4=remark.js2&panelset5=nhsrtheme2&panelset6=moon-reader2&panelset7=markdown2#14) takes the lead on this 🤔

```yaml
output:
  xaringan::moon_reader:
    nature:
*     highlightStyle: googlecode
```
]

.pull-right[
.my-coral[Code chunks:] `nhsr.css`

```css
/*-- Code chunk background layer --*/
pre {
  /*border: 2px solid rgba(204, 189, 204, 0.8); /* code chunk border*/
  border:             none;
  box-shadow:         2px 2px 2px 2px #eee;
  padding:            0.1em;                    /* padding between code chunk and border */
  background:         none !important;
  overflow-x:         auto;                     /* enable horizontal scrolling with overflow */
  border-radius:      1px;                      /* modify rounding of corners*/
}
/*-- Code chunk foreground --*/
pre code {
  background:          none;
  font-size:           18px !important;
}
```

]

???
Sometimes our code won't fit vertically! What can we do? We can make the `font-size` a little smaller **or** we can use xaringanExtra's [fit to screen extension](https://github.com/gadenbuie/xaringanExtra#-fit-to-screen)

]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Code chunks:] `default.css`

<img src="img/css-ex-code-chunk-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Code chunks:] `nhsr.css`

<img src="img/css-ex-code-chunk-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Tables:] `default.css`

```css
.remark-slide table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
.remark-slide table thead th { 
  border-bottom: 1px solid #ddd; 
}
th, td { padding: 5px; 
}
.remark-slide thead, 
.remark-slide tfoot, 
.remark-slide tr:nth-child(even) { background: #eee }
```

]

.pull-right[
.my-coral[Tables:] `nhsr.css`

```css
.remark-slide table {
  margin:              auto;
  border-top:          1px solid #768692;
  border-bottom:       1px solid #768692;
}
/*-- Table header --*/
.remark-slide table thead th {
  border-bottom:       1px solid #768692;
}
/*-- Table rows (even) --*/
.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  background:          #E8EDEE;
}
```

]
]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Tables:] `default.css`

<img src="img/css-ex-tables-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Tables:] `nhsr.css`

<img src="img/css-ex-tables-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Block quote:] `default.css`

> Like this one

```css
blockquote {
  border-left: solid 5px lightgray;
  padding-left: 1em;
}
```

]

.pull-right[
.my-coral[Block quote:] `nhsr.css`

Can you spot the difference?

```css
blockquote {
  border-left:         solid 5px #E8EDEE;
  padding-left:        1em;
}
```
]
]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Block quote:] `default.css`

<img src="img/css-ex-quotes-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Block quote:] `nhsr.css`

<img src="img/css-ex-quotes-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---
template: css-nhsr

.panelset[

.panel[.panel-name[Code]

.pull-left[
.my-coral[Inverse class modifications:] `default.css`

```css
.inverse {
  background-color: #272822;
  color: #d6d6d6;
  text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2, .inverse h3 {
  color: #f3f3f3;
}
```

]

.pull-right[
.my-coral[Inverse class modifications:] `nhsr.css`

```css
/*-- Slide background and text (inverse) --*/
.inverse {
  background-color:   #005EB8;
  color:              #FFFFFF;
  text-shadow:        none;}
/*-- Headings (inverse) --*/
.inverse h1, .inverse h2, .inverse h3 { color: #FFFFFF;}
/*-- Horizontal bars (inverse) --*/
.inverse hr { background-color:   #FFFFFF;}
/*-- Links/anchors (inverse) --*/
.inverse a {
  color:              white;
  border-bottom:      2px solid white;}
.inverse a:hover { border-bottom: none;}
```

]

]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Inverse class modifications:] `default.css`

<img src="img/css-ex-inverse-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Inverse class modifications:] `nhsr.css`

<img src="img/css-ex-inverse-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

]

]

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Custom **title-slide** class:] `default.css`

> None in the default style sheet

----

Does this look familiar?

```markdown
---
class: title-slide, left, bottom

# `r rmarkdown::metadata$title`
----
## **`r rmarkdown::metadata$subtitle`**
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$date`
---
```

<!--<pre><code>---
class: title-slide, left, bottom

# `r rmarkdown::metadata$title`
----
## **`r rmarkdown::metadata$subtitle`**
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$date`
---</code></pre>
-->
]

.pull-right[
.my-coral[Custom **title-slide** class:] `nhsr.css`

```css
/*-- NHS organisation logo --*/
.title-slide {
  background-image:    url(../img/logo-title-slide.png);
  background-position: 95% 10%;
  background-size:     300px;
}
/*-- Headings --*/
.title-slide h1 {
  color:               #000000;
}
/*-- Hides slide number from title slide --*/
.title-slide .remark-slide-number {
  display:             none;
}
```

]

] 
.panel[.panel-name[Output]

.pull-left[
.my-coral[Custom **title-slide** class:] `default.css`

<img src="img/css-ex-title-slide-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Custom **title-slide** class:] `nhsr.css`

---
template: css-nhsr

.panelset[
.panel[.panel-name[Code]

.pull-left[
.my-coral[Custom color classes:] `default.css`

> None in the default style sheet

]

.pull-right[
.my-coral[Custom color classes:] `nhsr.css`

```css
/*-- CUSTOM CLASSES FOR TEXT EMPHASIS --*/
.blue       { color:   #005EB8 }
.green      { color:   #009639 }
.pink       { color:   #AE2573 }
.red        { color:   #DA291C }
.warmyellow { color:   #FFB81C }
```

You can use these by writing something like this in your slides R Markdown:

```css
.pink[Some pink text here]
```

.pink[Some pink text here]

]
]

.panel[.panel-name[Output]

.pull-left[
.my-coral[Custom color classes:] `default.css`

<img src="img/css-ex-textemphasis-before.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

.pull-right[
.my-coral[Custom color classes:] `nhsr.css`

<img src="img/css-ex-textemphasis-after.png"
width="100%" style="border:2px solid #E8EDEE"/>
]

] 
]

---
name: your-turn
background-color: var(--my-red)
class: inverse

.left-column[
## Your turn<br><svg viewBox="0 0 576 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg><br>
### [.my-pink[1:00 min]](https://apps.garrickadenbuie.com/countdown/)
]

.right-column[
### Try adding one of the custom classes below<br>to your `nhsr.css` file and try it out<br>in your slide Rmd file with `.fade[]` or `.small[]`

----

**Remember:** you can hover over the code chunk and see the "Copy Code" button in the top-right corner 🙂

```css
.fade { 
  opacity: 0.5; 
}
```

```css
.small { 
  font-size: 70% 
}
```

]

---

## Let's talk colours<i class="fas fa-palette" style = "float: right"></i>

.panelset[
.panel[.panel-name[Light Palettes]
<img src="img/coolors-light-palettes.png" width="804" />
[coolors.co/palettes/trending](https://coolors.co/palettes/trending)

] 
.panel[.panel-name[Dark Palettes]
<img src="img/coolors-dark-palettes.png" width="803" />
[coolors.co/palettes/trending/dark](https://coolors.co/palettes/trending/dark)
]

.panel[.panel-name[NHS identity]

.pull-left[.center[
![:scale 75%](img/nhs-colour-guidelines.png)
]]

.pull-right[
The [NHS identity](https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/) colour hex codes 🎨

```
#   DarkBlue       Blue BrightBlue  LightBlue   AquaBlue      Black   DarkGrey    MidGrey 
#  "#003087"  "#005EB8"  "#0072CE"  "#41B6E6"  "#00A9CE"  "#231f20"  "#425563"  "#768692" 
#   PaleGrey  DarkGreen      Green LightGreen  AquaGreen     Purple   DarkPink       Pink 
#  "#E8EDEE"  "#006747"  "#009639"  "#78BE20"  "#00A499"  "#330072"  "#7C2855"  "#AE2573" 
#    DarkRed        Red     Orange WarmYellow     Yellow 
#  "#8A1538"  "#DA291C"  "#ED8B00"  "#FFB81C"  "#FAE100"
```

]

]

.panel[.panel-name[More resources]
- Check your colour combinations for contrast:
  - https://coolors.co/contrast-checker

- Generate and save your own colour palettes:
  - https://coolors.co/generate
  - https://mycolor.space

- Quickly look up hex colour codes:
  - https://www.color-hex.com
  - https://www.w3schools.com
  
.small[Thanks to Laurie Baker and Josie Browning for kindly adding resources to these lists]
  
]

]

---

## Let's talk fonts<i class="fas fa-font" style = "float: right"></i>

.panelset[

.panel[.panel-name[NHS identity]

The [NHS identity guidelines](https://www.england.nhs.uk/nhsidentity/identity-guidelines/fonts/) encourage:

.pull-left[
**Frutiger** as the core font...

<img src="img/font-frutiger.png" width="348" />
]

.pull-right[
...and **Arial** as a secondary font.

.panel[.panel-name[Other fonts]
.pull-left-narrow[
You can find a wide variety of fonts to use in your slides through [Google Fonts](https://fonts.google.com/):

- Monospace
- Serif
- Sans-serif

]

.pull-right-wide[.center[
<img src="img/google-fonts.png" width="85%" />
]]

]

.panel[.panel-name[How-to: Part 1]

**Step 1.** Select the font style(s) you're interested in using from Google Fonts
.center[
<img src="img/font-pick-scp.png" width="547" />
]

----

.pull-left[**Step 2.** Copy the `@import` code for your selection:

```css
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
```

]

.pull-right[
.center[
<img src="img/font-pick-scp-import.png" width="186" />
]
]
]

.panel[.panel-name[How-to: Part 2]

**Step 3.** Paste the `@import` code into the top of your `nhsr-fonts.css` file

```css
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
```

**Step 4.** Specify that you want to use the font by adding it to the `font-family` property

```css
.remark-code, .remark-inline-code {
  font-family: 'Source Code Pro', 'Roboto Mono', monospace;
}
```

]

]

---
background-image: url(img/party-theme.jpg)
background-size: cover
class: right, bottom

# .my-hot-pink[**Party time! 🥳**]

### .my-hot-pink[**This is your time**]
### .my-hot-pink[**to have fun**]
### .my-hot-pink[**and play around**]
### .my-hot-pink[**with modifications!**]

---
class: goodbye-slide, inverse, left

.pull-left[
.middle[
<img style="border-radius: 50%;" src="https://silvia.rbind.io/authors/silvia/avatar.png" width="170px"/>
# Thank you!

### Here's where you can find me...

.right[
[silvia.rbind.io <svg viewBox="0 0 512 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>](https://silvia.rbind.io)<br/>
[@spcanelon <svg viewBox="0 0 512 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>](https://twitter.com/spcanelon)<br/>
[@spcanelon <svg viewBox="0 0 496 512" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>](https://github.com/spcanelon)<br/>
]]]