From 5cff044cf2eb047817c2b1074f3a59aa8c43582b Mon Sep 17 00:00:00 2001
From: Michael Geppert <michael.geppert@zalando-lounge.de>
Date: Thu, 31 Jul 2014 00:29:03 +0200
Subject: [PATCH 1/4] Added note, warning and info.

New css file for custom/additional rules added.
---
 _includes/head.html         |  4 ++-
 examples/01-PageObject.md   |  2 +-
 examples/02-HtmlElements.md |  2 +-
 examples/03-BEM.md          |  2 +-
 public/css/additional.css   | 62 +++++++++++++++++++++++++++++++++++++
 5 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 public/css/additional.css

diff --git a/_includes/head.html b/_includes/head.html
index 6b1dcbd..3a5ee60 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -18,6 +18,7 @@
   <!--<link rel="stylesheet" href="/public/css/syntax.css">-->
   <link rel="stylesheet" href="/public/css/pygments.css">
   <link rel="stylesheet" href="/public/css/hyde.css">
+  <link rel="stylesheet" href="/public/css/additional.css">
 
   <link rel="stylesheet" href="/public/css/gh-fork-ribbon.css">
   <!--[if lt IE 9]>
@@ -25,10 +26,11 @@
   <![endif]-->
 
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 
   <!-- Icons -->
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
-                                 <link rel="shortcut icon" href="/public/favicon.ico">
+   <link rel="shortcut icon" href="/public/favicon.ico">
 
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/examples/01-PageObject.md b/examples/01-PageObject.md
index ceda8cc..e8abe37 100644
--- a/examples/01-PageObject.md
+++ b/examples/01-PageObject.md
@@ -41,7 +41,7 @@ Page with login box and currency selector.
 
 The Page Factory needs to be created only once per Mink session.
 
-<p class="message">
+<p class="warning">
     Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
 </p>
 
diff --git a/examples/02-HtmlElements.md b/examples/02-HtmlElements.md
index e140805..f4d54a1 100644
--- a/examples/02-HtmlElements.md
+++ b/examples/02-HtmlElements.md
@@ -41,7 +41,7 @@ On a page there is a sidebar on the left. Inside a sidebar there are multiple si
 
 The Page Factory needs to be created only once per Mink session.
 
-<p class="message">
+<p class="warning">
     Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
 </p>
 
diff --git a/examples/03-BEM.md b/examples/03-BEM.md
index 67425cf..e42882a 100644
--- a/examples/03-BEM.md
+++ b/examples/03-BEM.md
@@ -41,7 +41,7 @@ On a page there is a sidebar on the left. Inside a sidebar there are multiple si
 
 The Page Factory needs to be created only once per Mink session.
 
-<p class="message">
+<p class="warning">
     Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
 </p>
 
diff --git a/public/css/additional.css b/public/css/additional.css
new file mode 100644
index 0000000..0ca4126
--- /dev/null
+++ b/public/css/additional.css
@@ -0,0 +1,62 @@
+.note,
+.warning,
+.info {
+	/*border-radius: 6px;*/
+	border-width: 1px;
+	border-style: solid;
+
+	padding: 10px 10px 10px 40px;
+
+	margin: 10px 0;
+}
+
+.note:before,
+.warning:before,
+.info:before {
+	display: block;
+	float: left;
+	margin-left: -30px;
+	margin-top: 2px;
+
+	background-repeat: no-repeat;
+	background-position: top center;
+
+	font-family: FontAwesome;
+
+	width: 20px;
+	height: 18px;
+
+	font-size: 18px;
+
+	text-align: center;
+}
+
+.note {
+	background: #FEEFB3;
+	border-color: #9F6000;
+	color: #9F6000;
+}
+
+.note:before {
+	content: "\f071";
+}
+
+.warning {
+	border-color: #D8000C;
+	color: #D8000C;
+	background: #FFBABA;
+}
+
+.warning:before {
+	content: "\f06a";
+}
+
+.info {
+	border-color: #00529B;
+	color: #00529B;
+	background: #BDE5F8;
+}
+
+.info:before {
+	content: "\f05a";
+}

From 5016823541624ef07794710f0a877c30f0b4f50e Mon Sep 17 00:00:00 2001
From: Michael Geppert <michael.geppert@zalando-lounge.de>
Date: Thu, 31 Jul 2014 21:42:55 +0200
Subject: [PATCH 2/4] Adjusted colors to be more opaque like website scheme

---
 public/css/additional.css | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/public/css/additional.css b/public/css/additional.css
