template-tufte.Rmd

---
title:  "Template - Tufte style"
subtitle: "Tufte fonts and line spacings"
author: "Eli Holmes<br>NOAA Fisheries, NWFSC<br>Seattle, WA<br>`r Sys.Date()`"
output:
  xaringan::moon_reader:
    css: ["xaringan-themer.css", "slides-style.css", "tufte.css"]
    lib_dir: libs
    nature:
      ratio: '4:3'
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      slideNumberFormat: |
        <div class="progress-bar-container">
          <div class="progress-bar" style="width: calc( (%current% - 1) / (%total% - 1) * 100%);">
          </div>
        </div>`
---
layout: true

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


```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

```{r xaringan-tile-view, echo=FALSE}
# this gives you a tile navigation if you type "O" at any time
xaringanExtra::use_tile_view()
```

---

# 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


.pull-left-wide[
The side margin is not limited to text.

- Figures
- References
- Images

Everything will get scaled to fit.
]
.pull-right-narrow[
.hand-blue[
```{r}
plot(1:10)
```

![](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
```

.footnote[It is quite finicky. Add a linefeed and it breaks.<br><br>]



---

# `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
```{r fig.height=2, echo=FALSE, fig.align='center'}
plot(1:100)
```
]

.yellowbox[## Yellow box
A note.
]

---

# Boxes and side notes

.pull-left-wide[
.orangebox[## Orange box
```{r fig.height=2, echo=FALSE, fig.align='center'}
plot(1:100)
```
]
]

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


---

class: middle

# 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

.three-column[
Column 1

You can have code.

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

.three-column[
Column 2

You can have images and embed video.

![](static/slideswooshver.png)

<iframe width="200" height="130" src="https://www.youtube.com/embed/BCMjVc9ncFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
]

.three-column[
Column 3

&#127758; January 25, 2022 

&#127767; 09:00 - 17:00  

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

]