├── .gitignore ├── 00_setup.R ├── 01-introduction ├── 01-start.Rmd ├── avahi-cleesei-01.jpg ├── avahi-cleesei-02.jpg ├── lemurs.rds └── madagascar.png ├── 02-style-guide └── 02-start.Rmd ├── 03-xaringan-extras ├── 03-end.Rmd ├── 03-start.Rmd ├── lemurs.rds └── xaringan-themer.css ├── 05-accessible-design ├── 05-end.Rmd ├── 05-start.Rmd ├── common-black-lemur.jpg ├── mytheme.css ├── ring-tailed-lemur.jpg └── xaringan-themer.css ├── 06-intro-css ├── 06-end.Rmd ├── 06-start.Rmd ├── extra.css ├── lemur.jpg ├── lemurs.rds └── xaringan-themer.css ├── 07-accessibility-css-html ├── 07-end.Rmd ├── 07-start.Rmd ├── common-black-lemur-female.jpg ├── common-black-lemur-male.jpg ├── extra.css └── xaringan-themer.css ├── 08-more-css ├── 08-end.Rmd ├── 08-start.Rmd └── xaringan-themer.css ├── 09-design-components ├── quote │ ├── 09-quote-end.Rmd │ ├── 09-quote-start.Rmd │ └── quote.css └── template │ ├── 09-template-end.Rmd │ ├── 09-template-start.Rmd │ ├── template.css │ └── xaringan-themer.css ├── LICENSE.md ├── README.md └── presentable-user2021.Rproj /.gitignore: -------------------------------------------------------------------------------- 1 | *.html 2 | *_files 3 | 4 | # ---- Default .gitignore From grkmisc ---- 5 | .Rproj.user 6 | .Rhistory 7 | .RData 8 | .DS_Store 9 | README.html 10 | 11 | # vscode 12 | .history/ 13 | 14 | # Directories that start with _ 15 | _*/ 16 | 17 | ## https://github.com/github/gitignore/blob/master/R.gitignore 18 | # History files 19 | .Rhistory 20 | .Rapp.history 21 | 22 | # Session Data files 23 | .RData 24 | 25 | # Example code in package build process 26 | *-Ex.R 27 | 28 | # Output files from R CMD build 29 | /*.tar.gz 30 | 31 | # Output files from R CMD check 32 | /*.Rcheck/ 33 | 34 | # RStudio files 35 | .Rproj.user/ 36 | 37 | # produced vignettes 38 | vignettes/*.html 39 | vignettes/*.pdf 40 | 41 | # OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 42 | .httr-oauth 43 | 44 | # knitr and R markdown default cache directories 45 | /*_cache/ 46 | /cache/ 47 | 48 | # Temporary files created by R markdown 49 | *.utf8.md 50 | *.knit.md 51 | 52 | # Shiny token, see https://shiny.rstudio.com/articles/shinyapps.html 53 | rsconnect/ 54 | 55 | ## https://github.com/github/gitignore/blob/master/Global/macOS.gitignore 56 | # General 57 | .DS_Store 58 | .AppleDouble 59 | .LSOverride 60 | 61 | # Icon must end with two \r 62 | Icon 63 | 64 | 65 | # Thumbnails 66 | ._* 67 | 68 | # Files that might appear in the root of a volume 69 | .DocumentRevisions-V100 70 | .fseventsd 71 | .Spotlight-V100 72 | .TemporaryItems 73 | .Trashes 74 | .VolumeIcon.icns 75 | .com.apple.timemachine.donotpresent 76 | 77 | # Directories potentially created on remote AFP share 78 | .AppleDB 79 | .AppleDesktop 80 | Network Trash Folder 81 | Temporary Items 82 | .apdisk 83 | -------------------------------------------------------------------------------- /00_setup.R: -------------------------------------------------------------------------------- 1 | # ┌ #useR!2021 ───────────────────────────┐ 2 | # │ │ 3 | # │ Professional, │ 4 | # │ Polished, │ 5 | # | Presentable │ 6 | # │ │ 7 | # └───────────────── @grrrck & @spcanelon ┘ 8 | # 9 | # https://presentable-user2021.netlify.app/ 10 | 11 | 12 | # Core Packages ----------------------------------------------------------- 13 | install.packages(c("xaringan", "metathis")) 14 | install.packages("xaringanthemer", dependencies = TRUE) 15 | 16 | 17 | # Extra Packages ---------------------------------------------------------- 18 | install.packages("remotes") 19 | remotes::install_github("gadenbuie/xaringanExtra") 20 | 21 | install.packages("fontawesome") 22 | -------------------------------------------------------------------------------- /01-introduction/01-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "01 - Setting the Stage" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | nature: 10 | slideNumberFormat: "%current%" 11 | highlightStyle: github 12 | highlightLines: true 13 | ratio: 16:9 14 | countIncrementalSlides: true 15 | --- 16 | 17 | ```{r setup, include=FALSE} 18 | options(htmltools.dir.version = FALSE) 19 | knitr::opts_chunk$set( 20 | fig.retina = 2, 21 | warning = FALSE, 22 | message = FALSE 23 | ) 24 | 25 | library(fontawesome) 26 | library(tidyverse) 27 | ``` 28 | 29 | class: inverse, middle, center 30 | 31 | 36 | 37 | # `r rmarkdown::metadata$author` 38 | 39 | [`r fa_i("wikipedia-w")` Wikipedia](https://en.wikipedia.org/wiki/Bemaraha_woolly_lemur)
40 | [`r fa_i("twitter")` @DukeLemurCenter](https://twitter.com/DukeLemurCenter)
41 | [`r fa_i("paper-plane")` avahi@cleesei.com](mailto:avahi@cleesei.com)
42 | 43 | ??? 44 | Hello! My name is Avahi Cleesei and I'm a Bemahara woolly lemur working as a researcher at Bemahara University in Madagascar. I'm excited to be here at useR!2021 to present some data collected by the Duke Lemur Center. 45 | 46 | This slide uses: 47 | - the `inverse`, `middle`, and `center` slide classes 48 | - an image inserted with html 49 | 50 | --- 51 | background-image: url(avahi-cleesei-02.jpg) 52 | background-position: right 53 | background-size: contain 54 | 55 | .pull-left[ 56 | # The Avahi cleesei lemur 57 | 58 | > A species of woolly lemur native to western Madagascar, named after [actor-comedian] John Cleese...mainly because of Cleese's fondness for lemurs...and his efforts at protecting and preserving them. 59 | 60 | > This diurnal animal...has brown skin with white regions on the rear and inside of the thighs and has a short damp nose, large plate eyes, and ears which hardly stand out from the skin. 61 | 62 | 63 | .footnote[ 64 | ---- 65 | - Original source: [Bemahara woolly lemur | Wikipedia](https://en.wikipedia.org/wiki/Bemaraha_woolly_lemur) 66 | - Illustration by [Rachel Hudson](https://lemur.duke.edu/100-lemurs/) 67 | ] 68 | 69 | ] 70 | 71 | ??? 72 | This slide uses: 73 | - a background image 74 | - the `.pull-left[]` class 75 | - a horizontal bar 76 | - the `.footnote[]` class 77 | - bullet list with `*` 78 | - quotes with `>` 79 | --- 80 | 81 | .left-column[ 82 | # Making lists 83 | ] 84 | 85 | .right-column[ 86 | Some facts about **lemurs** 87 | 88 | 1. Lemurs are considered _living fossils_ because they provide key clues about primate evolution 89 | 90 | 1. Lemurs are endemic to only Madagascar 91 | 92 | 1. 95% of lemur species are at risk of extinction 93 | 94 | 95 | .footnote[ 96 | ---- 97 | Original source: [Duke Lemur Center](https://lemur.duke.edu/protect/overview-madagascar-conservation-programs/) 98 | ] 99 | 100 | ] 101 | 102 | ??? 103 | This slide uses: 104 | - numbered list with `1.` 105 | - a horizontal bar 106 | - the `.footnote[]` class 107 | 108 | --- 109 | # Inserting images 110 | 111 | .pull-left[ 112 | 113 | ## Lemurs are endemic to only Madagascar 114 | 115 | .footnote[Image from [Odyssey Travels](https://www.odyssey-travels.com/site/assets/maps/positive/madagascar.png)] 116 | 117 | ] 118 | 119 | .pull-right[ 120 | 121 | ![Illustrated map of Madagascar with the Bemahara National Park highlighted on the Western-Central region of the island](madagascar.png) 122 | 123 | ] 124 | 125 | ??? 126 | This slide uses: 127 | - two different heading sizes: `#` and `##` 128 | - an image and accompanying alternative text inserted with `![]()` 129 | - `.pull-left[]` and `.pull-right[]` classes 130 | - the `.footnote[]` class 131 | 132 | --- 133 | # Tables 134 | 135 | The `lemur_data` dataset contains life histories for a variety of lemurs housed at the [Duke Lemur Center](https://lemur.duke.edu/about/history-mission/) in North Carolina, USA. 136 | 137 | ```{r lemur-births, echo=FALSE} 138 | lemurs <- readRDS("lemurs.rds") 139 | 140 | lemurs %>% 141 | arrange(desc(age_at_wt_y)) %>% 142 | head() %>% 143 | knitr::kable(format = 'html') 144 | ``` 145 | 146 | .footnote[ 147 | Data source: [Duke Lemur Center Data | Kaggle](https://www.kaggle.com/jessemostipak/duke-lemur-center-data) 148 | ] 149 | 150 | ??? 151 | This slide uses: 152 | - an R code chunk to produce the HTML table 153 | - the `.footnote[]` class 154 | 155 | --- 156 | # Highlighting code 157 | 158 | `> Inline code is differentiated by a monospace font face` 159 | 160 | You can highlight lines of code within code chunks using `#<<` which adds a yellow background: 161 | 162 | ### Code 163 | 164 | ```r 165 | lemurs %>% filter(birth_type != "unknown") %>% 166 | ggplot(aes(x = dob, fill = birth_type)) + 167 | geom_histogram() + #<< 168 | minimal_theme() 169 | ``` 170 | 171 | ### Output 172 | 173 | ```{r eval=FALSE, echo=TRUE} 174 | lemurs %>% filter(birth_type != "unknown") %>% 175 | ggplot(aes(x = dob, fill = birth_type)) + 176 | geom_histogram() + #<< 177 | minimal_theme() 178 | ``` 179 | 180 | ??? 181 | This slide uses: 182 | - inline code highlighting with backticks ` `` ` 183 | - a code chunk to produce a ggplot 184 | 185 | --- 186 | 187 | ```{r, eval=TRUE, echo=TRUE, fig.height=6.5, fig.width=14, fig.alt="Histogram of unique lemur births between 1975 and 2019 showing more births took place in captivity than in the wild, with most births concentrated between 1975 and 2000. Births in the wild peaked near 1985 at almost 300 births and again near 2012 at about 100 births. Births in captivity had a plateau between 1980 and 1985 at about 25 births"} 188 | lemurs %>% filter(birth_type != "unknown") %>% 189 | ggplot(aes(x = dob, fill = birth_type)) + 190 | geom_histogram() + 191 | theme_minimal() 192 | ``` 193 | 194 | ??? 195 | This slide uses: 196 | - a code chunk to produce a ggplot 197 | - code chunk option `fig.height = 6.5` and `fig.width = 14` to control the figure height and width 198 | 199 | --- 200 | class: middle, inverse 201 | 202 | .pull-left[ 203 | # Thank you! 204 |

205 | ## `r rmarkdown::metadata$author` 206 | 207 | ### `r rmarkdown::metadata$institute` 208 | ] 209 | 210 | .pull-right[ 211 | .right[ 212 | 216 | 217 | [`r fa_i("wikipedia-w")` Wikipedia](https://en.wikipedia.org/wiki/Bemaraha_woolly_lemur)
218 | [`r fa_i("twitter")` @DukeLemurCenter](https://twitter.com/DukeLemurCenter)
219 | [`r fa_i("paper-plane")` avahi@cleesei.com](mailto:avahi@cleesei.com) 220 | ] 221 | ] 222 | 223 | ??? 224 | Thank you for joining me! 225 | You can find my contact information linked on this slide if you want to get in touch, and I'm happy to take any questions. 226 | 227 | This slide contains 228 | - `.pull-left[]` and `.pull-right[]` classes 229 | - `.right[]` class 230 | -------------------------------------------------------------------------------- /01-introduction/avahi-cleesei-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/01-introduction/avahi-cleesei-01.jpg -------------------------------------------------------------------------------- /01-introduction/avahi-cleesei-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/01-introduction/avahi-cleesei-02.jpg -------------------------------------------------------------------------------- /01-introduction/lemurs.rds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/01-introduction/lemurs.rds -------------------------------------------------------------------------------- /01-introduction/madagascar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/01-introduction/madagascar.png -------------------------------------------------------------------------------- /02-style-guide/02-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Presentation Ninja" 3 | subtitle: "⚔️ xaringan +
😎 xaringanthemer" 4 | author: 5 | - "Yihui Xie" 6 | - "Garrick Aden-Buie" 7 | date: '`r Sys.Date()`' 8 | output: 9 | xaringan::moon_reader: 10 | css: xaringan-themer.css 11 | nature: 12 | slideNumberFormat: "%current%" 13 | highlightStyle: github 14 | highlightLines: true 15 | ratio: 16:9 16 | countIncrementalSlides: true 17 | --- 18 | 19 | ```{r setup, include=FALSE} 20 | options(htmltools.dir.version = FALSE) 21 | knitr::opts_chunk$set( 22 | fig.width=9, fig.height=3.5, fig.retina=3, 23 | out.width = "100%", 24 | cache = FALSE, 25 | echo = TRUE, 26 | message = FALSE, 27 | warning = FALSE, 28 | hiline = TRUE 29 | ) 30 | ``` 31 | 32 | ```{r xaringan-themer, include=FALSE, warning=FALSE} 33 | library(xaringanthemer) 34 | 35 | style_duo_accent( 36 | primary_color = "#1381B0", # Blue 37 | secondary_color = "#FF961C" # Yellow/orange 38 | inverse_header_color = "#FFFFFF" 39 | ) 40 | ``` 41 | 42 | ## Typography 43 | 44 | Text can be **bold**, _italic_, ~~strikethrough~~, or `inline code`. 45 | 46 | [Link to another slide](#colors). 47 | 48 | ### Lorem Ipsum 49 | 50 | Dolor imperdiet nostra sapien scelerisque praesent curae metus facilisis dignissim tortor. 51 | Lacinia neque mollis nascetur neque urna velit bibendum. 52 | Himenaeos suspendisse leo varius mus risus sagittis aliquet venenatis duis nec. 53 | 54 | - Dolor cubilia nostra nunc sodales 55 | 56 | - Consectetur aliquet mauris blandit 57 | 58 | - Ipsum dis nec porttitor urna sed 59 | 60 | --- 61 | name: colors 62 | 63 | ## Colors 64 | 65 | .left-column[ 66 | Text color 67 | 68 | [Link Color](#3) 69 | 70 | **Bold Color** 71 | 72 | _Italic Color_ 73 | 74 | `Inline Code` 75 | ] 76 | 77 | .right-column[ 78 | Lorem ipsum dolor sit amet, [consectetur adipiscing elit (link)](#3), 79 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 80 | Erat nam at lectus urna. 81 | Pellentesque elit ullamcorper **dignissim cras tincidunt (bold)** lobortis feugiat. 82 | _Eros donec ac odio tempor_ orci dapibus ultrices. 83 | Id porta nibh venenatis cras sed felis eget velit aliquet. 84 | Aliquam id diam maecenas ultricies mi. 85 | Enim sit amet 86 | `code_color("inline")` 87 | venenatis urna cursus eget nunc scelerisque viverra. 88 | ] 89 | 90 | --- 91 | 92 | # Big Topic or Inverse Slides `#` 93 | 94 | ## Slide Headings `##` 95 | 96 | ### Sub-slide Headings `###` 97 | 98 | #### Bold Call-Out `####` 99 | 100 | This is a normal paragraph text. Only use header levels 1-4. 101 | 102 | ##### Possible, but not recommended `#####` 103 | 104 | ###### Definitely don't use h6 `######` 105 | 106 | --- 107 | 108 | # Left-Column Headings 109 | 110 | .left-column[ 111 | ## First 112 | 113 | ## Second 114 | 115 | ## Third 116 | ] 117 | 118 | .right-column[ 119 | Dolor quis aptent mus a dictum ultricies egestas. 120 | 121 | Amet egestas neque tempor fermentum proin massa! 122 | 123 | Dolor elementum fermentum pharetra lectus arcu pulvinar. 124 | ] 125 | 126 | --- 127 | class: inverse center middle 128 | 129 | # Topic Changing Interstitial 130 | 131 | -- 132 | 133 | ``` 134 | class: inverse center middle 135 | ``` 136 | 137 | --- 138 | layout: true 139 | 140 | ## Blocks 141 | 142 | --- 143 | 144 | ### Blockquote 145 | 146 | > This is a blockquote following a header. 147 | > 148 | > When something is important enough, you do it even if the odds are not in your favor. 149 | 150 | --- 151 | 152 | ### Code Blocks 153 | 154 | #### R Code 155 | 156 | ```{r eval=FALSE} 157 | ggplot(gapminder) + 158 | aes(x = gdpPercap, y = lifeExp, size = pop, color = country) + 159 | geom_point() + 160 | facet_wrap(~year) 161 | ``` 162 | 163 | #### JavaScript 164 | 165 | ```js 166 | var fun = function lang(l) { 167 | dateformat.i18n = require('./lang/' + l) 168 | return true; 169 | } 170 | ``` 171 | 172 | --- 173 | 174 | ### More R Code 175 | 176 | ```{r eval=FALSE} 177 | dplyr::starwars %>% dplyr::slice_sample(n = 4) 178 | ``` 179 | 180 | --- 181 | 182 | ```{r message=TRUE, eval=requireNamespace("cli", quietly = TRUE)} 183 | cli::cli_alert_success("It worked!") 184 | ``` 185 | 186 | -- 187 | 188 | ```{r message=TRUE} 189 | message("Just a friendly message") 190 | ``` 191 | 192 | -- 193 | 194 | ```{r warning=TRUE} 195 | warning("This could be bad...") 196 | ``` 197 | 198 | -- 199 | 200 | ```{r error=TRUE} 201 | stop("I hope you're sitting down for this") 202 | ``` 203 | 204 | 205 | --- 206 | layout: true 207 | 208 | ## Tables 209 | 210 | --- 211 | exclude: `r if (requireNamespace("tibble", quietly=TRUE)) "false" else "true"` 212 | 213 | ```{r eval=requireNamespace("tibble", quietly=TRUE)} 214 | tibble::as_tibble(mtcars) 215 | ``` 216 | 217 | --- 218 | 219 | ```{r} 220 | knitr::kable(head(mtcars), format = 'html') 221 | ``` 222 | 223 | --- 224 | exclude: `r if (requireNamespace("DT", quietly=TRUE)) "false" else "true"` 225 | 226 | ```{r eval=requireNamespace("DT", quietly=TRUE)} 227 | DT::datatable(head(mtcars), fillContainer = FALSE, options = list(pageLength = 4)) 228 | ``` 229 | 230 | --- 231 | layout: true 232 | 233 | ## Lists 234 | 235 | --- 236 | 237 | .pull-left[ 238 | #### Here is an unordered list: 239 | 240 | * Item foo 241 | * Item bar 242 | * Item baz 243 | * Item zip 244 | ] 245 | 246 | .pull-right[ 247 | 248 | #### And an ordered list: 249 | 250 | 1. Item one 251 | 1. Item two 252 | 1. Item three 253 | 1. Item four 254 | ] 255 | 256 | --- 257 | 258 | ### And a nested list: 259 | 260 | - level 1 item 261 | - level 2 item 262 | - level 2 item 263 | - level 3 item 264 | - level 3 item 265 | - level 1 item 266 | - level 2 item 267 | - level 2 item 268 | - level 2 item 269 | - level 1 item 270 | - level 2 item 271 | - level 2 item 272 | - level 1 item 273 | 274 | --- 275 | 276 | ### Nesting an ol in ul in an ol 277 | 278 | - level 1 item (ul) 279 | 1. level 2 item (ol) 280 | 1. level 2 item (ol) 281 | - level 3 item (ul) 282 | - level 3 item (ul) 283 | - level 1 item (ul) 284 | 1. level 2 item (ol) 285 | 1. level 2 item (ol) 286 | - level 3 item (ul) 287 | - level 3 item (ul) 288 | 1. level 4 item (ol) 289 | 1. level 4 item (ol) 290 | - level 3 item (ul) 291 | - level 3 item (ul) 292 | - level 1 item (ul) 293 | 294 | --- 295 | layout: true 296 | 297 | ## Plots 298 | 299 | --- 300 | 301 | ```{r plot-example, eval=requireNamespace("ggplot2", quietly=TRUE)} 302 | library(ggplot2) 303 | (g <- ggplot(mpg) + aes(hwy, cty, color = class) + geom_point()) 304 | ``` 305 | 306 | --- 307 | 308 | ```{r plot-example-themed, eval=requireNamespace("ggplot2", quietly=TRUE)} 309 | g + xaringanthemer::theme_xaringan(text_font_size = 16, title_font_size = 18) + 310 | ggtitle("A Plot About Cars") 311 | ``` 312 | 313 | --- 314 | layout: false 315 | 316 | ## Square image 317 | 318 |
319 | 320 | .footnote[GitHub Octocat] 321 | 322 | --- 323 | 324 | ### Wide image 325 | 326 | ![](https://guides.github.com/activities/hello-world/branching.png) 327 | 328 | .footnote[Wide images scale to 100% slide width] 329 | 330 | --- 331 | 332 | ## Two images 333 | 334 | .pull-left[ 335 | ![](https://octodex.github.com/images/motherhubbertocat.png) 336 | ] 337 | 338 | .pull-right[ 339 | ![](https://octodex.github.com/images/dinotocat.png) 340 | ] 341 | 342 | --- 343 | 344 | ### Definition lists can be used with HTML syntax. 345 | 346 |
347 |
Name
348 |
Godzilla
349 |
Born
350 |
1952
351 |
Birthplace
352 |
Japan
353 |
Color
354 |
Green
355 |
356 | 357 | --- 358 | class: center, middle 359 | 360 | # Thanks! 361 | 362 | Slides created via the R packages: 363 | 364 | [**xaringan**](https://github.com/yihui/xaringan)
365 | [gadenbuie/xaringanthemer](https://github.com/gadenbuie/xaringanthemer) 366 | 367 | The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), and [R Markdown](https://rmarkdown.rstudio.com). 368 | -------------------------------------------------------------------------------- /03-xaringan-extras/03-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "03 - xaringan extras" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: xaringan-themer.css 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | 25 | # https://presentable-user2021.netlify.app/materials/act-02/03-xaringan-extras/#activity 26 | ``` 27 | 28 | ```{r xaringanExtra, echo=FALSE} 29 | xaringanExtra::use_xaringan_extra(c("panelset", "scribble")) 30 | ``` 31 | 32 | .panelset[ 33 | 34 | ```{r, panelset = TRUE} 35 | library(tidyverse) 36 | lemurs <- readRDS("lemurs.rds") 37 | 38 | lemurs %>% 39 | filter( 40 | common_name == "Ring-Tailed Lemur", 41 | between(age_at_wt_y, 1, 5) 42 | ) %>% 43 | ggplot() + 44 | aes(x = age_at_wt_y, y = weight) + 45 | geom_point() + 46 | labs( 47 | x = "Age at Weight", 48 | y = "Weight (g)", 49 | title = "Weight Gain of Young Ring-Tailed Lemurs" 50 | ) 51 | ``` 52 | 53 | .panel[.panel-name[Regression] 54 | 55 | ```{r echo=FALSE} 56 | last_plot() + geom_smooth(method = "lm") 57 | ``` 58 | 59 | ] 60 | 61 | ] 62 | -------------------------------------------------------------------------------- /03-xaringan-extras/03-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "03 - xaringan extras" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: xaringan-themer.css 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | 25 | # https://presentable-user2021.netlify.app/materials/act-02/03-xaringan-extras/#activity 26 | ``` 27 | 28 | ```{r lemur-weight} 29 | library(tidyverse) 30 | lemurs <- readRDS("lemurs.rds") 31 | 32 | lemurs %>% 33 | filter( 34 | common_name == "Ring-Tailed Lemur", 35 | between(age_at_wt_y, 1, 5) 36 | ) %>% 37 | ggplot() + 38 | aes(x = age_at_wt_y, y = weight) + 39 | geom_point() + 40 | labs( 41 | x = "Age at Weight", 42 | y = "Weight (g)", 43 | title = "Weight Gain of Young Ring-Tailed Lemurs" 44 | ) 45 | ``` 46 | -------------------------------------------------------------------------------- /03-xaringan-extras/lemurs.rds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/03-xaringan-extras/lemurs.rds -------------------------------------------------------------------------------- /03-xaringan-extras/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #035AA6; 105 | } 106 | .remark-slide-number { 107 | color: #035AA6; 108 | opacity: 1; 109 | font-size: 0.9rem; 110 | } 111 | strong { 112 | font-weight: bold; 113 | color: var(--text-bold-color); 114 | } 115 | a, a > code { 116 | color: var(--link-color); 117 | text-decoration: none; 118 | } 119 | .footnote { 120 | position: absolute; 121 | bottom: 60px; 122 | padding-right: 4em; 123 | font-size: 0.9em; 124 | } 125 | .remark-code-line-highlighted { 126 | background-color: var(--code-highlight-color); 127 | } 128 | .inverse { 129 | background-color: var(--inverse-background-color); 130 | color: var(--inverse-text-color); 131 | 132 | } 133 | .inverse h1, .inverse h2, .inverse h3 { 134 | color: var(--inverse-header-color); 135 | } 136 | .inverse a, .inverse a > code { 137 | color: var(--inverse-link-color); 138 | } 139 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 140 | color: var(--title-slide-text-color); 141 | } 142 | .title-slide { 143 | background-color: var(--title-slide-background-color); 144 | } 145 | .title-slide .remark-slide-number { 146 | display: none; 147 | } 148 | /* Two-column layout */ 149 | .left-column { 150 | width: 20%; 151 | height: 92%; 152 | float: left; 153 | } 154 | .left-column h2, .left-column h3 { 155 | color: #035AA699; 156 | } 157 | .left-column h2:last-of-type, .left-column h3:last-child { 158 | color: #035AA6; 159 | } 160 | .right-column { 161 | width: 75%; 162 | float: right; 163 | padding-top: 1em; 164 | } 165 | .pull-left { 166 | float: left; 167 | width: 47%; 168 | } 169 | .pull-right { 170 | float: right; 171 | width: 47%; 172 | } 173 | .pull-right + * { 174 | clear: both; 175 | } 176 | img, video, iframe { 177 | max-width: 100%; 178 | } 179 | blockquote { 180 | border-left: solid 5px #03A69680; 181 | padding-left: 1em; 182 | } 183 | .remark-slide table { 184 | margin: auto; 185 | border-top: 1px solid #666; 186 | border-bottom: 1px solid #666; 187 | } 188 | .remark-slide table thead th { 189 | border-bottom: 1px solid #ddd; 190 | } 191 | th, td { 192 | padding: 5px; 193 | } 194 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 195 | background: #CCEDEA; 196 | } 197 | table.dataTable tbody { 198 | background-color: var(--background-color); 199 | color: var(--text-color); 200 | } 201 | table.dataTable.display tbody tr.odd { 202 | background-color: var(--background-color); 203 | } 204 | table.dataTable.display tbody tr.even { 205 | background-color: #CCEDEA; 206 | } 207 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 208 | background-color: rgba(255, 255, 255, 0.5); 209 | } 210 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 211 | color: var(--text-color); 212 | } 213 | .dataTables_wrapper .dataTables_paginate .paginate_button { 214 | color: var(--text-color) !important; 215 | } 216 | 217 | /* Slide Header Background for h1 elements */ 218 | .remark-slide-content.header_background > h1 { 219 | display: block; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | width: 100%; 224 | background: var(--header-background-color); 225 | color: var(--header-background-text-color); 226 | padding: 2rem 64px 1.5rem 64px; 227 | margin-top: 0; 228 | box-sizing: border-box; 229 | } 230 | .remark-slide-content.header_background { 231 | padding-top: 7rem; 232 | } 233 | 234 | @page { margin: 0; } 235 | @media print { 236 | .remark-slide-scaler { 237 | width: 100% !important; 238 | height: 100% !important; 239 | transform: scale(1) !important; 240 | top: 0 !important; 241 | left: 0 !important; 242 | } 243 | } 244 | 245 | .primary { 246 | color: var(--primary); 247 | } 248 | .bg-primary { 249 | background-color: var(--primary); 250 | } 251 | .secondary { 252 | color: var(--secondary); 253 | } 254 | .bg-secondary { 255 | background-color: var(--secondary); 256 | } 257 | .white { 258 | color: var(--white); 259 | } 260 | .bg-white { 261 | background-color: var(--white); 262 | } 263 | .black { 264 | color: var(--black); 265 | } 266 | .bg-black { 267 | background-color: var(--black); 268 | } 269 | 270 | -------------------------------------------------------------------------------- /05-accessible-design/05-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "05 - Accessible Design" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: xaringan-themer.css 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | options(htmltools.dir.version = FALSE) 20 | knitr::opts_chunk$set( 21 | fig.width=9, fig.height=4, fig.retina=3, 22 | out.width="100%", 23 | message = FALSE 24 | ) 25 | ``` 26 | 27 | ```{r xaringanthemer, include=FALSE} 28 | library(xaringanthemer) 29 | style_duo_accent( 30 | primary_color = "#035AA6", # default primary color in xaringanthemer.css 31 | secondary_color = "#03A696" # default secondary color in xaringanthemer.css 32 | ) 33 | ``` 34 | 35 | # Ring-tailed Lemurs 36 | 37 | .pull-left[ 38 | 39 | - Among ring-tailed lemurs, single dominant females lead large groups of up to 30 lemurs. 40 | 41 | - When traveling as a group on the ground, lemurs hold their tails high like flags to keep the large group together. 42 | 43 | - The Duke Lemur Center provides more information on the [Ring-tailed Lemurs species page](https://lemur.duke.edu/accordions/ring-tailed-lemurs-species-page/) 44 | 45 | ] 46 | 47 | .pull-right[ 48 | 49 | ```{r, echo=FALSE, fig.alt="Ring-tailed lemurs with alternating black and white rings along the entire length of their tail"} 50 | knitr::include_graphics("ring-tailed-lemur.jpg") 51 | ``` 52 | 53 | ] 54 | 55 | 56 | .footnote[Illustration by [Rachel Hudson](https://lemur.duke.edu/100-lemurs/)] 57 | -------------------------------------------------------------------------------- /05-accessible-design/05-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "05 - Accessible Design" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: xaringan-themer.css 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | options(htmltools.dir.version = FALSE) 20 | knitr::opts_chunk$set( 21 | fig.width=9, fig.height=4, fig.retina=2, 22 | out.width="100%", 23 | message = FALSE 24 | ) 25 | ``` 26 | 27 | ```{r xaringanthemer, include=FALSE} 28 | library(xaringanthemer) 29 | style_duo_accent( 30 | primary_color = "#035AA6", # default primary color in xaringanthemer.css 31 | secondary_color = "#03A696" # default secondary color in xaringanthemer.css 32 | ) 33 | ``` 34 | 35 | # Ring-tailed Lemurs 36 | 37 | .pull-left[ 38 | 39 | - Among ring-tailed lemurs, single dominant females lead large groups of up to 30 lemurs. 40 | 41 | - When traveling as a group on the ground, lemurs hold their tails high like flags to keep the large group together. 42 | 43 | - The Duke Lemur Center provides more information [here](https://lemur.duke.edu/accordions/ring-tailed-lemurs-species-page/) 44 | 45 | ] 46 | 47 | .pull-right[ 48 | 49 | ```{r, echo=FALSE, fig.alt=""} 50 | knitr::include_graphics("ring-tailed-lemur.jpg") 51 | ``` 52 | 53 | ] 54 | 55 | .footnote[Illustration by [Rachel Hudson](https://lemur.duke.edu/100-lemurs/)] 56 | -------------------------------------------------------------------------------- /05-accessible-design/common-black-lemur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/05-accessible-design/common-black-lemur.jpg -------------------------------------------------------------------------------- /05-accessible-design/mytheme.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #035AA6; 105 | } 106 | .remark-slide-number { 107 | color: #035AA6; 108 | opacity: 1; 109 | font-size: 0.9rem; 110 | } 111 | strong { 112 | font-weight: bold; 113 | color: var(--text-bold-color); 114 | } 115 | a, a > code { 116 | color: var(--link-color); 117 | text-decoration: none; 118 | } 119 | .footnote { 120 | position: absolute; 121 | bottom: 60px; 122 | padding-right: 4em; 123 | font-size: 0.9em; 124 | } 125 | .remark-code-line-highlighted { 126 | background-color: var(--code-highlight-color); 127 | } 128 | .inverse { 129 | background-color: var(--inverse-background-color); 130 | color: var(--inverse-text-color); 131 | 132 | } 133 | .inverse h1, .inverse h2, .inverse h3 { 134 | color: var(--inverse-header-color); 135 | } 136 | .inverse a, .inverse a > code { 137 | color: var(--inverse-link-color); 138 | } 139 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 140 | color: var(--title-slide-text-color); 141 | } 142 | .title-slide { 143 | background-color: var(--title-slide-background-color); 144 | } 145 | .title-slide .remark-slide-number { 146 | display: none; 147 | } 148 | /* Two-column layout */ 149 | .left-column { 150 | width: 20%; 151 | height: 92%; 152 | float: left; 153 | } 154 | .left-column h2, .left-column h3 { 155 | color: #035AA699; 156 | } 157 | .left-column h2:last-of-type, .left-column h3:last-child { 158 | color: #035AA6; 159 | } 160 | .right-column { 161 | width: 75%; 162 | float: right; 163 | padding-top: 1em; 164 | } 165 | .pull-left { 166 | float: left; 167 | width: 47%; 168 | } 169 | .pull-right { 170 | float: right; 171 | width: 47%; 172 | } 173 | .pull-right + * { 174 | clear: both; 175 | } 176 | img, video, iframe { 177 | max-width: 100%; 178 | } 179 | blockquote { 180 | border-left: solid 5px #03A69680; 181 | padding-left: 1em; 182 | } 183 | .remark-slide table { 184 | margin: auto; 185 | border-top: 1px solid #666; 186 | border-bottom: 1px solid #666; 187 | } 188 | .remark-slide table thead th { 189 | border-bottom: 1px solid #ddd; 190 | } 191 | th, td { 192 | padding: 5px; 193 | } 194 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 195 | background: #CCEDEA; 196 | } 197 | table.dataTable tbody { 198 | background-color: var(--background-color); 199 | color: var(--text-color); 200 | } 201 | table.dataTable.display tbody tr.odd { 202 | background-color: var(--background-color); 203 | } 204 | table.dataTable.display tbody tr.even { 205 | background-color: #CCEDEA; 206 | } 207 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 208 | background-color: rgba(255, 255, 255, 0.5); 209 | } 210 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 211 | color: var(--text-color); 212 | } 213 | .dataTables_wrapper .dataTables_paginate .paginate_button { 214 | color: var(--text-color) !important; 215 | } 216 | 217 | /* Slide Header Background for h1 elements */ 218 | .remark-slide-content.header_background > h1 { 219 | display: block; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | width: 100%; 224 | background: var(--header-background-color); 225 | color: var(--header-background-text-color); 226 | padding: 2rem 64px 1.5rem 64px; 227 | margin-top: 0; 228 | box-sizing: border-box; 229 | } 230 | .remark-slide-content.header_background { 231 | padding-top: 7rem; 232 | } 233 | 234 | @page { margin: 0; } 235 | @media print { 236 | .remark-slide-scaler { 237 | width: 100% !important; 238 | height: 100% !important; 239 | transform: scale(1) !important; 240 | top: 0 !important; 241 | left: 0 !important; 242 | } 243 | } 244 | 245 | .primary { 246 | color: var(--primary); 247 | } 248 | .bg-primary { 249 | background-color: var(--primary); 250 | } 251 | .secondary { 252 | color: var(--secondary); 253 | } 254 | .bg-secondary { 255 | background-color: var(--secondary); 256 | } 257 | .white { 258 | color: var(--white); 259 | } 260 | .bg-white { 261 | background-color: var(--white); 262 | } 263 | .black { 264 | color: var(--black); 265 | } 266 | .bg-black { 267 | background-color: var(--black); 268 | } 269 | 270 | -------------------------------------------------------------------------------- /05-accessible-design/ring-tailed-lemur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/05-accessible-design/ring-tailed-lemur.jpg -------------------------------------------------------------------------------- /05-accessible-design/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #035AA6; 105 | } 106 | .remark-slide-number { 107 | color: #035AA6; 108 | opacity: 1; 109 | font-size: 0.9rem; 110 | } 111 | strong { 112 | font-weight: bold; 113 | color: var(--text-bold-color); 114 | } 115 | a, a > code { 116 | color: var(--link-color); 117 | text-decoration: none; 118 | } 119 | .footnote { 120 | position: absolute; 121 | bottom: 60px; 122 | padding-right: 4em; 123 | font-size: 0.9em; 124 | } 125 | .remark-code-line-highlighted { 126 | background-color: var(--code-highlight-color); 127 | } 128 | .inverse { 129 | background-color: var(--inverse-background-color); 130 | color: var(--inverse-text-color); 131 | 132 | } 133 | .inverse h1, .inverse h2, .inverse h3 { 134 | color: var(--inverse-header-color); 135 | } 136 | .inverse a, .inverse a > code { 137 | color: var(--inverse-link-color); 138 | } 139 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 140 | color: var(--title-slide-text-color); 141 | } 142 | .title-slide { 143 | background-color: var(--title-slide-background-color); 144 | } 145 | .title-slide .remark-slide-number { 146 | display: none; 147 | } 148 | /* Two-column layout */ 149 | .left-column { 150 | width: 20%; 151 | height: 92%; 152 | float: left; 153 | } 154 | .left-column h2, .left-column h3 { 155 | color: #035AA699; 156 | } 157 | .left-column h2:last-of-type, .left-column h3:last-child { 158 | color: #035AA6; 159 | } 160 | .right-column { 161 | width: 75%; 162 | float: right; 163 | padding-top: 1em; 164 | } 165 | .pull-left { 166 | float: left; 167 | width: 47%; 168 | } 169 | .pull-right { 170 | float: right; 171 | width: 47%; 172 | } 173 | .pull-right + * { 174 | clear: both; 175 | } 176 | img, video, iframe { 177 | max-width: 100%; 178 | } 179 | blockquote { 180 | border-left: solid 5px #03A69680; 181 | padding-left: 1em; 182 | } 183 | .remark-slide table { 184 | margin: auto; 185 | border-top: 1px solid #666; 186 | border-bottom: 1px solid #666; 187 | } 188 | .remark-slide table thead th { 189 | border-bottom: 1px solid #ddd; 190 | } 191 | th, td { 192 | padding: 5px; 193 | } 194 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 195 | background: #CCEDEA; 196 | } 197 | table.dataTable tbody { 198 | background-color: var(--background-color); 199 | color: var(--text-color); 200 | } 201 | table.dataTable.display tbody tr.odd { 202 | background-color: var(--background-color); 203 | } 204 | table.dataTable.display tbody tr.even { 205 | background-color: #CCEDEA; 206 | } 207 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 208 | background-color: rgba(255, 255, 255, 0.5); 209 | } 210 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 211 | color: var(--text-color); 212 | } 213 | .dataTables_wrapper .dataTables_paginate .paginate_button { 214 | color: var(--text-color) !important; 215 | } 216 | 217 | /* Slide Header Background for h1 elements */ 218 | .remark-slide-content.header_background > h1 { 219 | display: block; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | width: 100%; 224 | background: var(--header-background-color); 225 | color: var(--header-background-text-color); 226 | padding: 2rem 64px 1.5rem 64px; 227 | margin-top: 0; 228 | box-sizing: border-box; 229 | } 230 | .remark-slide-content.header_background { 231 | padding-top: 7rem; 232 | } 233 | 234 | @page { margin: 0; } 235 | @media print { 236 | .remark-slide-scaler { 237 | width: 100% !important; 238 | height: 100% !important; 239 | transform: scale(1) !important; 240 | top: 0 !important; 241 | left: 0 !important; 242 | } 243 | } 244 | 245 | .primary { 246 | color: var(--primary); 247 | } 248 | .bg-primary { 249 | background-color: var(--primary); 250 | } 251 | .secondary { 252 | color: var(--secondary); 253 | } 254 | .bg-secondary { 255 | background-color: var(--secondary); 256 | } 257 | .white { 258 | color: var(--white); 259 | } 260 | .bg-white { 261 | background-color: var(--white); 262 | } 263 | .black { 264 | color: var(--black); 265 | } 266 | .bg-black { 267 | background-color: var(--black); 268 | } 269 | 270 | -------------------------------------------------------------------------------- /06-intro-css/06-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "06 - Introduction to CSS" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | ```{css extra.css, echo=FALSE} 27 | /* ---- extra.css ---- */ 28 | .big { 29 | font-size: 2em; 30 | color: CornFlowerBlue; 31 | } 32 | 33 | .fade { 34 | opacity: 0.66; 35 | } 36 | ``` 37 | 38 | class: center middle 39 | 40 | 🗺 [Introduction to CSS Activity](https://presentable-user2021.netlify.app/materials/act-02/06-css-into/#activity) 41 | 42 | --- 43 | class: center middle 44 | 45 | Lemurs are the .big[most endangered] mammals on Earth 46 | 47 | .fade[ 48 | ![A cute lemur](lemur.jpg) 49 | ] 50 | 51 | 52 | 53 | 54 | 55 | 56 | --- 57 | 58 | ```{r lemur-weight, fig.show='hide'} 59 | library(tidyverse) 60 | lemurs <- readRDS("lemurs.rds") 61 | 62 | lemurs %>% 63 | filter( 64 | common_name == "Ring-Tailed Lemur", 65 | between(age_at_wt_y, 1, 5) 66 | ) %>% 67 | ggplot() + 68 | aes(x = age_at_wt_y, y = weight) + 69 | geom_point() + 70 | labs( 71 | x = "Age at Weight", 72 | y = "Weight (g)", 73 | title = "Weight Gain of Young Ring-Tailed Lemurs" 74 | ) 75 | ``` 76 | 77 | .bottom-right[![Plot of lemur weights](06-end_files/figure-html/lemur-weight-1.png)] 78 | 79 | 89 | -------------------------------------------------------------------------------- /06-intro-css/06-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "06 - Introduction to CSS" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css, extra.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | class: center middle 27 | 28 | 🗺 [Introduction to CSS Activity](https://presentable-user2021.netlify.app/materials/act-02/06-css-into/#activity) 29 | 30 | --- 31 | class: center middle 32 | 33 | Lemurs are the most endangered mammals on Earth 34 | 35 | ![A cute lemur](lemur.jpg) 36 | 37 | 38 | 39 | 40 | 41 | 42 | --- 43 | 44 | ```{r lemur-weight, fig.show='hide'} 45 | library(tidyverse) 46 | lemurs <- readRDS("lemurs.rds") 47 | 48 | lemurs %>% 49 | filter( 50 | common_name == "Ring-Tailed Lemur", 51 | between(age_at_wt_y, 1, 5) 52 | ) %>% 53 | ggplot() + 54 | aes(x = age_at_wt_y, y = weight) + 55 | geom_point() + 56 | labs( 57 | x = "Age at Weight", 58 | y = "Weight (g)", 59 | title = "Weight Gain of Young Ring-Tailed Lemurs" 60 | ) 61 | ``` 62 | 63 | ![Plot of lemur weights](06-start_files/figure-html/lemur-weight-1.png) 64 | 65 | -------------------------------------------------------------------------------- /06-intro-css/extra.css: -------------------------------------------------------------------------------- 1 | .big { 2 | font-size: 2em; 3 | } 4 | -------------------------------------------------------------------------------- /06-intro-css/lemur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/06-intro-css/lemur.jpg -------------------------------------------------------------------------------- /06-intro-css/lemurs.rds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/06-intro-css/lemurs.rds -------------------------------------------------------------------------------- /06-intro-css/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #035AA6; 105 | } 106 | .remark-slide-number { 107 | color: #035AA6; 108 | opacity: 1; 109 | font-size: 0.9rem; 110 | } 111 | strong { 112 | font-weight: bold; 113 | color: var(--text-bold-color); 114 | } 115 | a, a > code { 116 | color: var(--link-color); 117 | text-decoration: none; 118 | } 119 | .footnote { 120 | position: absolute; 121 | bottom: 60px; 122 | padding-right: 4em; 123 | font-size: 0.9em; 124 | } 125 | .remark-code-line-highlighted { 126 | background-color: var(--code-highlight-color); 127 | } 128 | .inverse { 129 | background-color: var(--inverse-background-color); 130 | color: var(--inverse-text-color); 131 | 132 | } 133 | .inverse h1, .inverse h2, .inverse h3 { 134 | color: var(--inverse-header-color); 135 | } 136 | .inverse a, .inverse a > code { 137 | color: var(--inverse-link-color); 138 | } 139 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 140 | color: var(--title-slide-text-color); 141 | } 142 | .title-slide { 143 | background-color: var(--title-slide-background-color); 144 | } 145 | .title-slide .remark-slide-number { 146 | display: none; 147 | } 148 | /* Two-column layout */ 149 | .left-column { 150 | width: 20%; 151 | height: 92%; 152 | float: left; 153 | } 154 | .left-column h2, .left-column h3 { 155 | color: #035AA699; 156 | } 157 | .left-column h2:last-of-type, .left-column h3:last-child { 158 | color: #035AA6; 159 | } 160 | .right-column { 161 | width: 75%; 162 | float: right; 163 | padding-top: 1em; 164 | } 165 | .pull-left { 166 | float: left; 167 | width: 47%; 168 | } 169 | .pull-right { 170 | float: right; 171 | width: 47%; 172 | } 173 | .pull-right + * { 174 | clear: both; 175 | } 176 | img, video, iframe { 177 | max-width: 100%; 178 | } 179 | blockquote { 180 | border-left: solid 5px #03A69680; 181 | padding-left: 1em; 182 | } 183 | .remark-slide table { 184 | margin: auto; 185 | border-top: 1px solid #666; 186 | border-bottom: 1px solid #666; 187 | } 188 | .remark-slide table thead th { 189 | border-bottom: 1px solid #ddd; 190 | } 191 | th, td { 192 | padding: 5px; 193 | } 194 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 195 | background: #CCEDEA; 196 | } 197 | table.dataTable tbody { 198 | background-color: var(--background-color); 199 | color: var(--text-color); 200 | } 201 | table.dataTable.display tbody tr.odd { 202 | background-color: var(--background-color); 203 | } 204 | table.dataTable.display tbody tr.even { 205 | background-color: #CCEDEA; 206 | } 207 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 208 | background-color: rgba(255, 255, 255, 0.5); 209 | } 210 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 211 | color: var(--text-color); 212 | } 213 | .dataTables_wrapper .dataTables_paginate .paginate_button { 214 | color: var(--text-color) !important; 215 | } 216 | 217 | /* Slide Header Background for h1 elements */ 218 | .remark-slide-content.header_background > h1 { 219 | display: block; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | width: 100%; 224 | background: var(--header-background-color); 225 | color: var(--header-background-text-color); 226 | padding: 2rem 64px 1.5rem 64px; 227 | margin-top: 0; 228 | box-sizing: border-box; 229 | } 230 | .remark-slide-content.header_background { 231 | padding-top: 7rem; 232 | } 233 | 234 | @page { margin: 0; } 235 | @media print { 236 | .remark-slide-scaler { 237 | width: 100% !important; 238 | height: 100% !important; 239 | transform: scale(1) !important; 240 | top: 0 !important; 241 | left: 0 !important; 242 | } 243 | } 244 | 245 | .primary { 246 | color: var(--primary); 247 | } 248 | .bg-primary { 249 | background-color: var(--primary); 250 | } 251 | .secondary { 252 | color: var(--secondary); 253 | } 254 | .bg-secondary { 255 | background-color: var(--secondary); 256 | } 257 | .white { 258 | color: var(--white); 259 | } 260 | .bg-white { 261 | background-color: var(--white); 262 | } 263 | .black { 264 | color: var(--black); 265 | } 266 | .bg-black { 267 | background-color: var(--black); 268 | } 269 | 270 | -------------------------------------------------------------------------------- /07-accessibility-css-html/07-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "07 - Accessibility with CSS & HTML" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css, extra.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | class: center, middle 27 | 28 | ```{css extra.css, echo=FALSE} 29 | /* ---- extra.css ---- */ 30 | a { 31 | text-decoration: underline; 32 | } 33 | 34 | .upper { 35 | text-transform: uppercase; 36 | } 37 | ``` 38 | 39 | 40 | # 🗺 [Accessibility with CSS & HTML Activity](https://presentable-user2021.netlify.app/materials/act-03/07-accessibility-css-html/#activity) 41 | 42 | --- 43 | 44 | ## Common black lemurs are sexually dichromatic 45 | 46 | ### This means females and males exhibit differently colored fur 47 | 48 | .pull-left[ 49 | ### Female 50 | Female common black lemur with brown-orange fur and white ear tufts 55 | ] 56 | 57 | .pull-right[ 58 | ### Male 59 | Male common black lemur with rich black fur covering their entire body, and black ear tufts 64 | ] 65 | 66 | --- 67 | class: bottom 68 | background-image: url(common-black-lemur-male.jpg) 69 | background-size: cover 70 | 71 | # Adding
alt-text to
background
images 72 | 73 | 74 | 75 | --- 76 | 77 | # Styling links 78 | 79 | ## This is an example of a link: [Duke Lemur Center | 100 Lemurs Days 15-30](https://lemur.duke.edu/100-lemurs-2/#day-eighteen) 80 | 81 | --- 82 | 83 | # Transforming text to uppercase 84 | 85 | ## Hello there, I'm transforming .upper[this text] to uppercase 86 | 87 | --- 88 | 89 | # Using icons with context in mind 90 | 91 | .pull-left[ 92 | ### Using the `fa_i()` function provides icon information for screen readers 93 | 94 | R Code input: 95 | ```r 96 | fontawesome::fa_i("twitter") 97 | ``` 98 | 99 | `r fontawesome::fa_i("twitter")` [@DukeLemurCenter](https://twitter.com/DukeLemurCenter) 100 | 101 | Screen reader: "Twitter icon, empty group. Link, @DukeLemurCenter" 102 | ] 103 | 104 | .pull-right[ 105 | ### Using raw html without additional attributes requires additional context 106 | 107 | HTML code input: 108 | ```html 109 | 110 | ``` 111 | 112 | Twitter: [@DukeLemurCenter](https://twitter.com/DukeLemurCenter) 113 | 114 | Screen reader: "Twitter. Link, @DukeLemurCenter" (i.e. the icon itself is skipped) 115 | ] 116 | -------------------------------------------------------------------------------- /07-accessibility-css-html/07-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "07 - Accessibility with CSS & HTML" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css, extra.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | class: center, middle 27 | 28 | # 🗺 [Accessibility with CSS & HTML Activity](https://presentable-user2021.netlify.app/materials/act-03/07-accessibility-css-html/#activity) 29 | 30 | --- 31 | 32 | ## Common black lemurs are sexually dichromatic 33 | 34 | ### This means females and males exhibit differently colored fur 35 | 36 | .pull-left[ 37 | ### Female 38 | Common black lemur with a millipede in one hand and flies hovering overhead 43 | ] 44 | 45 | .pull-right[ 46 | ### Male 47 | Male common black lemur with rich black fur covering their entire body, and black ear tufts 52 | ] 53 | 54 | --- 55 | class: bottom 56 | background-image: url(common-black-lemur-male.jpg) 57 | background-size: cover 58 | 59 | # Adding
alt-text to
background
images 60 | 61 | 62 | 63 | --- 64 | 65 | # Styling links 66 | 67 | ## This is an example of a link: [Duke Lemur Center | 100 Lemurs Days 15-30](https://lemur.duke.edu/100-lemurs-2/#day-eighteen) 68 | 69 | --- 70 | 71 | # Transforming text to uppercase 72 | 73 | ## Hello there, I'm transforming .upper[this text] to uppercase 74 | 75 | --- 76 | 77 | # Using icons with context in mind 78 | 79 | .pull-left[ 80 | ### Using the `fa_i()` function provides icon information for screen readers 81 | 82 | R Code input: 83 | ```r 84 | fontawesome::fa_i("twitter") 85 | ``` 86 | 87 | `r fontawesome::fa_i("twitter")` [@DukeLemurCenter](https://twitter.com/DukeLemurCenter) 88 | 89 | Screen reader: "Twitter icon, empty group. Link, @DukeLemurCenter" 90 | ] 91 | 92 | .pull-right[ 93 | ### Using raw html without additional attributes requires additional context 94 | 95 | HTML code input: 96 | ```html 97 | 98 | ``` 99 | 100 | Twitter: [@DukeLemurCenter](https://twitter.com/DukeLemurCenter) 101 | 102 | Screen reader: "Twitter. Link, @DukeLemurCenter" (i.e. the icon itself is skipped) 103 | ] 104 | -------------------------------------------------------------------------------- /07-accessibility-css-html/common-black-lemur-female.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/07-accessibility-css-html/common-black-lemur-female.jpg -------------------------------------------------------------------------------- /07-accessibility-css-html/common-black-lemur-male.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/07-accessibility-css-html/common-black-lemur-male.jpg -------------------------------------------------------------------------------- /07-accessibility-css-html/extra.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /07-accessibility-css-html/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #035AA6; 105 | } 106 | .remark-slide-number { 107 | color: #035AA6; 108 | opacity: 1; 109 | font-size: 0.9rem; 110 | } 111 | strong { 112 | font-weight: bold; 113 | color: var(--text-bold-color); 114 | } 115 | a, a > code { 116 | color: var(--link-color); 117 | text-decoration: none; 118 | } 119 | .footnote { 120 | position: absolute; 121 | bottom: 60px; 122 | padding-right: 4em; 123 | font-size: 0.9em; 124 | } 125 | .remark-code-line-highlighted { 126 | background-color: var(--code-highlight-color); 127 | } 128 | .inverse { 129 | background-color: var(--inverse-background-color); 130 | color: var(--inverse-text-color); 131 | 132 | } 133 | .inverse h1, .inverse h2, .inverse h3 { 134 | color: var(--inverse-header-color); 135 | } 136 | .inverse a, .inverse a > code { 137 | color: var(--inverse-link-color); 138 | } 139 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 140 | color: var(--title-slide-text-color); 141 | } 142 | .title-slide { 143 | background-color: var(--title-slide-background-color); 144 | } 145 | .title-slide .remark-slide-number { 146 | display: none; 147 | } 148 | /* Two-column layout */ 149 | .left-column { 150 | width: 20%; 151 | height: 92%; 152 | float: left; 153 | } 154 | .left-column h2, .left-column h3 { 155 | color: #035AA699; 156 | } 157 | .left-column h2:last-of-type, .left-column h3:last-child { 158 | color: #035AA6; 159 | } 160 | .right-column { 161 | width: 75%; 162 | float: right; 163 | padding-top: 1em; 164 | } 165 | .pull-left { 166 | float: left; 167 | width: 47%; 168 | } 169 | .pull-right { 170 | float: right; 171 | width: 47%; 172 | } 173 | .pull-right + * { 174 | clear: both; 175 | } 176 | img, video, iframe { 177 | max-width: 100%; 178 | } 179 | blockquote { 180 | border-left: solid 5px #03A69680; 181 | padding-left: 1em; 182 | } 183 | .remark-slide table { 184 | margin: auto; 185 | border-top: 1px solid #666; 186 | border-bottom: 1px solid #666; 187 | } 188 | .remark-slide table thead th { 189 | border-bottom: 1px solid #ddd; 190 | } 191 | th, td { 192 | padding: 5px; 193 | } 194 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 195 | background: #CCEDEA; 196 | } 197 | table.dataTable tbody { 198 | background-color: var(--background-color); 199 | color: var(--text-color); 200 | } 201 | table.dataTable.display tbody tr.odd { 202 | background-color: var(--background-color); 203 | } 204 | table.dataTable.display tbody tr.even { 205 | background-color: #CCEDEA; 206 | } 207 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 208 | background-color: rgba(255, 255, 255, 0.5); 209 | } 210 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 211 | color: var(--text-color); 212 | } 213 | .dataTables_wrapper .dataTables_paginate .paginate_button { 214 | color: var(--text-color) !important; 215 | } 216 | 217 | /* Slide Header Background for h1 elements */ 218 | .remark-slide-content.header_background > h1 { 219 | display: block; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | width: 100%; 224 | background: var(--header-background-color); 225 | color: var(--header-background-text-color); 226 | padding: 2rem 64px 1.5rem 64px; 227 | margin-top: 0; 228 | box-sizing: border-box; 229 | } 230 | .remark-slide-content.header_background { 231 | padding-top: 7rem; 232 | } 233 | 234 | @page { margin: 0; } 235 | @media print { 236 | .remark-slide-scaler { 237 | width: 100% !important; 238 | height: 100% !important; 239 | transform: scale(1) !important; 240 | top: 0 !important; 241 | left: 0 !important; 242 | } 243 | } 244 | 245 | .primary { 246 | color: var(--primary); 247 | } 248 | .bg-primary { 249 | background-color: var(--primary); 250 | } 251 | .secondary { 252 | color: var(--secondary); 253 | } 254 | .bg-secondary { 255 | background-color: var(--secondary); 256 | } 257 | .white { 258 | color: var(--white); 259 | } 260 | .bg-white { 261 | background-color: var(--white); 262 | } 263 | .black { 264 | color: var(--black); 265 | } 266 | .bg-black { 267 | background-color: var(--black); 268 | } 269 | 270 | -------------------------------------------------------------------------------- /08-more-css/08-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "08 - More CSS!" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: xaringan-themer.css 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=3.5, fig.retina=2, 21 | out.width = "100%" 22 | ) 23 | ``` 24 | 25 | ```{r xaringanthemer, echo=FALSE} 26 | library(xaringanthemer) 27 | 28 | palette <- c( 29 | orange = "#fb5607", 30 | pink = "#ff006e", 31 | blue_violet = "#8338ec", 32 | zomp = "#38A88E", 33 | shadow = "#87826E" 34 | ) 35 | 36 | style_duo_accent(colors = palette) 37 | ``` 38 | 39 | class: center middle 40 | 41 | 🗺 [More CSS](https://presentable-user2021.netlify.app/materials/act-03/08-more-css) 42 | 43 | --- 44 | class: scientific-names 45 | 46 | # Woolly Lemurs 47 | 48 | .common-name[Woolly lemurs] have short woolly fur and take long naps to digest their food. 49 | 50 | There are **9** .species[species] in the .genus[Avahi] genus, here are **4** of them: 51 | 52 | .lemur.eastern[ 53 | .common-name[Eastern] woolly lemur, .sci-name[.genus[Avahi] .species[laniger]] 54 | ] 55 | 56 | .lemur.western[ 57 | .common-name[Western] woolly lemur, .sci-name[.genus[Avahi] .species[occidentalis]] 58 | ] 59 | 60 | .lemur.sambirano[ 61 | .common-name[Sambirano] woolly lemur, .sci-name[.genus[Avahi] .species[unicolor]] 62 | ] 63 | 64 | .lemur.bemaraha[ 65 | .common-name[Bemaraha] woolly lemur, .sci-name[.genus[Avahi] .species[cleesei]] 66 | ] 67 | 68 | 89 | -------------------------------------------------------------------------------- /08-more-css/08-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "08 - More CSS!" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: xaringan-themer.css 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=3.5, fig.retina=2, 21 | out.width = "100%" 22 | ) 23 | ``` 24 | 25 | ```{r xaringanthemer, echo=FALSE} 26 | library(xaringanthemer) 27 | 28 | palette <- c( 29 | orange = "#fb5607", 30 | pink = "#ff006e", 31 | blue_violet = "#8338ec", 32 | zomp = "#38A88E", 33 | shadow = "#87826E" 34 | ) 35 | 36 | style_duo_accent(colors = palette) 37 | ``` 38 | 39 | class: center middle 40 | 41 | 🗺 [More CSS](https://presentable-user2021.netlify.app/materials/act-03/08-more-css) 42 | 43 | --- 44 | class: scientific-names 45 | 46 | # Woolly Lemurs 47 | 48 | .common-name[Woolly lemurs] have short woolly fur and take long naps to digest their food. 49 | 50 | There are **9** .species[species] in the .genus[Avahi] genus, here are **4** of them: 51 | 52 | .lemur.eastern[ 53 | .common-name[Eastern] woolly lemur, .sci-name[.genus[Avahi] .species[laniger]] 54 | ] 55 | 56 | .lemur.western[ 57 | .common-name[Western] woolly lemur, .sci-name[.genus[Avahi] .species[occidentalis]] 58 | ] 59 | 60 | .lemur.sambirano[ 61 | .common-name[Sambirano] woolly lemur, .sci-name[.genus[Avahi] .species[unicolor]] 62 | ] 63 | 64 | .lemur.bemaraha[ 65 | .common-name[Bemaraha] woolly lemur, .sci-name[.genus[Avahi] .species[cleesei]] 66 | ] 67 | 68 | 76 | -------------------------------------------------------------------------------- /08-more-css/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | --orange: #fb5607; 65 | --pink: #ff006e; 66 | --blue_violet: #8338ec; 67 | --zomp: #38A88E; 68 | --shadow: #87826E; 69 | } 70 | 71 | html { 72 | font-size: var(--base-font-size); 73 | } 74 | 75 | body { 76 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 77 | font-weight: normal; 78 | color: var(--text-color); 79 | } 80 | h1, h2, h3 { 81 | font-family: var(--header-font-family), var(--header-font-family-fallback); 82 | font-weight: 600; 83 | color: var(--header-color); 84 | } 85 | .remark-slide-content { 86 | background-color: var(--background-color); 87 | font-size: 1rem; 88 | padding: 16px 64px 16px 64px; 89 | width: 100%; 90 | height: 100%; 91 | } 92 | .remark-slide-content h1 { 93 | font-size: var(--header-h1-font-size); 94 | } 95 | .remark-slide-content h2 { 96 | font-size: var(--header-h2-font-size); 97 | } 98 | .remark-slide-content h3 { 99 | font-size: var(--header-h3-font-size); 100 | } 101 | .remark-code, .remark-inline-code { 102 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 103 | } 104 | .remark-code { 105 | font-size: var(--code-font-size); 106 | } 107 | .remark-inline-code { 108 | font-size: var(--code-inline-font-size); 109 | color: #035AA6; 110 | } 111 | .remark-slide-number { 112 | color: #035AA6; 113 | opacity: 1; 114 | font-size: 0.9rem; 115 | } 116 | strong { 117 | font-weight: bold; 118 | color: var(--text-bold-color); 119 | } 120 | a, a > code { 121 | color: var(--link-color); 122 | text-decoration: none; 123 | } 124 | .footnote { 125 | position: absolute; 126 | bottom: 60px; 127 | padding-right: 4em; 128 | font-size: 0.9em; 129 | } 130 | .remark-code-line-highlighted { 131 | background-color: var(--code-highlight-color); 132 | } 133 | .inverse { 134 | background-color: var(--inverse-background-color); 135 | color: var(--inverse-text-color); 136 | 137 | } 138 | .inverse h1, .inverse h2, .inverse h3 { 139 | color: var(--inverse-header-color); 140 | } 141 | .inverse a, .inverse a > code { 142 | color: var(--inverse-link-color); 143 | } 144 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 145 | color: var(--title-slide-text-color); 146 | } 147 | .title-slide { 148 | background-color: var(--title-slide-background-color); 149 | } 150 | .title-slide .remark-slide-number { 151 | display: none; 152 | } 153 | /* Two-column layout */ 154 | .left-column { 155 | width: 20%; 156 | height: 92%; 157 | float: left; 158 | } 159 | .left-column h2, .left-column h3 { 160 | color: #035AA699; 161 | } 162 | .left-column h2:last-of-type, .left-column h3:last-child { 163 | color: #035AA6; 164 | } 165 | .right-column { 166 | width: 75%; 167 | float: right; 168 | padding-top: 1em; 169 | } 170 | .pull-left { 171 | float: left; 172 | width: 47%; 173 | } 174 | .pull-right { 175 | float: right; 176 | width: 47%; 177 | } 178 | .pull-right + * { 179 | clear: both; 180 | } 181 | img, video, iframe { 182 | max-width: 100%; 183 | } 184 | blockquote { 185 | border-left: solid 5px #03A69680; 186 | padding-left: 1em; 187 | } 188 | .remark-slide table { 189 | margin: auto; 190 | border-top: 1px solid #666; 191 | border-bottom: 1px solid #666; 192 | } 193 | .remark-slide table thead th { 194 | border-bottom: 1px solid #ddd; 195 | } 196 | th, td { 197 | padding: 5px; 198 | } 199 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 200 | background: #CCEDEA; 201 | } 202 | table.dataTable tbody { 203 | background-color: var(--background-color); 204 | color: var(--text-color); 205 | } 206 | table.dataTable.display tbody tr.odd { 207 | background-color: var(--background-color); 208 | } 209 | table.dataTable.display tbody tr.even { 210 | background-color: #CCEDEA; 211 | } 212 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 213 | background-color: rgba(255, 255, 255, 0.5); 214 | } 215 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 216 | color: var(--text-color); 217 | } 218 | .dataTables_wrapper .dataTables_paginate .paginate_button { 219 | color: var(--text-color) !important; 220 | } 221 | 222 | /* Slide Header Background for h1 elements */ 223 | .remark-slide-content.header_background > h1 { 224 | display: block; 225 | position: absolute; 226 | top: 0; 227 | left: 0; 228 | width: 100%; 229 | background: var(--header-background-color); 230 | color: var(--header-background-text-color); 231 | padding: 2rem 64px 1.5rem 64px; 232 | margin-top: 0; 233 | box-sizing: border-box; 234 | } 235 | .remark-slide-content.header_background { 236 | padding-top: 7rem; 237 | } 238 | 239 | @page { margin: 0; } 240 | @media print { 241 | .remark-slide-scaler { 242 | width: 100% !important; 243 | height: 100% !important; 244 | transform: scale(1) !important; 245 | top: 0 !important; 246 | left: 0 !important; 247 | } 248 | } 249 | 250 | .primary { 251 | color: var(--primary); 252 | } 253 | .bg-primary { 254 | background-color: var(--primary); 255 | } 256 | .secondary { 257 | color: var(--secondary); 258 | } 259 | .bg-secondary { 260 | background-color: var(--secondary); 261 | } 262 | .white { 263 | color: var(--white); 264 | } 265 | .bg-white { 266 | background-color: var(--white); 267 | } 268 | .black { 269 | color: var(--black); 270 | } 271 | .bg-black { 272 | background-color: var(--black); 273 | } 274 | .orange { 275 | color: var(--orange); 276 | } 277 | .bg-orange { 278 | background-color: var(--orange); 279 | } 280 | .pink { 281 | color: var(--pink); 282 | } 283 | .bg-pink { 284 | background-color: var(--pink); 285 | } 286 | .blue_violet { 287 | color: var(--blue_violet); 288 | } 289 | .bg-blue_violet { 290 | background-color: var(--blue_violet); 291 | } 292 | .zomp { 293 | color: var(--zomp); 294 | } 295 | .bg-zomp { 296 | background-color: var(--zomp); 297 | } 298 | .shadow { 299 | color: var(--shadow); 300 | } 301 | .bg-shadow { 302 | background-color: var(--shadow); 303 | } 304 | 305 | -------------------------------------------------------------------------------- /09-design-components/quote/09-quote-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "09 - Design Components - Quote Slide" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | ```{r xaringanthemer, echo=FALSE} 27 | library(xaringanthemer) 28 | style_duo_accent( 29 | primary_color = "#035AA6", 30 | secondary_color = "#03A696", 31 | colors = c(yellow = "#FFFC31", pink = "#E56399") 32 | ) 33 | ``` 34 | 35 | class: center middle 36 | 37 | 🗺 [Design Components - Quote Slide Activity](https://presentable-user2021.netlify.app/materials/act-03/09-design-components/#quote-slide) 38 | 39 | --- 40 | class: quote middle 41 | 42 | Lemurs are the only non-human primates with blue eyes. 43 | 44 | .attribution[ 45 | [Duke Lemur Center](https://lemur.duke.edu/discover/meet-the-lemurs/blue-eyed-black-lemur/) 46 | ] 47 | 48 | ```{css quote.css, echo=FALSE} 49 | /* ---- quote.css ---- */ 50 | .quote > p { 51 | color: var(--primary); 52 | font-size: 4.75em; 53 | margin: 0.2em 0; 54 | font-family: Charter, serif; 55 | font-style: italic; 56 | font-weight: 700; 57 | } 58 | .quote .attribution { 59 | font-size: 1.5em; 60 | } 61 | .quote .attribution a { 62 | color: var(--pink); 63 | } 64 | ``` 65 | -------------------------------------------------------------------------------- /09-design-components/quote/09-quote-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "09 - Design Components - Quote Slide" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css, quote.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | ```{r xaringanthemer, echo=FALSE} 27 | library(xaringanthemer) 28 | style_duo_accent( 29 | primary_color = "#035AA6", 30 | secondary_color = "#03A696", 31 | colors = c(yellow = "#FFFC31", pink = "#E56399") 32 | ) 33 | ``` 34 | 35 | class: center middle 36 | 37 | 🗺 [Design Components - Quote Slide Activity](https://presentable-user2021.netlify.app/materials/act-03/09-design-components/#quote-slide) 38 | 39 | --- 40 | class: quote middle 41 | 42 | Lemurs are the only non-human primates with blue eyes. 43 | 44 | .attribution[ 45 | [Duke Lemur Center](https://lemur.duke.edu/discover/meet-the-lemurs/blue-eyed-black-lemur/) 46 | ] 47 | -------------------------------------------------------------------------------- /09-design-components/quote/quote.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/09-design-components/quote/quote.css -------------------------------------------------------------------------------- /09-design-components/template/09-template-end.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "09 - Design Components - Slide Templates" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css, template.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | class: center middle 27 | 28 | 🗺 [Design Components - Slide Templates Activity](https://presentable-user2021.netlify.app/materials/act-03/09-design-components/#slide-templates) 29 | 30 | --- 31 | layout: true 32 | name: image-sidebar-right 33 | class: image-sidebar-right 34 | background-size: 400px 681px 35 | background-position: right 36 | 37 | 38 | 39 | .attribution[ 40 | Photo by [{{photographer}}]({{photographer_url}}) 41 | ] 42 | 43 | 44 | 45 | --- 46 | background-image: url(https://source.unsplash.com/83gB_koMuvA/400x681) 47 | photographer: Zdeněk Macháček 48 | photographer_url: https://unsplash.com/@zmachacek 49 | photo_alt: A lemur standing on a tree stump, looking directly at the camera. 50 | 51 | # Awesome Lemurs 52 | 53 | Lorem per erat vulputate iaculis eu in dui vestibulum. 54 | 55 | Amet fermentum sodales himenaeos nascetur lectus nunc hac nascetur auctor. 56 | 57 | Consectetur in accumsan neque libero magna leo felis viverra! 58 | 59 | Ipsum eros facilisi habitant habitant ultricies maecenas tellus parturient interdum potenti nisl. 60 | 61 | 62 | --- 63 | layout: false 64 | class: center middle 65 | 66 | ... other content ... 67 | 68 | --- 69 | template: image-sidebar-right 70 | background-image: url(https://source.unsplash.com/tXz6g8JYYoI/400x681) 71 | photographer: Lidya Nada 72 | photographer_url: https://unsplash.com/@lidyanada 73 | photo_alt: A colorful image of a woman holding a bouquet of helium balloons in the shape of emoji against a brick wall painted in bright shades of blue, red, yellow and green. 74 | 75 | # This is fun! 76 | 77 | 1. Sit mattis viverra condimentum orci nibh ultrices cubilia cum ornare eget dictumst? 78 | 79 | 1. Consectetur inceptos iaculis montes erat pharetra etiam accumsan eleifend. 80 | 81 | 1. Amet donec pharetra lacus aliquet massa cum magnis aliquam justo tortor hac! 82 | 83 | 84 | ```{css template.css, echo=FALSE} 85 | /* ---- template.css ---- */ 86 | .image-sidebar-right { 87 | padding-right: 450px; 88 | } 89 | .image-sidebar-right .remark-slide-number { 90 | color: white; 91 | } 92 | .image-sidebar-right .attribution { 93 | position: absolute; 94 | bottom: 0; 95 | right: 410px; 96 | font-size: 0.66em; 97 | } 98 | ``` 99 | -------------------------------------------------------------------------------- /09-design-components/template/09-template-start.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "09 - Design Components - Slide Templates" 3 | subtitle: "Professional, Polished, Presentable" 4 | author: "Dr. Avahi Cleesei" 5 | institute: "Bemaraha University, Madagascar" 6 | date: "2021-07-07" 7 | output: 8 | xaringan::moon_reader: 9 | css: [xaringan-themer.css, template.css] 10 | nature: 11 | slideNumberFormat: "%current%" 12 | highlightStyle: github 13 | highlightLines: true 14 | ratio: 16:9 15 | countIncrementalSlides: true 16 | --- 17 | 18 | ```{r setup, include=FALSE} 19 | knitr::opts_chunk$set( 20 | fig.width=9, fig.height=4, fig.retina=2, 21 | out.width="100%", 22 | message = FALSE 23 | ) 24 | ``` 25 | 26 | class: center middle 27 | 28 | 🗺 [Design Components - Slide Templates Activity](https://presentable-user2021.netlify.app/materials/act-03/09-design-components/#slide-templates) 29 | 30 | --- 31 | class: image-sidebar-right 32 | 33 | # Awesome Lemurs 34 | 35 | Lorem per erat vulputate iaculis eu in dui vestibulum. 36 | 37 | Amet fermentum sodales himenaeos nascetur lectus nunc hac nascetur auctor. 38 | 39 | Consectetur in accumsan neque libero magna leo felis viverra! 40 | 41 | Ipsum eros facilisi habitant habitant ultricies maecenas tellus parturient interdum potenti nisl. 42 | -------------------------------------------------------------------------------- /09-design-components/template/template.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/presentable-user2021/materials/44630f65371ef62e12c94e3012ac585cbf612b51/09-design-components/template/template.css -------------------------------------------------------------------------------- /09-design-components/template/xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.0 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #035AA6; 48 | --background-color: #FFFFFF; 49 | --link-color: #035AA6; 50 | --text-bold-color: #035AA6; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #035AA6; 56 | --title-slide-background-color: #035AA6; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #035AA6; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #035AA6; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #035AA6; 105 | } 106 | .remark-slide-number { 107 | color: #035AA6; 108 | opacity: 1; 109 | font-size: 0.9rem; 110 | } 111 | strong { 112 | font-weight: bold; 113 | color: var(--text-bold-color); 114 | } 115 | a, a > code { 116 | color: var(--link-color); 117 | text-decoration: none; 118 | } 119 | .footnote { 120 | position: absolute; 121 | bottom: 60px; 122 | padding-right: 4em; 123 | font-size: 0.9em; 124 | } 125 | .remark-code-line-highlighted { 126 | background-color: var(--code-highlight-color); 127 | } 128 | .inverse { 129 | background-color: var(--inverse-background-color); 130 | color: var(--inverse-text-color); 131 | 132 | } 133 | .inverse h1, .inverse h2, .inverse h3 { 134 | color: var(--inverse-header-color); 135 | } 136 | .inverse a, .inverse a > code { 137 | color: var(--inverse-link-color); 138 | } 139 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 140 | color: var(--title-slide-text-color); 141 | } 142 | .title-slide { 143 | background-color: var(--title-slide-background-color); 144 | } 145 | .title-slide .remark-slide-number { 146 | display: none; 147 | } 148 | /* Two-column layout */ 149 | .left-column { 150 | width: 20%; 151 | height: 92%; 152 | float: left; 153 | } 154 | .left-column h2, .left-column h3 { 155 | color: #035AA699; 156 | } 157 | .left-column h2:last-of-type, .left-column h3:last-child { 158 | color: #035AA6; 159 | } 160 | .right-column { 161 | width: 75%; 162 | float: right; 163 | padding-top: 1em; 164 | } 165 | .pull-left { 166 | float: left; 167 | width: 47%; 168 | } 169 | .pull-right { 170 | float: right; 171 | width: 47%; 172 | } 173 | .pull-right + * { 174 | clear: both; 175 | } 176 | img, video, iframe { 177 | max-width: 100%; 178 | } 179 | blockquote { 180 | border-left: solid 5px #03A69680; 181 | padding-left: 1em; 182 | } 183 | .remark-slide table { 184 | margin: auto; 185 | border-top: 1px solid #666; 186 | border-bottom: 1px solid #666; 187 | } 188 | .remark-slide table thead th { 189 | border-bottom: 1px solid #ddd; 190 | } 191 | th, td { 192 | padding: 5px; 193 | } 194 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 195 | background: #CCEDEA; 196 | } 197 | table.dataTable tbody { 198 | background-color: var(--background-color); 199 | color: var(--text-color); 200 | } 201 | table.dataTable.display tbody tr.odd { 202 | background-color: var(--background-color); 203 | } 204 | table.dataTable.display tbody tr.even { 205 | background-color: #CCEDEA; 206 | } 207 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 208 | background-color: rgba(255, 255, 255, 0.5); 209 | } 210 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 211 | color: var(--text-color); 212 | } 213 | .dataTables_wrapper .dataTables_paginate .paginate_button { 214 | color: var(--text-color) !important; 215 | } 216 | 217 | /* Slide Header Background for h1 elements */ 218 | .remark-slide-content.header_background > h1 { 219 | display: block; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | width: 100%; 224 | background: var(--header-background-color); 225 | color: var(--header-background-text-color); 226 | padding: 2rem 64px 1.5rem 64px; 227 | margin-top: 0; 228 | box-sizing: border-box; 229 | } 230 | .remark-slide-content.header_background { 231 | padding-top: 7rem; 232 | } 233 | 234 | @page { margin: 0; } 235 | @media print { 236 | .remark-slide-scaler { 237 | width: 100% !important; 238 | height: 100% !important; 239 | transform: scale(1) !important; 240 | top: 0 !important; 241 | left: 0 !important; 242 | } 243 | } 244 | 245 | .primary { 246 | color: var(--primary); 247 | } 248 | .bg-primary { 249 | background-color: var(--primary); 250 | } 251 | .secondary { 252 | color: var(--secondary); 253 | } 254 | .bg-secondary { 255 | background-color: var(--secondary); 256 | } 257 | .white { 258 | color: var(--white); 259 | } 260 | .bg-white { 261 | background-color: var(--white); 262 | } 263 | .black { 264 | color: var(--black); 265 | } 266 | .bg-black { 267 | background-color: var(--black); 268 | } 269 | 270 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2021 Garrick Aden-Buie and Silvia Canelón 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Materials for Professional, Polished, Presentable 2 | 3 | ## A tutorial at [useR!2021](https://user2021.r-project.org/) by [Garrick Aden-Buie](https://garrickadenbuie.com) and [Silvia Canelón](https://silvia.rbind.io) 4 | 5 | 🏠 6 | 7 | 🧑‍💻 Are you joining the tutorial? 8 | Follow the [tutorial Prework](https://presentable-user2021.netlify.app/materials/prework) to get ready! 9 | 10 | ## How to get the workshop materials 11 | 12 | ### Make this repo your own 13 | 14 | You can click the green [Use This Template](https://github.com/presentable-user2021/materials/generate) button above to create a repo in your own GitHub account generated from these materials. 15 | 16 | If you choose this route, you can open this project in RStudio by clicking on **New Project** > **Version Control** > **Git** and then paste the URL of the new repo in the dialogue box. 17 | 18 | You could skip the dialog boxes and open the project directly with the [usethis] package: 19 | 20 | ```r 21 | usethis::create_from_github( 22 | "/materials", 23 | destdir = "~/Desktop/presentable-user2021" 24 | ) 25 | ``` 26 | 27 | _Hint: replace `` with your GitHub user name and pick a comfortable `destdir`._ 28 | 29 | ### Just download the materials right now 30 | 31 | If you'd rather just get the materials without using GitHub or Git in any way, you can also use the [usethis] package: 32 | 33 | ```r 34 | usethis::use_course("presentable-user2021/materials") 35 | ``` 36 | 37 | usethis will work with you to put the files somewhere reasonable, but you can also be explicit: 38 | 39 | ```r 40 | usethis::use_course( 41 | "presentable-user2021/materials", 42 | destdir = "~/Desktop/presentable-user2021" 43 | ) 44 | ``` 45 | 46 | [usethis]: https://usethis.r-lib.org 47 | 48 | 49 | ## Duke Lemur Center Data 50 | 51 | In this course, we occasionally use data provided by the [Duke Lemur Center](https://lemur.duke.edu/). For more information, you may find the source data on the [DLC](https://lemur.duke.edu) webpage or in the following citation. 52 | 53 | > Zehr, SM, Roach RG, Haring D, Taylor J, Cameron FH, Yoder AD. Life history 54 | > profiles for 27 strepsirrhine primate taxa generated using captive data from 55 | > the Duke Lemur Center. Sci. Data 1:140019 doi: 10.1038/sdata.2014.19 (2014). 56 | 57 | The data files we used were prepared by [Jesse Mostipak](https://www.kaggle.com/jessemostipak) and shared on Kaggle at . The scripts used to simplify the dataset for this workshop is available in [this Kaggle R notebook](https://www.kaggle.com/grrrck/lemurs-simplified). 58 | 59 | ## Lemur illustrations 60 | 61 | All lemur illustrations featured on the [tutorial website](https://presentable-user2021.netlify.app/materials/) and in the materials included within this repository were created by [Rachel Hudson](https://lemur.duke.edu/100-lemurs/). 62 | -------------------------------------------------------------------------------- /presentable-user2021.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: No 4 | SaveWorkspace: No 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | StripTrailingWhitespace: Yes 17 | LineEndingConversion: Posix 18 | --------------------------------------------------------------------------------