From 1ace0f9cde99072eabc66fdc7561919036c4a52e Mon Sep 17 00:00:00 2001
From: Jens Willmer <info@jwillmer.de>
Date: Wed, 14 Sep 2016 11:13:38 +0300
Subject: [PATCH] Merged tip control from serenader2014/decent

---
 _posts/2016-05-07-Features.md | 12 ++++++++++++
 _sass/_color_additions.scss   |  3 ++-
 _sass/main.scss               |  1 +
 _sass/post.scss               | 28 ++++++++++++++++++++++++++++
 _sass/post_additions.scss     |  9 ++++++++-
 5 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/_posts/2016-05-07-Features.md b/_posts/2016-05-07-Features.md
index ec96f8cc..e427e366 100644
--- a/_posts/2016-05-07-Features.md
+++ b/_posts/2016-05-07-Features.md
@@ -178,6 +178,18 @@ With language highlighting, line numbers and line highlighting
 > 
 > <cite>——R.M. Nixon</cite>
 
+### Attention Box
+
+```
+<div class="tip">
+Chemicals including paint and thinners must be stored in labelled containers that are in good condition, as provided for in the regulations. Liquids must be placed in holding tanks.
+</div>
+```
+
+<div class="tip">
+Chemicals including paint and thinners must be stored in labelled containers that are in good condition, as provided for in the regulations. Liquids must be placed in holding tanks.
+</div>
+
 ### 404 Page
 
 The 404 page has a fuzzy search implemented that lists urls that are similar to the entered url. Try it out: [Unknown URL]({{ site.github.url }}/features)
diff --git a/_sass/_color_additions.scss b/_sass/_color_additions.scss
index 6536bf07..bcb93324 100644
--- a/_sass/_color_additions.scss
+++ b/_sass/_color_additions.scss
@@ -1 +1,2 @@
-$light-green: #85bd6a;
\ No newline at end of file
+$light-green: #85bd6a;
+$orangered: #FF4500;
diff --git a/_sass/main.scss b/_sass/main.scss
index bcd99dd0..5ec2b96f 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -226,6 +226,7 @@
 .single-post .post-content > tfoot,
 .single-post .post-content > video,
 .single-post .post-content > iframe,
+.single-post .post-content > .tip,
 .read-next {
     width: 90%;
     max-width: 650px;
diff --git a/_sass/post.scss b/_sass/post.scss
index 32fb1674..78983031 100644
--- a/_sass/post.scss
+++ b/_sass/post.scss
@@ -202,6 +202,34 @@
         width: 100%;
         margin-bottom: auto;
     }
+	
+	.tip {
+        padding: 12px 24px 12px 30px;
+        margin: 2em 0;
+        border-left: 4px solid #f66;
+        background-color: #f8f8f8;
+        position: relative;
+        border-bottom-right-radius: 2px;
+        border-top-right-radius: 2px;
+        box-sizing: border-box;
+
+        &:before {
+            position: absolute;
+            top: 14px;
+            left: -12px;
+            background-color: #f66;
+            color: #fff;
+            content: "!";
+            width: 20px;
+            height: 20px;
+            border-radius: 100%;
+            text-align: center;
+            line-height: 20px;
+            font-weight: bold;
+            font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+            font-size: 14px;
+        }
+    }
 }
 
 .ds-thread, #disqus_thread {
diff --git a/_sass/post_additions.scss b/_sass/post_additions.scss
index 4a251367..70b77f57 100644
--- a/_sass/post_additions.scss
+++ b/_sass/post_additions.scss
@@ -20,4 +20,11 @@ figure p {
         max-width: 250px;
         max-height: 250px;
     }
-}
\ No newline at end of file
+}
+
+.post-content .tip {
+	border-left: 4px solid $orangered;
+	&:before {
+		background-color: $orangered;
+	}
+ }
\ No newline at end of file