websites/dennogumi.org-archive
Archived
1
0
Fork 0
Code Releases Activity

New! Embed Alerts via new include

Browse source 
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
This commit is contained in:
Moritz »mo.« Sauer 2015-03-30 14:03:59 +02:00
commit ebdc6f8c65
4 changed files with 79 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

33
_includes/alert Normal file
View file

@ -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 %}

2
_sass/_02_settings_colors.scss
View file

@ -30,7 +30,7 @@ $secondary-color: $ci-6;
$alert-color: $ci-5; $alert-color: $ci-5;
$success-color: $ci-6; $success-color: $ci-6;
$warning-color: $ci-4; $warning-color: $ci-4;
$info-color: $ci-2; $info-color: $ci-1;

10
_sass/_09_elements.scss
View file

@ -58,9 +58,15 @@
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
.alert-box.terminal { .alert-box.terminal {
background: $grey-16; background: $grey-12;
color: #fff; 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 { .breadcrumbs>.current {

37
pages/documentation.md
View file

@ -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> <small markdown="1">[Up to table of contents](#toc)</small>
{: .text-right } {: .text-right }