class: center, middle, inverse, title-slide .title[ # extra styles<br>.gray[for xaringan] ] .subtitle[ ## .big[😎] ] .author[ ### <a href='https://www.garrickadenbuie.com/'>Garrick Aden-Buie<a> ] .date[ ### xaringanExtra ] --- class: middle <style>.xe__progress-bar__container { top:0; opacity: 1; position:absolute; right:0; left: 0; } .xe__progress-bar { height: 0.25em; background-color: #0051BA; width: calc(var(--slide-current) / var(--slide-total) * 100%); } .remark-visible .xe__progress-bar { animation: xe__progress-bar__wipe 200ms forwards; animation-timing-function: cubic-bezier(.86,0,.07,1); } @keyframes xe__progress-bar__wipe { 0% { width: calc(var(--slide-previous) / var(--slide-total) * 100%); } 100% { width: calc(var(--slide-current) / var(--slide-total) * 100%); } }</style> <style type="text/css"> .gray { color: #999; } .big { font-size: 200%; } </style> ````markdown ```{r xaringan-extra-styles} # These are the defaults xaringanExtra::use_extra_styles( hover_code_line = TRUE, #<< mute_unhighlighted_code = TRUE #<< ) ``` ```` -- Hover over a line in the chunk above &#x261D;&#xFE0F; -- .right[or enjoy the muted elegance of the chunk below.] ``` r # These are the defaults xaringanExtra::use_extra_styles( * hover_code_line = TRUE, * mute_unhighlighted_code = TRUE ) ``` --- class: middle ## Add a progress bar ````markdown ```{r xaringanExtra, echo = FALSE} xaringanExtra::use_progress_bar(color = "#0051BA", location = "top", height = "10px") ``` ```` --- layout: false class: center middle <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="25%" alt="GitHub Octocat Logo" /> ### [gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra)