Merged tip control from serenader2014/decent

jwillmer · Sep 14, 2016 · 1ace0f9 · 1ace0f9
1 parent 177791b
commit 1ace0f9
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 2 deletions.
diff --git 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
@@ -1 +1,2 @@
-$light-green: #85bd6a;
+$light-green: #85bd6a;
+$orangered: #FF4500;
diff --git 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
@@ -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
@@ -20,4 +20,11 @@ figure p {
         max-width: 250px;
         max-height: 250px;
     }
-}
+}
+
+.post-content .tip {
+	border-left: 4px solid $orangered;
+	&:before {
+		background-color: $orangered;
+	}
+ }