Added scss files for notice boxes

_sass/course.scss

@@ -0,0 +1,17 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$grey-color:       #828282 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark:  darken($grey-color, 25%) !default;
+
+$border-radius:    4px !default;
+
+@import "course/notices";

_sass/course/_notices.scss

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   NOTICE TEXT BLOCKS
+   ========================================================================== */
+
+/**
+ *  Default Kramdown usage (no indents!):
+ *  <div class="notice" markdown="1">
+ *  #### Headline for the Notice
+ *  Text for the notice
+ *  </div>
+ */
+
+ @mixin notice($notice-color) {
+    margin: 2em 0 !important;  /* override*/
+    padding: 1em;
+    font-family: $base-font-family;
+    font-size: $small-font-size !important;
+    text-indent: initial; /* override*/
+    background-color: mix(#fff, $notice-color, 90%);
+    border-radius: $border-radius;
+    box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+
+    h4 {
+      margin-top: 0 !important; /* override*/
+      margin-bottom: 0.75em;
+    }
+
+    @at-root .page__content #{&} h4 {
+      /* using at-root to override .page-content h4 font size*/
+      margin-bottom: 0;
+      font-size: 1em;
+    }
+
+    p {
+      &:last-child {
+        margin-bottom: 0 !important; /* override*/
+      }
+    }
+
+    h4 + p {
+      /* remove space above paragraphs that appear directly after notice headline*/
+      margin-top: 0;
+      padding-top: 0;
+    }
+
+    a {
+      color: $notice-color;
+
+      &:hover {
+        color: mix(#000, $notice-color, 40%);
+      }
+    }
+
+    code {
+      background-color: mix(#fff, $notice-color, 95%)
+    }
+
+    ul {
+      &:last-child {
+        margin-bottom: 0; /* override*/
+      }
+    }
+  }
+
+  /* Info notice */
+
+  .notice--info {
+    @include notice($grey-color);
+  }

assets/main.scss

@@ -0,0 +1,6 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import "{{ site.theme }}";
+@import "course";