index 0ca4126..03a781a 100644
--- a/public/css/additional.css
+++ b/public/css/additional.css
@@ -1,9 +1,7 @@
 .note,
 .warning,
 .info {
-	/*border-radius: 6px;*/
-	border-width: 1px;
-	border-style: solid;
+	border-radius: 6px;
 
 	padding: 10px 10px 10px 40px;
 
@@ -18,9 +16,6 @@
 	margin-left: -30px;
 	margin-top: 2px;
 
-	background-repeat: no-repeat;
-	background-position: top center;
-
 	font-family: FontAwesome;
 
 	width: 20px;
@@ -32,9 +27,8 @@
 }
 
 .note {
-	background: #FEEFB3;
-	border-color: #9F6000;
-	color: #9F6000;
+	background: #e6ab0c;
+	color: white;
 }
 
 .note:before {
@@ -42,9 +36,8 @@
 }
 
 .warning {
-	border-color: #D8000C;
-	color: #D8000C;
-	background: #FFBABA;
+	color: white;
+	background: #D8000C;
 }
 
 .warning:before {
@@ -52,9 +45,8 @@
 }
 
 .info {
-	border-color: #00529B;
-	color: #00529B;
-	background: #BDE5F8;
+	color: white;
+	background: #00529B;
 }
 
 .info:before {

From 6f4f480e80a8219c4bae7845561ab786eb8df704 Mon Sep 17 00:00:00 2001
From: Michael Geppert <michael.geppert@zalando-lounge.de>
Date: Wed, 13 Aug 2014 21:30:41 +0200
Subject: [PATCH 3/4] Added format page and example styles in content.

---
 format.md                 | 135 ++++++++++++++++++++++++++++++++++++++
 public/css/additional.css |  28 +++++++-
 2 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 format.md

diff --git a/format.md b/format.md
new file mode 100644
index 0000000..0171b29
--- /dev/null
+++ b/format.md
@@ -0,0 +1,135 @@
+---
+layout:     page
+title:      Formatting
+---
+
+# Example Heading Level 1
+## This are warnings
+
+Some text which might me long or short. With followed example PHP code.
+
+<p class="warning round">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning round pastel">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning pastel">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning round pastel border">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning pastel border">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+```php
+<?php
+
+class Test
+{
+	public function doSomething(array $data)
+	{
+		foreach ( $data as &$entry ) {
+			$entry .= '.';
+		}
+	}
+}
+?>
+```
+
+## This are info
+
+Now even more text and code
+
+<p class="info round">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info round pastel">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info pastel">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info round pastel border">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info pastel border">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+```php
+<?php
+
+class Test
+{
+	public function doSomething(array $data)
+	{
+		foreach ( $data as &$entry ) {
+			$entry .= '.';
+		}
+	}
+}
+?>
+```
+
+## Are those notes?
+
+Even more to say.
+
+<p class="note round">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note round pastel">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note pastel">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note round pastel border">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note pastel border">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+```php
+<?php
+
+class Test
+{
+	public function doSomething(array $data)
+	{
+		foreach ( $data as &$entry ) {
+			$entry .= '.';
+		}
+	}
+}
+?>
+```
+
diff --git a/public/css/additional.css b/public/css/additional.css
index 03a781a..cb9d197 100644
--- a/public/css/additional.css
+++ b/public/css/additional.css
@@ -1,13 +1,20 @@
 .note,
 .warning,
 .info {
-	border-radius: 6px;
-
 	padding: 10px 10px 10px 40px;
 
 	margin: 10px 0;
 }
 
+.round {
+	border-radius: 6px;
+}
+
+
+.border {
+	border: 1px dashed #353535;
+}
+
 .note:before,
 .warning:before,
 .info:before {
@@ -31,6 +38,12 @@
 	color: white;
 }
 
+.note.pastel {
+	background-color: rgba(230, 198, 12, 0.6);
+	/*background-color: #e6c60c;*/
+	color: #353535;
+}
+
 .note:before {
 	content: "\f071";
 }
@@ -40,6 +53,12 @@
 	background: #D8000C;
 }
 
+.warning.pastel {
+	/*background-color: #d8655f;*/
+	background-color: rgba(255, 60, 0, 0.40);
+	color: #353535;
+}
+
 .warning:before {
 	content: "\f06a";
 }
@@ -49,6 +68,11 @@
 	background: #00529B;
 }
 
+.info.pastel {
+	background-color: rgba(0, 100, 255, 0.30);
+	color: #353535;
+}
+
 .info:before {
 	content: "\f05a";
 }

From e7e3933c33ed1ffb7b6f8515ab03afc683daf819 Mon Sep 17 00:00:00 2001
From: Michael Geppert <michael.geppert@zalando-lounge.de>
Date: Fri, 15 Aug 2014 22:50:28 +0200
Subject: [PATCH 4/4] Adjustments (boxes and menu)

---
 format.md                 | 24 ++++++++++++++++++++++++
 public/css/additional.css | 22 ++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/format.md b/format.md
index 0171b29..b62b998 100644
--- a/format.md
+++ b/format.md
@@ -32,6 +32,14 @@ Some text which might me long or short. With followed example PHP code.
     This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
 </p>
 
+<p class="warning round pastel border icon-black">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning pastel border icon-black">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
 ```php
 <?php
 
@@ -75,6 +83,14 @@ Now even more text and code
     This is some info message with some embedded code <code>getPage</code> for which we have something to say.
 </p>
 
+<p class="info round pastel border icon-black">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info pastel border icon-black">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
 ```php
 <?php
 
@@ -118,6 +134,14 @@ Even more to say.
     This is some note message with some embedded code <code>getPage</code> for which we have something to say.
 </p>
 
+<p class="note round pastel border version2 icon-black">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note pastel border version2 icon-black">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
 ```php
 <?php
 
diff --git a/public/css/additional.css b/public/css/additional.css
index cb9d197..0df61e7 100644
--- a/public/css/additional.css
+++ b/public/css/additional.css
@@ -33,11 +33,21 @@
 	text-align: center;
 }
 
+.note.icon-black:before,
+.warning.icon-black:before,
+.info.icon-black:before {
+	color: black;
+}
+
 .note {
 	background: #e6ab0c;
 	color: white;
 }
 
+.note.pastel.version2 {
+	background-color: rgba(255, 255, 0, 0.65);
+}
+
 .note.pastel {
 	background-color: rgba(230, 198, 12, 0.6);
 	/*background-color: #e6c60c;*/
@@ -76,3 +86,15 @@
 .info:before {
 	content: "\f05a";
 }
+
+.lead {
+	margin-bottom: 2rem;
+}
+
+.sidebar-nav {
+	margin-bottom: 2rem;
+}
+
+.sidebar a {
+	text-shadow: 1px 1px 1px #408DB5;
+}
\ No newline at end of file