Template - Extra

# Template - Extra
## Some extra css for side notes and boxes
### Eli Holmes<br>NOAA Fisheries, NWFSC<br>2022-01-25

---

.footnote[U.S. Department of Commerce | National Oceanic and Atmospheric Administration | National Marine Fisheries Service]

---

# Notes

The template and css makes a presentation that has a few tweaks in `slides-style.css`.  `slide-style.css` is adapted from An RStudio workshop on data science [design-ds-classroom](https://github.com/rstudio-conf-2020/design-ds-classroom) by [Mine Cetinkaya-Rundel](https://github.com/mine-cetinkaya-rundel).

* I have tweaked the title slide css in `slides-style.css` and needed to remove `date:` from the yaml.
* `slides-style.css` has a number of extra customizations such as square for the bullets, some colored boxes, and a wide left column class.
* Instead of page numbers, there is a progress bar across the top.
* You may want to futz with the css for the title at the top of `slides-style.css`
* To add a Table of Contents, I wrote a helper function `render_toc.R` and add `name:` and `text:` to each slide. `name` should have no spaces. `text` is what you want to show for the TOC. If you leave off `text:`, it will use `name`. If you leave off `name`, the slide won't appear int he TOC.

---

## Table of Contents

At any time, you can press "O" (capital O) and see tiles of the slides that you can jump between.

.flexcolumn[
* [Side notes](#sidenotes)
* [Side margins](#sidemargins)
* [Footnotes](#Footnotes)
* [Boxes](#Boxes)
* [Boxes with side note](#boxside)
* [Plain title slide](#plaintitle)
* [Two columns](#twocolumn)
* [Three columns](#threecolumn)
* [Plot fills the slide](#full)
]

---
name: sidenotes
text: Side notes

## Side notes

.pull-left-wide[
1. This has side notes in a 'hand' font.
1. There is black and blue versions.
]
.pull-right-narrow[
.hand-blue[
You can add sidenotes. Here I have wrapped the text in `.hand-blue` to make it smaller and blue.
]

---
name: sidemargins
text: Side margins

## Side margin

- Figures
- References
- Images

Everything will get scaled to fit.
]
.pull-right-narrow[
.hand-blue[

```r
plot(1:10)
```

![](data:image/png;base64,#template-extra_files/figure-html/unnamed-chunk-1-1.png)

![](data:image/png;base64,#static/slideswooshver.png)
]
]

---
name: Footnotes

# Footnotes

Because the NMFS footnote is already occupying the footnote space, you need to add some linefeeds to move the footnote upward.

- some content
- a [link](http://www.google.com)

```r
r <- 2 + 2
```

---
name: Boxes

# Boxes

.bluebox[## Blue box
- The ## header will appear at the top in grey
- Or leave it off and add different text or header
]

.orangebox[## Orange box
<img src="data:image/png;base64,#template-extra_files/figure-html/unnamed-chunk-3-1.png" style="display: block; margin: auto;" />
]

---
name: boxside
text: Boxes with side note

# Boxes and side notes

.pull-left-wide[
.orangebox[## Orange box
<img src="data:image/png;base64,#template-extra_files/figure-html/unnamed-chunk-4-1.png" style="display: block; margin: auto;" />
]
]

.pull-right-narrow[
.hand-blue[
You can add sidenotes. Here I have wrapped the text in `.hand-blue` to make it smaller and blue.
]

.small[`.small` also works but the text is different. You can change this in the css. Note you need a linefeed in the side note code.
]

.small[If you leave off the line-feed, then it will use a span element and won't pick up the right line-height spacing.]]

---
name: plaintitle
text: Plain title slide

# A slide with just a title

---
name: twocolumn
text: Two columns

## Two column format

.pull-left[
- **ggplot2** is tidyverse's data visualization package
- The `gg` in "ggplot2" stands for Grammar of Graphics
- It is inspired by the book **Grammar of Graphics** by Leland Wilkinson
]
.pull-right[
- **ggplot2** is tidyverse's data visualization package
- The `gg` in "ggplot2" stands for Grammar of Graphics
- It is inspired by the book **Grammar of Graphics** by Leland Wilkinson
]

---
name: threecolumn
text: Three columns

## Three column format

You can have code.

```r
lm(mpg ~ hp, data=mtcars)
```

```
## 
## Call:
## lm(formula = mpg ~ hp, data = mtcars)
## 
## Coefficients:
## (Intercept)           hp  
##    30.09886     -0.06823
```
]

You can have images and embed video.

![](data:image/png;base64,#static/slideswooshver.png)

&#127758; January 25, 2022

&#127767; 09:00 - 17:00

&#127881;    [rverse](http://rverse-tutorials.github.io)

]

---
name: full
text: Plot fills the slide