adding new, blue styling!

_output.yml

@@ -1,4 +1,6 @@
 bookdown::gitbook:
+  include:
+    in_header: header.html
   css: style.css
   split_by: chapter
   config:
@@ -8,6 +10,6 @@ bookdown::gitbook:
     toc:
       collapse: subsection
       before: |
-        <img src="img/Rlogo.png" style="width:150px;padding:10px 0px 0px 10px;"></img>
+        <img src="img/Rlogo.png" style="width:150px;padding:10px 0px 0px 10px;display: block;margin:auto;"></img>
       after: |
         <li><a href="https://github.com/rstudio/bookdown" target="blank">Published with bookdown</a></li>

header.html

@@ -0,0 +1,6 @@
+<script>
+// add little icons to top left of note box
+$( document ).ready(function() {
+  $(".note").append("<div class='note-icon'><img src='img/information.svg'></img></div>")
+});
+</script>

style.css

@@ -29,25 +29,41 @@ a {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Josefin Slab', serif;
-  color: #4C1476 !important;
+  color: #2673D9 !important;
 }
 
 .summary {
   background-color: white;
 }
 
 a {
-  color: #FF7666 !important;
+  color:  #2673D9 !important;
 }
 
+/* these are Josh Comeau's amazing style!! */
 div.note {
+    position: relative;
     padding: 1em;
     margin: 2em 0;
-    padding-left: 100px;
     background-size: 70px;
-    background-image: url("img/lightbulb.svg");
+    background: hsla(214, 70%, 50%, 0.15);
     background-repeat: no-repeat;
     background-position: 15px center;
-    min-height: 120px;
-    border: dashed 5px #FAEDB6;
+    border-left: solid 4px 	hsl(214, 70%, 50%)
+}
+
+div.note.image {
+   content:url(img/information.svg);
+}
+
+.note-icon {
+    height: 32px;
+    width: 32px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform: translate(-50%, -50%);
+    background: white;
+    border-radius: 50%;
+    padding: 8px;
 }