├── .Rproj.user ├── 8F90F8BA │ └── sources │ │ ├── prop │ │ ├── 3767F906 │ │ ├── ABAF1641 │ │ ├── FD9F7372 │ │ └── INDEX │ │ └── s-E4B2CD6E │ │ ├── 7F3DAC40 │ │ ├── 7F3DAC40-contents │ │ ├── AD84BE0B │ │ ├── AD84BE0B-contents │ │ ├── EF13CFC0 │ │ ├── EF13CFC0-contents │ │ └── lock_file └── shared │ └── notebooks │ ├── 103C6256-index │ └── 1 │ │ ├── 8F90F8BAE4B2CD6E │ │ └── chunks.json │ │ └── s │ │ └── chunks.json │ ├── 7AAF5848-snow │ └── 1 │ │ ├── 8F90F8BAE4B2CD6E │ │ └── chunks.json │ │ └── s │ │ └── chunks.json │ ├── patch-chunk-names │ └── paths ├── README.md ├── firework.Rmd ├── heart.Rmd ├── index.Rmd ├── index.html ├── snow.Rmd ├── snow.Rproj └── year.Rmd /.Rproj.user/8F90F8BA/sources/prop/3767F906: -------------------------------------------------------------------------------- 1 | { 2 | "tempName": "Untitled1", 3 | "cursorPosition": "6,235", 4 | "scrollLine": "0" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/prop/ABAF1641: -------------------------------------------------------------------------------- 1 | { 2 | "tempName": "Untitled2", 3 | "cursorPosition": "37,6", 4 | "scrollLine": "8" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/prop/FD9F7372: -------------------------------------------------------------------------------- 1 | { 2 | "tempName": "Untitled1", 3 | "cursorPosition": "9,24", 4 | "scrollLine": "0" 5 | } -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/prop/INDEX: -------------------------------------------------------------------------------- 1 | C%3A%2FUsers%2Femily%2FDesktop%2Fsnow%2FREADME.md="3767F906" 2 | C%3A%2FUsers%2Femily%2FDesktop%2Fsnow%2Findex.Rmd="FD9F7372" 3 | C%3A%2FUsers%2Femily%2FDesktop%2Fsnow%2Fsnow.Rmd="ABAF1641" 4 | -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/7F3DAC40: -------------------------------------------------------------------------------- 1 | { 2 | "id": "7F3DAC40", 3 | "path": "C:/Users/emily/Desktop/snow/snow.Rmd", 4 | "project_path": "snow.Rmd", 5 | "type": "r_markdown", 6 | "hash": "0", 7 | "contents": "", 8 | "dirty": false, 9 | "created": 1607642031755.0, 10 | "source_on_save": false, 11 | "relative_order": 2, 12 | "properties": { 13 | "tempName": "Untitled2", 14 | "cursorPosition": "37,6", 15 | "scrollLine": "8" 16 | }, 17 | "folds": "", 18 | "lastKnownWriteTime": 1607642297, 19 | "encoding": "UTF-8", 20 | "collab_server": "", 21 | "source_window": "", 22 | "last_content_update": 1607642298008, 23 | "read_only": false, 24 | "read_only_alternatives": [] 25 | } -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/7F3DAC40-contents: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Untitled" 3 | output: html_document 4 | --- 5 | 6 | 7 | 39 | 40 | ```{css echo = FALSE} 41 | 42 | /* customizable snowflake styling */ 43 | .snowflake { 44 | color: lightblue; 45 | font-size: 5em; 46 | font-family: Arial; 47 | text-shadow: 0 0 1px #000; 48 | } 49 | 50 | @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s} 51 | /* Demo Purpose Only*/ 52 | .demo { 53 | font-family: 'Raleway', sans-serif; 54 | color:#fff; 55 | display: block; 56 | margin: 0 auto; 57 | padding: 15px 0; 58 | text-align: center; 59 | } 60 | .demo a{ 61 | font-family: 'Raleway', sans-serif; 62 | color: #000; 63 | } 64 | ``` 65 | 66 | -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/AD84BE0B: -------------------------------------------------------------------------------- 1 | { 2 | "id": "AD84BE0B", 3 | "path": "C:/Users/emily/Desktop/snow/index.Rmd", 4 | "project_path": "index.Rmd", 5 | "type": "r_markdown", 6 | "hash": "0", 7 | "contents": "", 8 | "dirty": false, 9 | "created": 1607642026680.0, 10 | "source_on_save": false, 11 | "relative_order": 1, 12 | "properties": { 13 | "tempName": "Untitled1", 14 | "cursorPosition": "9,24", 15 | "scrollLine": "0" 16 | }, 17 | "folds": "", 18 | "lastKnownWriteTime": 1607642063, 19 | "encoding": "UTF-8", 20 | "collab_server": "", 21 | "source_window": "", 22 | "last_content_update": 1607642063429, 23 | "read_only": false, 24 | "read_only_alternatives": [] 25 | } -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/AD84BE0B-contents: -------------------------------------------------------------------------------- 1 | --- 2 | title: "My Very Important Business Document" 3 | output: html_document 4 | --- 5 | 6 | ```{r setup, include=FALSE} 7 | knitr::opts_chunk$set(echo = TRUE) 8 | ``` 9 | 10 | ```{r child = "snow.Rmd"} 11 | ``` 12 | 13 | 14 | ## R Markdown 15 | 16 | This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see . 17 | 18 | When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this: 19 | 20 | ```{r cars} 21 | summary(cars) 22 | ``` 23 | 24 | ## Including Plots 25 | 26 | You can also embed plots, for example: 27 | 28 | ```{r pressure, echo=FALSE} 29 | plot(pressure) 30 | ``` 31 | 32 | Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot. 33 | -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/EF13CFC0: -------------------------------------------------------------------------------- 1 | { 2 | "id": "EF13CFC0", 3 | "path": "C:/Users/emily/Desktop/snow/README.md", 4 | "project_path": "README.md", 5 | "type": "markdown", 6 | "hash": "0", 7 | "contents": "", 8 | "dirty": false, 9 | "created": 1607642352359.0, 10 | "source_on_save": false, 11 | "relative_order": 3, 12 | "properties": { 13 | "tempName": "Untitled1", 14 | "cursorPosition": "6,235", 15 | "scrollLine": "0" 16 | }, 17 | "folds": "", 18 | "lastKnownWriteTime": 1607643017, 19 | "encoding": "UTF-8", 20 | "collab_server": "", 21 | "source_window": "", 22 | "last_content_update": 1607643018006, 23 | "read_only": false, 24 | "read_only_alternatives": [] 25 | } -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/EF13CFC0-contents: -------------------------------------------------------------------------------- 1 | ## R Markdown Snowflake Demo 2 | 3 | This repo illustrates how to add illustrated snowflakes to R Markdown with a child document. (I do not cover when or why -- that's up to you.) 4 | 5 | Check out an example [here](https://emilyriederer.github.io/demo-rmd-snow/). 6 | 7 | Essentially, this is simply done by reading in a child document that contains custom CSS and HTML. The heavy lifting is done by the CSS which I did **not** write -- it comes from [this CodePen](https://codepen.io/codeconvey/pen/xRzQay). -------------------------------------------------------------------------------- /.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/lock_file: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emilyriederer/demo-rmd-snow/8a1b47d1903524bd7f82fcd53b8d803e7a8312fd/.Rproj.user/8F90F8BA/sources/s-E4B2CD6E/lock_file -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/103C6256-index/1/8F90F8BAE4B2CD6E/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[],"doc_write_time":1607642054} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/103C6256-index/1/s/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[],"doc_write_time":1607642054} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/7AAF5848-snow/1/8F90F8BAE4B2CD6E/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[],"doc_write_time":1607642074} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/7AAF5848-snow/1/s/chunks.json: -------------------------------------------------------------------------------- 1 | {"chunk_definitions":[],"doc_write_time":1607642074} -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/patch-chunk-names: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emilyriederer/demo-rmd-snow/8a1b47d1903524bd7f82fcd53b8d803e7a8312fd/.Rproj.user/shared/notebooks/patch-chunk-names -------------------------------------------------------------------------------- /.Rproj.user/shared/notebooks/paths: -------------------------------------------------------------------------------- 1 | C:/Users/emily/Desktop/snow/README.md="29F80F75" 2 | C:/Users/emily/Desktop/snow/index.Rmd="103C6256" 3 | C:/Users/emily/Desktop/snow/snow.Rmd="7AAF5848" 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## R Markdown Snowflake Demo 2 | 3 | This repo illustrates how to add illustrated snowflakes to R Markdown with a child document. (I do not cover when or why -- that's up to you.) 4 | 5 | Check out an example [here](https://emilyriederer.github.io/demo-rmd-snow/). 6 | 7 | Essentially, this is simply done by reading in a child document that contains custom CSS and HTML. The heavy lifting is done by the CSS which I did **not** write -- it comes from [this CodePen](https://codepen.io/codeconvey/pen/xRzQay). -------------------------------------------------------------------------------- /firework.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Untitled" 3 | output: html_document 4 | --- 5 | 6 |
7 |
8 |
9 |
10 | 11 | ```{scss echo = FALSE} 12 | body {background-color: black !important; 13 | color: white !important;} 14 | pre {background-color: black !important; 15 | border-style: solid !important; 16 | border-color: white !important; 17 | color: white !important;} 18 | 19 | // source: https://codepen.io/yshlin/pen/ylDEk 20 | 21 | $particles: 50; 22 | $width: 500; 23 | $height: 500; 24 | 25 | // Create the explosion... 26 | $box-shadow: (); 27 | $box-shadow2: (); 28 | @for $i from 0 through $particles { 29 | $box-shadow: $box-shadow, 30 | random($width)-$width / 2 + px 31 | random($height)-$height / 1.2 + px 32 | hsl(random(360), 100, 50); 33 | $box-shadow2: $box-shadow2, 0 0 #fff 34 | } 35 | @mixin keyframes ($animationName) { 36 | @-webkit-keyframes #{$animationName} { 37 | @content; 38 | } 39 | 40 | @-moz-keyframes #{$animationName} { 41 | @content; 42 | } 43 | 44 | @-o-keyframes #{$animationName} { 45 | @content; 46 | } 47 | 48 | @-ms-keyframes #{$animationName} { 49 | @content; 50 | } 51 | 52 | @keyframes #{$animationName} { 53 | @content; 54 | } 55 | } 56 | 57 | @mixin animation-delay ($settings) { 58 | -moz-animation-delay: $settings; 59 | -webkit-animation-delay: $settings; 60 | -o-animation-delay: $settings; 61 | -ms-animation-delay: $settings; 62 | animation-delay: $settings; 63 | } 64 | 65 | @mixin animation-duration ($settings) { 66 | -moz-animation-duration: $settings; 67 | -webkit-animation-duration: $settings; 68 | -o-animation-duration: $settings; 69 | -ms-animation-duration: $settings; 70 | animation-duration: $settings; 71 | } 72 | 73 | @mixin animation ($settings) { 74 | -moz-animation: $settings; 75 | -webkit-animation: $settings; 76 | -o-animation: $settings; 77 | -ms-animation: $settings; 78 | animation: $settings; 79 | } 80 | 81 | @mixin transform ($settings) { 82 | transform: $settings; 83 | -moz-transform: $settings; 84 | -webkit-transform: $settings; 85 | -o-transform: $settings; 86 | -ms-transform: $settings; 87 | } 88 | 89 | body { 90 | margin:0; 91 | padding:0; 92 | background: #fff; 93 | overflow: hidden; 94 | } 95 | 96 | .pyro > .before, .pyro > .after { 97 | position: absolute; 98 | width: 5px; 99 | height: 5px; 100 | border-radius: 50%; 101 | box-shadow: $box-shadow2; 102 | @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards)); 103 | } 104 | 105 | .pyro > .after { 106 | @include animation-delay((1.25s, 1.25s, 1.25s)); 107 | @include animation-duration((1.25s, 1.25s, 6.25s)); 108 | } 109 | 110 | @include keyframes(bang) { 111 | to { 112 | box-shadow:$box-shadow; 113 | } 114 | } 115 | 116 | @include keyframes(gravity) { 117 | to { 118 | @include transform(translateY(200px)); 119 | opacity: 0; 120 | } 121 | } 122 | 123 | @include keyframes(position) { 124 | 0%, 19.9% { 125 | margin-top: 10%; 126 | margin-left: 40%; 127 | } 128 | 20%, 39.9% { 129 | margin-top: 40%; 130 | margin-left: 30%; 131 | } 132 | 40%, 59.9% { 133 | margin-top: 20%; 134 | margin-left: 70% 135 | } 136 | 60%, 79.9% { 137 | margin-top: 30%; 138 | margin-left: 20%; 139 | } 140 | 80%, 99.9% { 141 | margin-top: 30%; 142 | margin-left: 80%; 143 | } 144 | } 145 | 146 | ``` 147 | 148 | -------------------------------------------------------------------------------- /heart.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Untitled" 3 | output: html_document 4 | --- 5 | 6 | 38 | 39 | 40 | ```{css echo = FALSE} 41 | /*Source: https://codepen.io/codeconvey/pen/xRzQay*/ 42 | 43 | /* customizable snowflake styling */ 44 | .snowflake { 45 | color: #F55491; 46 | font-size: 5em; 47 | font-family: Arial; 48 | text-shadow: 0 0 1px #000; 49 | } 50 | 51 | @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}} 52 | @-webkit-keyframes snowflakes-shake{ 53 | 0%{-webkit-transform:translateX(0px);transform:translateX(0px)} 54 | 50%{-webkit-transform:translateX(80px);transform:translateX(80px)} 55 | 100%{-webkit-transform:translateX(0px);transform:translateX(0px)}} 56 | @keyframes snowflakes-fall{ 57 | 0%{top:-10%} 58 | 100%{top:100%}} 59 | @keyframes snowflakes-shake{ 60 | 0%{transform:translateX(0px)} 61 | 50%{transform:translateX(80px)} 62 | 100%{transform:translateX(0px)}} 63 | 64 | .snowflake{ 65 | position:fixed; 66 | top:-10%; 67 | z-index:9999; 68 | -webkit-user-select:none; 69 | -moz-user-select:none; 70 | -ms-user-select:none; 71 | user-select:none; 72 | cursor:default; 73 | -webkit-animation-name:snowflakes-fall,snowflakes-shake; 74 | -webkit-animation-duration:10s,3s; 75 | -webkit-animation-timing-function:linear,ease-in-out; 76 | -webkit-animation-iteration-count:infinite,infinite; 77 | -webkit-animation-play-state:running,running; 78 | animation-name:snowflakes-fall,snowflakes-shake; 79 | animation-duration:10s,3s; 80 | animation-timing-function:linear,ease-in-out; 81 | animation-iteration-count:infinite,infinite; 82 | animation-play-state:running,running} 83 | 84 | .snowflake:nth-of-type(0){left: 1%;-webkit-animation-delay: 0s, 0s;animation-delay: 0s, 0s} 85 | .snowflake:nth-of-type(1){left:10%;-webkit-animation-delay: 1s, 1s;animation-delay: 1s, 1s} 86 | .snowflake:nth-of-type(2){left:20%;-webkit-animation-delay: 6s,0.5s;animation-delay: 6s,0.5s} 87 | .snowflake:nth-of-type(3){left:30%;-webkit-animation-delay: 4s, 2s;animation-delay: 4s, 2s} 88 | .snowflake:nth-of-type(4){left:40%;-webkit-animation-delay: 2s, 2s;animation-delay: 2s, 2s} 89 | .snowflake:nth-of-type(5){left:50%;-webkit-animation-delay: 8s, 3s;animation-delay: 8s, 3s} 90 | .snowflake:nth-of-type(6){left:60%;-webkit-animation-delay: 6s, 2s;animation-delay: 6s, 2s} 91 | .snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s, 1s;animation-delay:2.5s, 1s} 92 | .snowflake:nth-of-type(8){left:80%;-webkit-animation-delay: 1s, 0s;animation-delay: 1s, 0s} 93 | .snowflake:nth-of-type(9){left:90%;-webkit-animation-delay: 3s,1.5s;animation-delay: 3s,1.5s} 94 | ``` 95 | 96 | -------------------------------------------------------------------------------- /index.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "My Very Important Business Document" 3 | output: html_document 4 | --- 5 | 6 | ```{r setup, include=FALSE} 7 | knitr::opts_chunk$set(echo = TRUE) 8 | ``` 9 | 10 | ```{r child = "snow.Rmd"} 11 | ``` 12 | 13 | 14 | ## R Markdown 15 | 16 | This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see . 17 | 18 | When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this: 19 | 20 | ```{r cars} 21 | summary(cars) 22 | ``` 23 | 24 | ## Including Plots 25 | 26 | You can also embed plots, for example: 27 | 28 | ```{r pressure, echo=FALSE} 29 | plot(pressure) 30 | ``` 31 | 32 | Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot. 33 | -------------------------------------------------------------------------------- /snow.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Untitled" 3 | output: html_document 4 | --- 5 | 6 | 38 | 39 | 40 | ```{css echo = FALSE} 41 | /*Source: https://codepen.io/codeconvey/pen/xRzQay*/ 42 | 43 | /* customizable snowflake styling */ 44 | .snowflake { 45 | color: lightblue; 46 | font-size: 5em; 47 | font-family: Arial; 48 | text-shadow: 0 0 1px #000; 49 | } 50 | 51 | @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}} 52 | @-webkit-keyframes snowflakes-shake{ 53 | 0%{-webkit-transform:translateX(0px);transform:translateX(0px)} 54 | 50%{-webkit-transform:translateX(80px);transform:translateX(80px)} 55 | 100%{-webkit-transform:translateX(0px);transform:translateX(0px)}} 56 | @keyframes snowflakes-fall{ 57 | 0%{top:-10%} 58 | 100%{top:100%}} 59 | @keyframes snowflakes-shake{ 60 | 0%{transform:translateX(0px)} 61 | 50%{transform:translateX(80px)} 62 | 100%{transform:translateX(0px)}} 63 | 64 | .snowflake{ 65 | position:fixed; 66 | top:-10%; 67 | z-index:9999; 68 | -webkit-user-select:none; 69 | -moz-user-select:none; 70 | -ms-user-select:none; 71 | user-select:none; 72 | cursor:default; 73 | -webkit-animation-name:snowflakes-fall,snowflakes-shake; 74 | -webkit-animation-duration:10s,3s; 75 | -webkit-animation-timing-function:linear,ease-in-out; 76 | -webkit-animation-iteration-count:infinite,infinite; 77 | -webkit-animation-play-state:running,running; 78 | animation-name:snowflakes-fall,snowflakes-shake; 79 | animation-duration:10s,3s; 80 | animation-timing-function:linear,ease-in-out; 81 | animation-iteration-count:infinite,infinite; 82 | animation-play-state:running,running} 83 | 84 | .snowflake:nth-of-type(0){left: 1%;-webkit-animation-delay: 0s, 0s;animation-delay: 0s, 0s} 85 | .snowflake:nth-of-type(1){left:10%;-webkit-animation-delay: 1s, 1s;animation-delay: 1s, 1s} 86 | .snowflake:nth-of-type(2){left:20%;-webkit-animation-delay: 6s,0.5s;animation-delay: 6s,0.5s} 87 | .snowflake:nth-of-type(3){left:30%;-webkit-animation-delay: 4s, 2s;animation-delay: 4s, 2s} 88 | .snowflake:nth-of-type(4){left:40%;-webkit-animation-delay: 2s, 2s;animation-delay: 2s, 2s} 89 | .snowflake:nth-of-type(5){left:50%;-webkit-animation-delay: 8s, 3s;animation-delay: 8s, 3s} 90 | .snowflake:nth-of-type(6){left:60%;-webkit-animation-delay: 6s, 2s;animation-delay: 6s, 2s} 91 | .snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s, 1s;animation-delay:2.5s, 1s} 92 | .snowflake:nth-of-type(8){left:80%;-webkit-animation-delay: 1s, 0s;animation-delay: 1s, 0s} 93 | .snowflake:nth-of-type(9){left:90%;-webkit-animation-delay: 3s,1.5s;animation-delay: 3s,1.5s} 94 | ``` 95 | 96 | -------------------------------------------------------------------------------- /snow.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 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 | -------------------------------------------------------------------------------- /year.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Untitled" 3 | output: html_document 4 | --- 5 | 6 | 38 | 39 | 40 | ```{css echo = FALSE} 41 | /*Source: https://codepen.io/codeconvey/pen/xRzQay*/ 42 | 43 | /* customizable snowflake styling */ 44 | .snowflake { 45 | font-size: 2em; 46 | font-family: Arial; 47 | text-shadow: 0 0 1px #000; 48 | } 49 | 50 | .color1 {color:#a17f1a;} 51 | .color2 {color:black;} 52 | 53 | @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}} 54 | @-webkit-keyframes snowflakes-shake{ 55 | 0%{-webkit-transform:translateX(0px);transform:translateX(0px)} 56 | 50%{-webkit-transform:translateX(80px);transform:translateX(80px)} 57 | 100%{-webkit-transform:translateX(0px);transform:translateX(0px)}} 58 | @keyframes snowflakes-fall{ 59 | 0%{top:-10%} 60 | 100%{top:100%}} 61 | @keyframes snowflakes-shake{ 62 | 0%{transform:translateX(0px)} 63 | 50%{transform:translateX(80px)} 64 | 100%{transform:translateX(0px)}} 65 | 66 | .snowflake{ 67 | position:fixed; 68 | top:-10%; 69 | z-index:9999; 70 | -webkit-user-select:none; 71 | -moz-user-select:none; 72 | -ms-user-select:none; 73 | user-select:none; 74 | cursor:default; 75 | -webkit-animation-name:snowflakes-fall,snowflakes-shake; 76 | -webkit-animation-duration:12s,5s; 77 | -webkit-animation-timing-function:linear,ease-in-out; 78 | -webkit-animation-iteration-count:infinite,infinite; 79 | -webkit-animation-play-state:running,running; 80 | animation-name:snowflakes-fall,snowflakes-shake; 81 | animation-duration:10s,3s; 82 | animation-timing-function:linear,ease-in-out; 83 | animation-iteration-count:infinite,infinite; 84 | animation-play-state:running,running} 85 | 86 | .snowflake:nth-of-type(0){left: 1%;-webkit-animation-delay: 0s, 0s;animation-delay: 0s, 0s} 87 | .snowflake:nth-of-type(1){left:10%;-webkit-animation-delay: 1s, 1s;animation-delay: 1s, 1s} 88 | .snowflake:nth-of-type(2){left:20%;-webkit-animation-delay: 6s,0.5s;animation-delay: 6s,0.5s} 89 | .snowflake:nth-of-type(3){left:30%;-webkit-animation-delay: 4s, 2s;animation-delay: 4s, 2s} 90 | .snowflake:nth-of-type(4){left:40%;-webkit-animation-delay: 2s, 2s;animation-delay: 2s, 2s} 91 | .snowflake:nth-of-type(5){left:50%;-webkit-animation-delay: 8s, 3s;animation-delay: 8s, 3s} 92 | .snowflake:nth-of-type(6){left:60%;-webkit-animation-delay: 6s, 2s;animation-delay: 6s, 2s} 93 | .snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s, 1s;animation-delay:2.5s, 1s} 94 | .snowflake:nth-of-type(8){left:80%;-webkit-animation-delay: 1s, 0s;animation-delay: 1s, 0s} 95 | .snowflake:nth-of-type(9){left:90%;-webkit-animation-delay: 3s,1.5s;animation-delay: 3s,1.5s} 96 | ``` 97 | 98 | --------------------------------------------------------------------------------