Added template-independent CSS tools and an example of how to use them

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' (<https://remarkjs.com>).
@@ -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

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

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;  
+}

inst/rmarkdown/templates/xaringan/skeleton/ghoul.Rmd

@@ -0,0 +1,183 @@
+---
+title: "Presentation Ronin"
+subtitle: "⚔<br/>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")
+```
+] 
+]
+