New! Embed Alerts via new include

Phlow · Phlow · commit ebdc6f8c6562 · 2015-03-30T14:04:00.000+02:00
Showing alerts in your content is simplified via include. Have a look at http://phlow.github.io/feeling-responsive/documentation/#alert-embed-an- alert-in-your-content
diff --git a/_includes/alert b/_includes/alert
@@ -0,0 +1,33 @@
+{% comment %}
+*  
+*  This include lets you easily display an alert.
+*  To use the include no `.html` ending is necessary.
+*  You can use five different kinds of alerts:
+*
+*  - warning
+*  - info
+*  - success
+*  - alert
+*  - text
+*
+*  You can even use <html>-tags inside the alert. Beware:
+*  Use " and ' properly. 
+*  
+*  Example: {% include alert info='Show an info alert with outstanding information' %}
+*  
+{% endcomment %}
+
+
+{% if include.warning %}
+<div class="alert-box warning radius">{{ include.warning }}</div>
+{% elsif include.info %}
+<div class="alert-box info radius">{{ include.info }}</div>
+{% elsif include.success %}
+<div class="alert-box success radius">{{ include.success }}</div>
+{% elsif include.alert %}
+<div class="alert-box alert radius">{{ include.alert }}</div>
+{% elsif include.text %}
+<div class="alert-box text radius">{{ include.text }}</div>
+{% elsif include.terminal %}
+<div class="alert-box terminal radius">{{ include.terminal }}</div>
+{% endif %}
diff --git a/_sass/_02_settings_colors.scss b/_sass/_02_settings_colors.scss
@@ -30,7 +30,7 @@ $secondary-color: $ci-6;
 $alert-color: $ci-5;
 $success-color: $ci-6;
 $warning-color: $ci-4;
-$info-color: $ci-2;
+$info-color: $ci-1;
 
 
 
diff --git a/_sass/_09_elements.scss b/_sass/_09_elements.scss
@@ -58,9 +58,15 @@
     border-bottom: 1px solid #fff;
   }
   .alert-box.terminal {
-    background: $grey-16; 
+    background: $grey-12; 
     color: #fff; 
-    border-color: scale-color($grey-16, $lightness: -14%);
+    border-color: scale-color($grey-12, $lightness: -14%);
+  }
+  .alert-box.text {
+    background-color: $grey-2;
+    text-shadow: 0px 0px 0px rgba(0,0,0,0.9);
+    border-color: scale-color($grey-2, $lightness: -14%);
+    color: $grey-12;
   }
 
 .breadcrumbs>.current {
diff --git a/pages/documentation.md b/pages/documentation.md
@@ -250,6 +250,43 @@ If your content is on Jekyll you can use this include to automatically generate
 ~~~
 
 
+### list-collection.html
+
+This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page the page gots filtered out via unless. The following example loops through a collection called *wordpress*.
+
+~~~
+{% raw %}{% include list-collection.html collection='wordpress' %}{% endraw %}
+~~~
+
+
+### alert – Embed an alert in your content
+
+This include lets you easily display an alert. To use the include no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`. 
+
+~~~
+{% raw %}{% include alert warning='This is a warning.' %}
+{% include alert info='An info box.' %}
+{% include alert success='Yeah, you made it!' %}
+{% include alert alert='Danger!' %}
+{% include alert terminal='$ jekyll -serve' %}
+{% include alert text='Just a note!' %}{% endraw %}
+~~~
+
+{% include alert warning='This is a warning.' %}
+{% include alert info='An info box.' %}
+{% include alert success='Yeah, you made it!' %}
+{% include alert alert='Danger!' %}
+{% include alert terminal='$ jekyll -serve' %}
+{% include alert text='Just a note!' %}
+
+You can even use `<html>`-tags inside the alert. Beware: Use " and ' properly.
+
+~~~
+{% raw %}{% include alert info='<em>Feeling Responsive</em> is listed on <a href="http://jekyllthemes.org/">http://jekyllthemes.org</a>' %}{% endraw %}
+~~~
+
+{% include alert info='<em>Feeling Responsive</em> is listed on <a href="http://jekyllthemes.org/">http://jekyllthemes.org</a>' %}
+
 <small markdown="1">[Up to table of contents](#toc)</small>
 {: .text-right }
 
