From 4548f70ee5b0847479ae571070837adfb74eb00e Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Wed, 30 Mar 2016 21:52:58 -0400
Subject: [PATCH] Refine notices

---
 _posts/2010-02-05-post-notice.md | 20 ++++++++++++++++----
 assets/_scss/_notices.scss       | 13 +++++++++++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/_posts/2010-02-05-post-notice.md b/_posts/2010-02-05-post-notice.md
index 97b12f9..36a4fad 100644
--- a/_posts/2010-02-05-post-notice.md
+++ b/_posts/2010-02-05-post-notice.md
@@ -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
diff --git a/assets/_scss/_notices.scss b/assets/_scss/_notices.scss
index 73b97de..dc1c583 100644
--- a/assets/_scss/_notices.scss
+++ b/assets/_scss/_notices.scss
@@ -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 */
-- 
2.43.0