Boxes (#529)

* Revert "updating templates_to_edit image"

This reverts commit f95a790.

forgot I was on main#

* Revert "updating issue pics"

This reverts commit fbc1c3e.

forgot I was on main

* adding ITN style code for boxes

* adding images and general style code for boxes

* showing examples of style boxes

* moving images from assets to subdir called box_images to allow for easy sync of these images

* forgot about dictionary image

* updating paths for style.css file for general template use

* updating paths for itn style doc

* adding asset box image dir to sync

* add boxes to GDSCN css code

* adding boxes to AnVIL css code

* adding boxes to DataTrail css

* adding initial version of reflection box

* adding reflection box to other style sets

01-intro.Rmd

@@ -48,6 +48,15 @@ dictionary text
 
 </div>
 
+
+Here is a `<div class = "reflection">` box:
+
+<div class = "reflection">
+
+reflection text
+
+</div>
+
 ## Motivation
 
 

assets/style.css

@@ -322,6 +322,23 @@ div.dictionary{
 }
 
 
+div.reflection{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 90px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.reflection{
+  background-image: url("../assets/box_images/thinking_face.png");
+}
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;

style-sets/AnVIL/copy_to_assets/style_anvil.css

@@ -321,6 +321,23 @@ div.dictionary{
   background-image: url("../assets/box_images/dictionary.png");
 }
 
+div.reflection{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 90px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.reflection{
+  background-image: url("../assets/box_images/thinking_face.png");
+}
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;

style-sets/GDSCN/copy_to_assets/style_gdscn.css

@@ -320,6 +320,22 @@ div.dictionary{
   background-image: url("../assets/box_images/dictionary.png");
 }
 
+div.reflection{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 90px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.reflection{
+  background-image: url("../assets/box_images/thinking_face.png");
+}
 
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;

style-sets/data-trail/copy-to-assets/style_DataTrail.css

@@ -337,6 +337,23 @@ div.dictionary{
   background-image: url("../assets/box_images/dictionary.png");
 }
 
+div.reflection{
+  border: 4px #000000;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 90px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.reflection{
+  background-image: url("../assets/box_images/thinking_face.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

@@ -341,6 +341,24 @@ div.dictionary{
   background-image: url("../assets/box_images/dictionary.png");
 }
 
+div.reflection{
+  border: 4px #193a5c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 90px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.reflection{
+  background-image: url("../assets/box_images/thinking_face.png");
+}
+
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;