From 7292e04267161b344b7dee9b5cd4af64a12d6f30 Mon Sep 17 00:00:00 2001
From: Marco Blessing <marco.blessing@googlemail.com>
Date: Thu, 17 Aug 2017 17:51:45 +0200
Subject: [PATCH] adds boxes (#227)

* update fontawesome to 4.7

* adds remarkup inspired boxes

* adds markdown example as image

* adds draft post with usage examples

* move box definitions in main.css

* Revert "update fontawesome to 4.7"

This reverts commit 9d7c96cbb2586cd93b91dd099d95c2558aca3bb7.

* moves box examples into showcase post

* fix line endings in test-markdown

* fix line endings
---
 _posts/2015-02-20-test-markdown.md | 22 ++++++++++--
 css/main.css                       | 57 ++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/_posts/2015-02-20-test-markdown.md b/_posts/2015-02-20-test-markdown.md
index 5dd0202..11da066 100644
--- a/_posts/2015-02-20-test-markdown.md
+++ b/_posts/2015-02-20-test-markdown.md
@@ -11,14 +11,14 @@ You can write regular [markdown](http://markdowntutorial.com/) here and Jekyll w
 ## Here is a secondary heading
 
 Here's a useless table:
- 
+
 | Number | Next number | Previous number |
 | :------ |:--- | :--- |
 | Five | Six | Four |
 | Ten | Eleven | Nine |
 | Seven | Eight | Six |
 | Two | Three | One |
- 
+
 
 How about a yummy crepe?
 
@@ -50,3 +50,21 @@ var foo = function(x) {
 }
 foo(3)
 {% endhighlight %}
+
+## Boxes
+You can add notification, warning and error boxes like this:
+
+### Notification
+
+{: .box-note}
+<i class="fa fa-commenting icon-blue" aria-hidden="true"></i> **Note:** This is a notification box.
+
+### Warning
+
+{: .box-warning}
+<i class="fa fa-bolt icon-yellow" aria-hidden="true"></i> **Warning:** This is a warning box.
+
+### Error
+
+{: .box-error}
+<i class="fa fa-exclamation circle icon-red" aria-hidden="true"></i> **Error:** This is a error box.
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index d4480d6..a97f3a6 100644
--- a/css/main.css
+++ b/css/main.css
@@ -680,3 +680,60 @@ td.gutter {
 #social-share-section {
   margin-bottom: 30px;
 }
+
+/* --- Notification boxes --- */
+
+.box-note {
+  background-color: #eee;
+  padding: 15px;
+  padding-left: 10px;
+  margin: 20px;
+  margin-left: 5px;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-left-color: #2980b9;
+  border-radius: 3px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.box-warning {
+  background-color: #fdf5d4;
+  padding: 15px;
+  padding-left: 10px;
+  margin: 20px;
+  margin-left: 5px;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-left-color: #f1c40f;
+  border-radius: 3px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.box-error {
+  background-color: #f4dddb;
+  padding: 15px;
+  padding-left: 10px;
+  margin: 20px;
+  margin-left: 5px;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-left-color: #c0392b;
+  border-radius: 3px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+/* Icon Colors */
+.icon-blue {
+  color: #2980b9;
+}
+
+.icon-yellow {
+color: #f1c40f;
+}
+
+.icon-red{
+  color: #c0392b;
+}