Closes #6

_sass/_box_model.scss

@@ -29,7 +29,7 @@ article > blockquote {
   margin-right: $l-h-baseline;
 }
 
-figure {
+figure, .info, .warning, .note, .success {
   margin-bottom: $l-h-baseline !important;
 }
 
@@ -143,7 +143,9 @@ article blockquote {
 .highlighter-rouge {
   padding-right: $l-h-baseline-quarter;
 }
-
+.info, .warning, .note, .success {
+  padding: $l-h-baseline-quarter;
+}
 //---------------------------MISC
 h1 {
   padding-bottom: 0.35rem;
@@ -202,4 +204,4 @@ abbr {
 
 .sep {
   border-left: $border-s $color-grey-dark dotted;
-}
+}

_sass/_colour.scss

@@ -44,11 +44,34 @@ abbr {
 .link-to-post,
 main h1,
 main h2,
-main h3 {
+main h3,
+.warning {
   color: $color-orange-dark;
 }
 
+.info {
+  background-color: $color-info;
+  border: 1px solid darken($color-info, 10);
+  color: $color-blue-darker;
+}
 
+.warning {
+  background-color: $color-warning;
+  border: 1px solid darken($color-warning, 10);
+  color: $color-orange-dark;
+}
+
+.note {
+  background-color: $color-note;
+  border: 1px solid darken($color-note, 10);
+  color: $color-red;
+}
+
+.success {
+  background-color: $color-success;
+  border: 1px solid darken($color-success, 10);
+  color: darken($color-green, 10);
+}
 
 /*************************************************************************
                            BACKGROUND COLOUR
@@ -90,7 +113,6 @@ blockquote {
 /*************************************************************************/
 
 body {
-
   background-size: cover;
 }
 
@@ -106,4 +128,4 @@ body {
 .fancy-nav {
   @include init-con-font($color-white);
   transition: $t-s-M;
-}
+}

_sass/_pseudo.scss

@@ -34,6 +34,27 @@ article > ol li:before {
 .fancy-nav:before {
   @include init-nav-hover(bottom);
 }
+
+.info::before, .warning::before, .note::before, .success::before {
+    font-weight: bolder;
+}
+
+.info::before{
+  content: "INFO: ";
+}
+
+.warning::before{
+  content: "WARNING: ";
+}
+
+.note::before {
+  content: "NOTE: ";
+}
+
+.success::before {
+  content: "SUCCESS: ";
+}
+
 /*************************************************************************
                             AFTER
 /*************************************************************************/

_sass/_typography.scss

@@ -96,7 +96,14 @@ h3, #footer-quote{
 }
 
 //----------------------------SMALL
-small, figcaption, sub, sup {
+small,
+figcaption,
+sub,
+sup,
+.info,
+.warning,
+.note,
+.success{
   font-size: $f-s-S;
 }
 
@@ -185,4 +192,4 @@ h1, h2, h3 {
 
 #logo-name {
   font-weight: bold;
-}
+}

main.scss

@@ -14,4 +14,3 @@
 @import "pseudo";
 @import "media";
 @import "darcula";
-@import "playground";