Add info note include

Author: ThomasGravekamp

_includes/note-info.html

@@ -0,0 +1,3 @@
+<div class="note note-info">
+    <i class="fas fa-info-circle"></i>{{ include.content }}
+</div>

_sass/layout.scss

@@ -202,3 +202,20 @@ body {
         min-width: 8rem;
     }
 }
+
+.note {
+    font-size: 1.125rem;
+    margin: 1rem;
+    padding: 1rem .5rem;
+
+    i {
+        margin: 0 1rem;
+        vertical-align: baseline;
+    }
+}
+
+.note-info {
+    background-color: $color-note-info-background;
+    color: $color-note-info-text;
+    border-left: .25rem solid $color-note-info-text;
+}

_sass/variables.scss

@@ -17,6 +17,9 @@ $color-text-code:         #333344;
 $color-text-bold:         #111111;
 $color-text-highlight:    #ffff00;
 
+$color-note-info-background: #bde5f8;
+$color-note-info-text:       #00529b;
+
 // Color mappings
 $color-text-h1: $color-text-bold;
 $color-text-h2: $color-text-secondary;