diff --git a/DESCRIPTION b/DESCRIPTION index 9807028..66f20f2 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -8,7 +8,8 @@ Authors@R: c( person("Garrick", "Aden-Buie", role = "ctb"), person("Ole Petter", "Bang", role = "ctb", comment = "CSS in rmarkdown/templates/xaringan/resources/default.css"), person("Patrick", "Schratz", role = "ctb"), - person("Sean", "Lopp", role = "ctb") + person("Sean", "Lopp", role = "ctb"), + person("Claus Thorn", "Ekstrøm", role = "ctb") ) Description: Create HTML5 slides with R Markdown and the JavaScript library 'remark.js' (). @@ -23,4 +24,5 @@ License: MIT + file LICENSE URL: https://github.com/yihui/xaringan BugReports: https://github.com/yihui/xaringan/issues VignetteBuilder: knitr +Encoding: UTF-8 RoxygenNote: 6.0.1 diff --git a/NEWS.md b/NEWS.md index d3976f1..caf4b3c 100644 --- a/NEWS.md +++ b/NEWS.md @@ -10,6 +10,8 @@ - Line highlighting can also be turned on using a special comment `#<<` at the end of a line of code now (thanks, @gadenbuie, #103). +- Added CSS`hygge` - some template-independent CSS code for general formatting. Add as argument to `xaringan::moon_reader` + # CHANGES IN xaringan VERSION 0.4 ## NEW FEATURES diff --git a/inst/rmarkdown/templates/xaringan/resources/hygge.css b/inst/rmarkdown/templates/xaringan/resources/hygge.css new file mode 100644 index 0000000..45010bd --- /dev/null +++ b/inst/rmarkdown/templates/xaringan/resources/hygge.css @@ -0,0 +1,187 @@ +/************************************ + * + * Template-independent CSS code for formatting xaringan presentations + * + * For that extra bit of "hygge" + * + ************************************/ + + +/************** + * + * Font size and colours + * + **************/ + + +.Large { font-size: 144% } +.large { font-size: 120% } +.small { font-size: 90% } +.footnotesize { font-size: 80% } +.scriptsize { font-size: 70% } +.tiny { font-size: 60% } + +.black { color: black; } +.red { color: red; } +.blue { color: blue; } +.green { color: green; } +.yellow { color: yellow; } +.orange { color: orange; } +.purple { color: purple; } +.gray { color: gray; } +.grey { color: gray; } + +.bold { font-weight: bold; } +.bolder { font-weight: bolder; } + + +/****************** + * + * Coloured content boxes + * + ****************/ + + +.content-box { + box-sizing: content-box; + background-color: #e2e2e2; + /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px + Total height: 80px + (2 * 20px) + (2 * 8px) = 136px + Content box width: 160px + Content box height: 80px */ +} + + +.content-box-blue, +.content-box-gray, +.content-box-grey, +.content-box-army, +.content-box-green, +.content-box-purple, +.content-box-red, +.content-box-yellow { + border-radius: 15px; + margin: 0 0 25px; + overflow: hidden; + padding: 20px; + width: 100%; +} + +.content-box-blue { + background-color: #F0F8FF; + +} + +.content-box-gray { + background-color: #e2e2e2; +} + +.content-box-grey { + background-color: #F5F5F5; +} + +.content-box-army { + background-color: #737a36; +} + +.content-box-green { + background-color: #d9edc2; +} + +.content-box-purple { + background-color: #e2e2f9; +} + +.content-box-red { + background-color: #f9dbdb; +} + +.content-box-yellow { + background-color: #fef5c4; +} + + +.full-width { + display: flex; + width: 100%; + flex: 1 1 auto; +} + + + +/*********** + * + * Changed CSS + * + **************/ + +.opacity{ + opacity: 0.5; +} + + + +.blur { + -webkit-filter: blur(5px); + -moz-filter: blur(10px); + -o-filter: blur(5px); + -ms-filter: blur(5px); + filter: blur(5px); +} + + +.grayscale img { + -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ + filter: grayscale(100%); +} + + + + + + +/************** + * + * Fancy stuff + * + **************/ + + +.rotate-left { + -webkit-transform: rotate(-2deg); + -moz-transform: rotate(-2deg); + transform: rotate(-2deg); +} + +.rotate-right { + -webkit-transform: rotate(2deg); + -moz-transform: rotate(2deg); + transform: rotate(2deg); +} + + + +/********** + * + * Image stuff + * + ************/ + + +.polaroid img { + border: 10px solid #fff; + border-bottom: 45px solid #fff; + -webkit-box-shadow: 3px 3px 3px #111; + -moz-box-shadow: 3px 3px 3px #111; + box-shadow: 3px 3px 3px #111; +} + + + +.shadow { + -moz-border-radius: 5px; + -moz-box-shadow: 5px 5px 5px #aaa; + -webkit-box-shadow: 5px 5px 5px #aaa; + box-shadow: 5px 5px 5px #aaa; + border-radius: 2px; +} diff --git a/inst/rmarkdown/templates/xaringan/skeleton/ghoul.Rmd b/inst/rmarkdown/templates/xaringan/skeleton/ghoul.Rmd new file mode 100644 index 0000000..16c605b --- /dev/null +++ b/inst/rmarkdown/templates/xaringan/skeleton/ghoul.Rmd @@ -0,0 +1,183 @@ +--- +title: "Presentation Ronin" +subtitle: "⚔
with xaringan and a twist of hygge" +author: "Claus Thorn Ekstrøm" +date: "2018/02/16" +output: + xaringan::moon_reader: + css: ["default", "default-fonts", "hygge"] + lib_dir: libs + nature: + highlightStyle: github + highlightLines: true + countIncrementalSlides: false +--- + +class: center, middle + +```{r setup, include=FALSE} +options(htmltools.dir.version = FALSE) +``` + +# hygge + +### /ˈhʊgə/ + +A quality of cosiness and comfortable conviviality that engenders a feeling of contentment or well-being (regarded as a defining characteristic of Danish culture) + +*‘why not follow the Danish example and bring more hygge into your daily life?’* + +--- +class: inverse, center, middle + +# Template-independent content-classes + +To use, say, the large content class wrap your code in `.large[Large text]`. + +--- + +# Modifying text + +.pull-left[ + +## Font sizes + +This is normal size ( $\LaTeX$-friendly terms) + +.Large[Large] + +.large[large] + +.small[small] + +.footnotesize[footnotesize] + +.scriptsize[scriptsize] + +.tiny[tiny] + +] + +.pull-right[ + +## Text color + +.black[black] + +.red[red] + +.blue[blue] + +.green[green], +.yellow[yellow], +.orange[orange], +.purple[purple], +.gray[gray or grey] + +You can also use `.bold[]` or `.bolder[]` to emphasize text + +This is .bold[bold], this is .bolder[bolder] and this is regular markdown **double-star bold** (visible differences depend on the font) + + + +] + +--- + +## Coloured content boxes + +Use `.content-box-blue` (or gray/grey, army, green, purple, red, or yellow) to produce a box with coloured background. Size depends on content. + +`.content-box-blue[I feel blue]` yields + +.content-box-blue[I feel blue] + +Wrap in `.full-width` to expand the width + +.full-width[.content-box-red[I feel even more blue]] + +If you have content in columns then you get + +.pull-left[.full-width[.content-box-yellow[**WARNING** Look out for minons or bananas]]] +.pull-right[.full-width[.content-box-yellow[The box to the left was created using `.pull-left[.full-width[.content-box-yellow[]]]`]]] + + +--- + +## Fancy picture includes + +.pull-left[ +Original: + +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` + +Add `.polaroid` + +.polaroid[ +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` +] +] +.pull-right[ + +Rotated slightly: + +.rotate-right[ +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` +] + +Add `.blur` + +.blur[ +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` +] +] + +--- + +## Stacking fancy picture options + +.pull-left[ +Add `.opacity` + +.opacity[ +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` +] + +Stack `.blur` and `.opacity` + +.blur[.opacity[ +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` +]] +] +.pull-right[ + +Convert to `.grayscale` (oh ... and rotate just for s'n'g): + +.rotate-left[ +.grayscale[ +```{r echo=FALSE, out.width="80%"} +knitr::include_graphics("https://www.worldtravelguide.net/wp-content/uploads/2017/04/Think-Denmark-Copenhagen-587892190-SeanPavonePhoto-copy.jpg") +``` +]] + +Add `.shadow` + +.shadow[ +```{r echo=FALSE, out.width="100%"} +knitr::include_graphics("https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg") +``` +] +] +