2 files changed, 27 insertions(+), 6 deletions(-)

M _posts/2010-02-05-post-notice.md
M assets/_scss/_notices.scss

@@ 14,11 14,23 @@ When using Kramdown `{: .notice}` can be added after a sentence to assign the `.
 **Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
 {: .notice}
 
+**Info Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
+{: .notice--info}
+
+**Warning Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
+{: .notice--warning}
+
+**Danger Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
+{: .notice--danger}
+
+**Success Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
+{: .notice--success}
+
 Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with `markdownify` is a good way to go.
 
 ```html
 {% raw %}{% capture notice-2 %}
-### New Site Features
+#### New Site Features
 
 * You can now have cover images on blog pages
 * Drafts will now auto-save while writing


@@ 28,7 40,7 @@ Want to wrap several paragraphs or other elements in a notice? Using Liquid to c
 ```
 
 {% capture notice-2 %}
-### New Site Features
+#### New Site Features
 
 * You can now have cover images on blog pages
 * Drafts will now auto-save while writing


@@ 42,12 54,12 @@ Or you could skip the capture and stick with straight HTML.
 
 ```html
 <div class="notice">
-  <h3>Message</h3>
+  <h4>Message</h4>
   <p>A basic message.</p>
 </div>
 ```
 
 <div class="notice">
-  <h3>Message</h3>
+  <h4>Message</h4>
   <p>A basic message.</p>
 </div>=
\ No newline at end of file

@@ 13,6 13,8 @@
 @mixin notice($notice-color) {
   margin: 2em 0 !important;  // override
   padding: 1em;
+  font-family: $sans-serif;
+  font-size: $type-size-6 !important;
   text-indent: initial; // override
   background-color: mix(#fff, $notice-color, 90%);
   border-radius: $border-radius;


@@ 20,7 22,6 @@
   h4 {
     margin-top: 0 !important; // override
     margin-bottom: 0.75em;
-    line-height: 1 !important; // override
   }
 
   @at-root .page__content #{&} h4 {


@@ 39,7 40,9 @@
   }
 
   p {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0 !important; // override
+    }
 
     a {
       border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override


@@ 55,6 58,12 @@
   code {
     background-color: mix(#fff, $notice-color, 95%)
   }
+
+  ul {
+    &:last-child {
+      margin-bottom: 0; // override
+    }
+  }
 }
 
 /* Default notice */