├── .Rbuildignore ├── .gitignore ├── README.Rmd ├── README.md ├── kakashi.Rproj └── kakashi.css /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^README\.Rmd$ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | -------------------------------------------------------------------------------- /README.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | output: github_document 3 | --- 4 | 5 | 6 | 7 | ```{r, include = FALSE} 8 | knitr::opts_chunk$set( 9 | collapse = TRUE, 10 | comment = "#>" 11 | ) 12 | ``` 13 | 14 | # kakashi theme for xaringan 15 | 16 | kakashi is a theme for the [xaringan R package](https://github.com/yihui/xaringan) for making slides. kakashi has a clean look with color-blind friendly palettes. 17 | 18 | Marking text as italics (*) will turn it blue, bold (**) will turn it orange, and striking out (~~) will turn it grey. 19 | 20 | kakashi copies ideas from many other themes, including metropolis and lucy, but is ultimately unique. That is why this CSS (copy shinobi style) is called kakashi, [after the copy ninja](https://www.wikiwand.com/en/Kakashi_Hatake). 21 | 22 | # Will you eventually contribute this theme to xaringan directly? 23 | 24 | Yes, when I feel it is done. I've been using it for a while, but I still feel it needs polishing. In the mean time, you can include it in your slides using an R Markdown code chunk with the following code: 25 | 26 | ```{r, eval = FALSE} 27 | htmltools::includeCSS("https://raw.githubusercontent.com/malcolmbarrett/kakashi/master/kakashi.css") 28 | ``` 29 | 30 | # Examples 31 | 32 | + [Advanced R Bookclub](https://advr-bookclub-24-25.netlify.com/) 33 | + [Functional programming and iteration with purrr](https://lar-purrr.netlify.com/) 34 | 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # kakashi theme for xaringan 5 | 6 | kakashi is a theme for the [xaringan R 7 | package](https://github.com/yihui/xaringan) for making slides. kakashi 8 | has a clean look with color-blind friendly palettes. 9 | 10 | Marking text as italics (\*) will turn it blue, bold (\*\*) will turn it 11 | orange, and striking out (~~) will turn it grey. 12 | 13 | kakashi copies ideas from many other themes, including metropolis and 14 | lucy, but is ultimately unique. That is why this CSS (copy shinobi 15 | style) is called kakashi, [after the copy 16 | ninja](https://www.wikiwand.com/en/Kakashi_Hatake). 17 | 18 | # Will you eventually contribute this theme to xaringan directly? 19 | 20 | Yes, when I feel it is done. I’ve been using it for a while, but I still 21 | feel it needs polishing. In the mean time, you can include it in your 22 | slides using an R Markdown code chunk with the following 23 | code: 24 | 25 | ``` r 26 | htmltools::includeCSS("https://raw.githubusercontent.com/malcolmbarrett/kakashi/master/kakashi.css") 27 | ``` 28 | 29 | # Examples 30 | 31 | - [Advanced R Bookclub](https://advr-bookclub-24-25.netlify.com/) 32 | - [Functional programming and iteration with 33 | purrr](https://lar-purrr.netlify.com/) 34 | -------------------------------------------------------------------------------- /kakashi.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 | 18 | BuildType: Package 19 | PackageUseDevtools: Yes 20 | PackageInstallArgs: --no-multiarch --with-keep.source 21 | PackageRoxygenize: rd,collate,namespace 22 | -------------------------------------------------------------------------------- /kakashi.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i,700,700i|IBM+Plex+Mono:400,500); 2 | @import url(//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css); 3 | 4 | body { 5 | font-family: 'Fira Sans','Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif; 6 | } 7 | 8 | a, a > code { 9 | color: #EC99C6; 10 | text-decoration: none; 11 | } 12 | 13 | strong { 14 | color: #E69F00; 15 | } 16 | 17 | em { 18 | color: #56B4E9; 19 | font-style: normal; 20 | font-weight: bold; 21 | } 22 | 23 | del { 24 | color: #E5E5E5; 25 | text-decoration: none; 26 | font-weight: bold; 27 | } 28 | 29 | .remark-code { 30 | font-family: 'IBM Plex Mono', 'Lucida Console', Monaco, monospace; 31 | font-size: 100%; 32 | } 33 | 34 | .remark-inline-code { 35 | font-family: 'Fira Sans', 'Lucida Console', Monaco, monospace; 36 | font-weight: 400; 37 | font-size: 100%; 38 | } 39 | 40 | .remark-code-line-highlighted { 41 | background-color: #CEE9FF; 42 | font-weight: 500; 43 | } 44 | 45 | .large { font-size: 130% } 46 | .medium { font-size: 115% } 47 | .small { font-size: 70% } 48 | 49 | 50 | .remark-slide-content { 51 | color: #474747; 52 | font-weight: 300; 53 | font-weight: 300; 54 | padding: 1em 2em 1em 2em 55 | } 56 | 57 | h1 { 58 | color: #56B4E9; 59 | font-weight: 500; 60 | } 61 | 62 | h2 { 63 | font-weight: 500; 64 | } 65 | 66 | .remark-slide-number { 67 | font-size: 20px; 68 | } 69 | 70 | .title-slide .remark-slide-number { 71 | display: none; 72 | } 73 | 74 | .inverse.title-slide { 75 | background-size: cover; 76 | color: #EDEEEF; 77 | } 78 | 79 | .inverse.title-slide h1 { 80 | color: #E69F00; 81 | font-size: 72px; 82 | text-shadow: none; 83 | text-align: left; 84 | vertical-align: bottom; 85 | } 86 | .inverse.title-slide h2 { 87 | color: #56B4E9; 88 | text-shadow: none; 89 | font-size: 48px; 90 | text-align: left; 91 | font-weight: bold; 92 | } 93 | .inverse.title-slide h3 { 94 | color: #EDEEEF; 95 | text-shadow: none; 96 | font-size: 36px; 97 | text-align: left; 98 | margin-bottom: 10px; 99 | } 100 | 101 | .inverse.title-slide h4 { 102 | color: #EDEEEF; 103 | text-shadow: none; 104 | font-size: 24px; 105 | text-align: left; 106 | margin-bottom: 10px; 107 | } 108 | 109 | .inverse { 110 | background-size: cover; 111 | background-color: #23373B; 112 | color: #EDEEEF; 113 | font-weight: bold; 114 | text-shadow: none; 115 | } 116 | 117 | .inverse-ns { 118 | background-size: cover; 119 | background-color: #23373B; 120 | color: #EDEEEF; 121 | text-shadow: none; 122 | font-weight: bold; 123 | } 124 | 125 | 126 | 127 | .takeaways { 128 | padding-top: 80px; 129 | } 130 | 131 | .inverse h2, .inverse h3 { 132 | color: #EDEEEF; 133 | font-weight: 500; 134 | } 135 | 136 | .inverse del { 137 | color: #6C7B7F; 138 | } 139 | 140 | .shadow { text-shadow: 0 0 20px rgba(51,51,51,0.35) } 141 | 142 | img { 143 | display: block; 144 | margin-left: auto; 145 | margin-right: auto; 146 | } 147 | 148 | ul { 149 | font-size: 48px; 150 | list-style-type: none; 151 | text-align: left; 152 | font-weight: 500; 153 | padding-top: 40px; 154 | } 155 | 156 | ul li { 157 | padding-bottom: 40px; 158 | } 159 | 160 | ol { 161 | counter-reset: my-counter; 162 | list-style: none; 163 | padding-left: 40px; 164 | font-size: 45px; 165 | font-weight: bold; 166 | text-align: left; 167 | } 168 | 169 | ol li { 170 | counter-increment: my-counter; 171 | padding-left: 40px; 172 | position: relative; 173 | font-size: 45px; 174 | margin: 20px 0; 175 | display: block; 176 | margin-block-start: 0.83em; 177 | margin-block-end: 0.83em; 178 | margin-inline-start: 0; 179 | margin-inline-end: 0; 180 | } 181 | 182 | ol li::before { 183 | content: counter(my-counter); 184 | color: #fff; 185 | font-size: 40px; 186 | font-weight: bold; 187 | position: absolute; 188 | left: -25px; 189 | line-height: 50px; 190 | width: 50px; 191 | height: 50px; 192 | top: 0; 193 | background: #56B4E9; 194 | border-radius: 50%; 195 | text-align: center; 196 | } 197 | --------------------------------------------------------------------------------