Template - Tufte style

# Template - Tufte style
## Tufte fonts and line spacings
### Eli Holmes<br>NOAA Fisheries, NWFSC<br>Seattle, WA<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 is vaguely like a Tufte handout in that it has Tufte font and you can have side notes.

* 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.
* I couldn't get `self_contained: true` to work for this one so you cannot make a self-contained html file.

---

## Tufte style

### Changes

.pull-left-wide[
1. The Tufte style is best known for sidenotes `\(^1\)` but also has a number of other features.  
  - Tufte font
  - Specific size ratios for text to headers
  - Different line spacing
1. The Tufte style is specified in the `tufte.css`
]
.pull-right-narrow[
.hand-blue[
You can add sidenotes. Here I have wrapped the text in `.hand-blue` to make it smaller and blue.

`\(^1\)` In order to add a sidenote with number, you'll have to do that manually.
]
]

---

## You can put anything in the side margin

- Figures
- References
- Images

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

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

![](template-tufte_files/figure-html/unnamed-chunk-1-1.png)

![](static/slideswooshver.png)
]
]

---

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

---

# `slides-style.css` has 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="template-tufte_files/figure-html/unnamed-chunk-3-1.png" style="display: block; margin: auto;" />
]

---

# Boxes and side notes

.pull-left-wide[
.orangebox[## Orange box
<img src="template-tufte_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 not itallic or blue. Note you need a linefeed in the sidenote 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.]]

---

# A slide with just a title

---

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

---

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

![](static/slideswooshver.png)

&#127758; January 25, 2022

&#127767; 09:00 - 17:00

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

]