Boxes

01-intro.Rmd

@@ -5,6 +5,48 @@ ottrpal::set_knitr_image_path()
 
 # Introduction
 
+To add a warning box like the following use:
+
+`<div class = "warning">`
+
+Followed by the text you want inside/
+
+`</div>`
+
+The line above marks the end of the box.
+
+This will create the following:
+
+<div class = "warning">
+
+Followed by the text you want inside/
+
+</div>
+
+Here is a `<div class = "notice">` box:
+
+<div class = "notice">
+
+note text
+
+</div>
+
+Here is a `<div class = "github">` box:
+
+<div class = "github">
+
+github text
+
+</div>
+
+
+Here is a `<div class = "dictionary">` box:
+
+<div class = "dictionary">
+
+dictionary text
+
+</div>
 
 ## Motivation
 

assets/style.css

@@ -250,6 +250,78 @@ li.appendix span, li.part span { /* for TOC part names */
 /* Sidebar formating --------------------------------------------*/
 /* from r-pkgs.org*/
 
+
+div.notice{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.notice{
+  background-image: url("../assets/note.png");
+}
+
+div.warning{
+  border: 4px #e0471c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.warning{
+  background-image: url("../assets/warning.png");
+}
+
+
+
+div.github{
+  border: 4px #000000;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.github{
+  background-image: url("../assets/github.png");
+}
+
+div.dictionary{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.dictionary{
+  background-image: url("../assets/dictionary.png");
+}
+
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;

style-sets/itcr/copy-to-assets/style_ITN.css

@@ -271,6 +271,76 @@ li.appendix span, li.part span { /* for TOC part names */
 /* Sidebar formating --------------------------------------------*/
 /* from r-pkgs.org*/
 
+div.notice{
+  border: 4px #193a5c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.notice{
+  background-image: url("../assets/note.png");
+}
+
+div.warning{
+  border: 4px #e0471c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.warning{
+  background-image: url("../assets/warning.png");
+}
+
+
+
+div.github{
+  border: 4px #000000;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.github{
+  background-image: url("../assets/github.png");
+}
+
+div.dictionary{
+  border: 4px #193a5c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.dictionary{
+  background-image: url("../assets/dictionary.png");
+}
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;