added breadcrumbs

_data/navigation.yml

@@ -7,7 +7,7 @@
   side: left
 
 - title: "Style your content"
-  url: "/design/style-guide/"
+  url: "/design/"
   side: left
   dropdown:
   - title: "Grid & Colors"
@@ -33,6 +33,21 @@
   - title: "Portfolio"
     url: "/design/portfolio/"
 
+- title: "Style your Header"
+  url: "/headers/"
+  side: left
+  dropdown:
+  - title: "Header with Full-Width-Image"
+    url: "/design/header-full-width-image/"
+  - title: "Header with Image and Pattern"
+    url: "/design/header-image-pattern/"
+  - title: "Header with image and color"
+    url: "/design/header-image-color/"
+  - title: "Header Only With Logo"
+    url: "/design/header-logo-only/"
+  - title: "No Header"
+    url: "/design/no-header/"
+
 - title: Documentation
   url: "/documentation/"
   side: left

_includes/breadcrumb.html

@@ -0,0 +1,31 @@
+{% comment %}
+
+http://stackoverflow.com/questions/9612235/what-are-some-good-ways-to-implement-breadcrumbs-on-a-jekyll-site
+https://github.com/huonw/huonw.github.io/blob/master/_layouts/default.html#L17
+
+{% endcomment %}
+
+
+{% capture url_parts %} {{ page.url | remove: "/index.html" | replace:'/'," " }}{% endcapture %}
+{% capture num_parts %}{{ url_parts | number_of_words | minus: 1 }}{% endcapture %}
+{% assign previous="" %}
+<nav class="breadcrumbs" role="menubar" aria-label="breadcrumbs">
+ {% if num_parts == "0" or num_parts == "-1" %}
+  <a href="{{ site.url }}">Start</a>
+ {% else %}
+  <a href="{{ site.url }}">Start</a>
+
+  {% for unused in page.content limit:num_parts %}
+   {% capture first_word %}{{ url_parts | truncatewords:1 | remove:"..."}}{% endcapture %}
+   {% capture previous %}{{ previous }}/{{ first_word }}{% endcapture %}
+
+   <a href="{{previous}}">{{ first_word }}</a>
+
+   {% capture url_parts %}{{ url_parts | remove_first:first_word }}{% endcapture %}
+  {% endfor %}
+ {% endif %}
+  <a class="current" href="#">{{ page.title }}</a>
+</nav>
+
+    
+

_includes/list-posts.html

@@ -6,7 +6,8 @@ Possible parameter for this loop:
  › offset
  › category 
 
-Example: {% include list-posts.html entries='3' offset='1' category='design' %}
+Example for Category: {% include list-posts.html entries='3' offset='1' category='design' %}
+Example for Tag: {% include list-posts.html entries='5' tag='terminal' %}
 
 
 This loop works like this:
@@ -18,23 +19,36 @@ This loop works like this:
 3. If a category was given, assign category the given category to the variable category  › assign category = include.categories 
 
 {% endcomment %}
+
+{% assign category = include.category %}
+{% assign tag = include.tag %}
+
+
 <ul class="side-nav">
 
-	{% if include.categories == NULL %}
+  {% if category == NULL and tag == NULL %}
 
-		{% for post in site.posts limit:include.entries offset:include.offset %}
+    {% for post in site.posts limit:include.entries offset:include.offset %}
-			<li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} &middot; {% endif %}<strong>{{ post.title }}</strong></a></li>
+      <li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} &middot; {% endif %}<strong>{{ post.title }}</strong></a></li>
-		{% endfor %}
+    {% endfor %}
-			<li class="text-right"><a href="{{ site.url }}/blog/archive/"><strong>{{ site.data.language.more }}</strong></a></li>
+      <li class="text-right"><a href="{{ site.url }}/archiv/"><strong>Mehr ›</strong></a></li>
 
 
-	{% elsif include.categories != empty %}
-	{% assign category = include.categories %}
-		
-		{% for post in site.categories.[category] limit:include.entries offset:include.offset %}
-			<li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} &middot; {% endif %}<strong>{{ post.title }}</strong></a></li>
-		{% endfor %}
-			<li class="text-right"><a href="{{ site.url }}/blog/archive/"><strong>{{ site.data.language.more }}</strong></a></li>
-	{% endif %}
 
+  {% elsif category %}
+    
+    {% for post in site.categories.[category] limit:include.entries offset:include.offset %}
+      <li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} &middot; {% endif %}<strong>{{ post.title }}</strong></a></li>
+    {% endfor %}
+      <li class="text-right"><a href="{{ site.url }}/archiv/"><strong>Mehr ›</strong></a></li>
+
+
+  {% elsif tag %}
+
+    {% for post in site.tags.[tag] limit:include.entries %}
+      <li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} &middot; {% endif %}<strong>{{ post.title }}</strong></a></li>
+    {% endfor %}
+
+  {% endif %}
 </ul>
+

_layouts/default.html

@@ -1,11 +1,15 @@
 ---
-layout: compress
+# layout: compress
 ---
 {% include header.html %}
 <body id="top-of-page" class="{{ page.format }}">
 	{% include navigation.html %}
 
-	{% include masthead.html %}
+  {% include masthead.html %}
+
+  {% if page.breadcrumb == true %}
+    {% include breadcrumb.html %}
+  {% endif %}
 
 	{{ content }}
 

_posts/design/2014-07-09-post-left-sidebar.md

@@ -3,6 +3,7 @@ layout: post-left-sidebar
 title:  "Post With Left Sidebar"
 description: "This is a example of Post with a Sidebar on the left."
 date:  2014-03-28 00:00:00
+breadcrumb: true
 categories:
     - design
 image:

_posts/design/2014-07-10-breadcrumb.md

@@ -0,0 +1,18 @@
+---
+layout: post
+title:  "Breadcrumbs"
+description: "If you need them, <em>Feeling Responsive</em> offers you a breadcrumb navigation. You can easily turn it on/off via frontmatter."
+breadcrumb: true
+categories:
+    - design
+tags:
+    - blog
+    - content
+    - post
+---
+<div class="alert-box alert radius">WARNING: If you use breadcrumbs be aware, that if you use categories, you need pages for those categories. If not, the link in the breadcrumb won't work.</div>
+
+## Front Matter Code
+~~~
+breadcrumb: true
+~~~

_posts/design/2014-07-10-post-right-sidebar.md

@@ -3,6 +3,7 @@ layout: post-right-sidebar
 title:  "Post With Right Sidebar"
 description: "This is a example of Post with a Sidebar on the right."
 date:  2014-03-28 00:00:00
+breadcrumb: true
 categories:
     - design
 image:

_posts/design/2014-07-10-post.md

@@ -2,6 +2,7 @@
 layout: post
 title:  "Normal Post Template"
 meta_description: "This is an example of a beautiful aligned post in the middle. There is no sidebar to distract the reader. The difference to the Page-Template is, that you find meta-information at the bottom of the post."
+breadcrumb: true
 categories:
     - design
 tags:

_posts/design/2014-10-08-header-image-pattern.md

@@ -2,8 +2,7 @@
 layout: post
 title:  "Header Image With Pattern"
 subheadline:  "Headers With Style"
-meta_description: 
+description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image in front of a pattern."
-description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image in front of a pattern behind it."
 categories:
     - design
 tags:
@@ -11,17 +10,22 @@ tags:
     - pattern
     - header
 header:
-    image:  "header_unsplash_2-970x.jpg"
+    image: header_unsplash_2-970x.jpg
-    pattern:  "pattern_concrete.jpg"
+    pattern: pattern_concrete.jpg
-    color:  ""
 ---
-It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-color/).
+It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-image-color/).
 
 
-## Header Image With Pattern
+## Front Matter Code
 
 ~~~
 header:
     image:  "header_unsplash_2-970x.jpg"
     pattern:  "pattern_concrete.jpg"
 ~~~
+
+
+
+## All Header-Styles 
+
+{% include list-posts.html tag='header' %}

_posts/design/2014-10-09-header-full-width-image.md

@@ -0,0 +1,30 @@
+---
+layout: post
+title:  "Header Full-Width-Image"
+subheadline:  "Headers With Style"
+description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header with a <em>full-width-image</em>."
+categories:
+    - design
+tags:
+    - design
+    - background color
+    - header
+image:
+   header: "unsplash_brooklyn-bridge_header.jpg"
+   thumb: "unsplash_brooklyn-bridge_thumb.jpg"
+---
+It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-pattern/).
+
+## Front Matter Code
+
+~~~
+header:
+    image:  "header_unsplash_2-970x.jpg"
+    background-color:  "#fabb00"
+~~~
+
+
+
+## All Header-Styles 
+
+{% include list-posts.html tag='header' %}

_posts/design/2014-10-09-header-image-color.md

@@ -10,12 +10,14 @@ tags:
     - background color
     - header
 header:
-    image:  "header_unsplash_2-970x.jpg"
+    image:  header_unsplash_2-970x.jpg
     background-color:  "#304558"
 ---
-It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-pattern/).
+It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-image-pattern/).
 
-## Header Image With Background Color
+## Front Matter Code
+
+<div class="alert-box radius alert">WARNING: To make this work the value of <em>background-color</em> must be inbetween quotes.</div>
 
 ~~~
 header:
@@ -23,3 +25,8 @@ header:
     background-color:  "#fabb00"
 ~~~
 
+
+
+## All Header-Styles 
+
+{% include list-posts.html tag='header' %}

_posts/design/2014-10-09-header-logo-only.md

@@ -0,0 +1,18 @@
+---
+layout: post
+title:  "Header With Logo Only"
+subheadline:  "Headers With Style"
+description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header just with an image on the standard background."
+categories:
+    - design
+tags:
+    - design
+    - background color
+    - header
+---
+
+
+
+## All Header-Styles 
+
+{% include list-posts.html tag='header' %}

_posts/design/2014-10-09-no-header.md

@@ -0,0 +1,17 @@
+---
+layout: post
+subheadline:  "Headers With Style"
+title:  "No Header"
+description: "Feeling Responsive allows you to use all different kinds of headers. This example shows <em>no</em> header at all. Just the navigation."
+categories:
+    - design
+tags:
+    - design
+    - background color
+    - header
+---
+No adjustments needed in front matter.
+
+## All Header-Styles 
+
+{% include list-posts.html tag='header' %}

assets/css/styles-responsive.css

@@ -252,7 +252,7 @@ select {
   margin-bottom: 1.25rem;
   position: relative;
   padding: 0.875rem 1.5rem 0.875rem 0.875rem;
-  font-size: 0.8125rem;
+  font-size: 0.9375rem;
   transition: opacity 300ms ease-out;
   background-color: #334d5c;
   border-color: #2c424f;
@@ -318,6 +318,85 @@ select {
   opacity: 0;
 }
 
+/* line 118, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs {
+  display: block;
+  padding: 0.5625rem 0.875rem 0.5625rem;
+  overflow: hidden;
+  margin-left: 0;
+  list-style: none;
+  border-style: solid;
+  border-width: 0px;
+  background-color: white;
+  border-color: #e6e6e6;
+  border-radius: 0;
+}
+/* line 122, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > * {
+  margin: 0;
+  float: left;
+  font-size: 0.6875rem;
+  line-height: 0.6875rem;
+  text-transform: uppercase;
+  color: #334d5c;
+}
+/* line 68, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *:hover a, .breadcrumbs > *:focus a {
+  text-decoration: underline;
+}
+/* line 70, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > * a {
+  color: #334d5c;
+}
+/* line 75, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *.current {
+  cursor: default;
+  color: #333333;
+}
+/* line 78, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *.current a {
+  cursor: default;
+  color: #333333;
+}
+/* line 83, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *.current:hover, .breadcrumbs > *.current:hover a, .breadcrumbs > *.current:focus, .breadcrumbs > *.current:focus a {
+  text-decoration: none;
+}
+/* line 88, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *.unavailable {
+  color: #999999;
+}
+/* line 90, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *.unavailable a {
+  color: #999999;
+}
+/* line 92, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *.unavailable:hover, .breadcrumbs > *.unavailable:hover a, .breadcrumbs > *.unavailable:focus,
+.breadcrumbs > *.unavailable a:focus {
+  text-decoration: none;
+  color: #999999;
+  cursor: default;
+}
+/* line 102, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *:before {
+  content: "/";
+  color: #aaaaaa;
+  margin: 0 0.75rem;
+  position: relative;
+  top: 1px;
+}
+/* line 110, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+.breadcrumbs > *:first-child:before {
+  content: " ";
+  margin: 0;
+}
+
+/* Accessibility - hides the forward slash */
+/* line 130, ../bower_components/foundation/scss/foundation/components/_breadcrumbs.scss */
+[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+  content: "/";
+}
+
 /* line 106, ../bower_components/foundation/scss/foundation/components/_block-grid.scss */
 [class*="block-grid-"] {
   display: block;
@@ -6784,133 +6863,136 @@ Additional Typography to complement Foundation
 
  - - - - - - - - - - - - - - - - - - - - - - - */
 /* line 7, ../scss/_4_typography_theme-fr.scss */
-p a {
+p a,
+article a {
+  font-weight: bold;
   border-bottom: 1px dotted;
 }
 
-/* line 8, ../scss/_4_typography_theme-fr.scss */
+/* line 12, ../scss/_4_typography_theme-fr.scss */
-p a:hover {
+p a:hover,
+article a:hover {
   border-bottom: 2px solid;
 }
 
-/* line 9, ../scss/_4_typography_theme-fr.scss */
+/* line 14, ../scss/_4_typography_theme-fr.scss */
 p a.button {
   border: 0;
 }
 
-/* line 10, ../scss/_4_typography_theme-fr.scss */
+/* line 15, ../scss/_4_typography_theme-fr.scss */
 p.button a {
   border: 0;
   color: #fff;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
-/* line 17, ../scss/_4_typography_theme-fr.scss */
+/* line 22, ../scss/_4_typography_theme-fr.scss */
 img {
   border-radius: 3px;
 }
 
-/* line 18, ../scss/_4_typography_theme-fr.scss */
+/* line 23, ../scss/_4_typography_theme-fr.scss */
 img.alignleft,
 img.left {
   float: left;
   margin: 5px 15px 5px 0;
 }
 
-/* line 20, ../scss/_4_typography_theme-fr.scss */
+/* line 25, ../scss/_4_typography_theme-fr.scss */
 img.alignright,
 img.right {
   float: right;
   margin: 5px 0 5px 15px;
 }
 
-/* line 22, ../scss/_4_typography_theme-fr.scss */
+/* line 27, ../scss/_4_typography_theme-fr.scss */
 img.aligncenter,
 img.center {
   display: block;
   margin: 0 auto 10px;
 }
 
-/* line 25, ../scss/_4_typography_theme-fr.scss */
+/* line 30, ../scss/_4_typography_theme-fr.scss */
 h2 {
   margin-top: 1.5rem;
 }
 
-/* line 26, ../scss/_4_typography_theme-fr.scss */
+/* line 31, ../scss/_4_typography_theme-fr.scss */
 .blog-index h2 {
   margin-top: 10px;
 }
 
-/* line 27, ../scss/_4_typography_theme-fr.scss */
+/* line 32, ../scss/_4_typography_theme-fr.scss */
 h3 {
   margin-top: 1.375rem;
 }
 
-/* line 29, ../scss/_4_typography_theme-fr.scss */
+/* line 34, ../scss/_4_typography_theme-fr.scss */
 article dl dt {
   line-height: 1.3;
 }
 
-/* line 30, ../scss/_4_typography_theme-fr.scss */
+/* line 35, ../scss/_4_typography_theme-fr.scss */
 article dl dd {
   line-height: 1.6;
   margin-bottom: 0.75rem;
   margin-left: 1.5rem;
 }
 
-/* line 33, ../scss/_4_typography_theme-fr.scss */
+/* line 38, ../scss/_4_typography_theme-fr.scss */
 dl.accordion {
   border-top: 1px solid #d7d7d7;
 }
 
-/* line 34, ../scss/_4_typography_theme-fr.scss */
+/* line 39, ../scss/_4_typography_theme-fr.scss */
 .accordion dd {
   border-bottom: 1px solid #d7d7d7;
 }
 
-/* line 35, ../scss/_4_typography_theme-fr.scss */
+/* line 40, ../scss/_4_typography_theme-fr.scss */
 dd.accordion-navigation span {
   padding-right: 12px;
 }
 
-/* line 36, ../scss/_4_typography_theme-fr.scss */
+/* line 41, ../scss/_4_typography_theme-fr.scss */
 dd.accordion-navigation span:before {
   content: "\E766";
 }
 
-/* line 37, ../scss/_4_typography_theme-fr.scss */
+/* line 42, ../scss/_4_typography_theme-fr.scss */
 dd.accordion-navigation.active span:before {
   content: "\E764";
 }
 
-/* line 38, ../scss/_4_typography_theme-fr.scss */
+/* line 43, ../scss/_4_typography_theme-fr.scss */
 dd.accordion-navigation.active span:before {
   content: "\E764";
 }
 
-/* line 41, ../scss/_4_typography_theme-fr.scss */
+/* line 46, ../scss/_4_typography_theme-fr.scss */
 td {
   vertical-align: top;
 }
 
-/* line 43, ../scss/_4_typography_theme-fr.scss */
+/* line 48, ../scss/_4_typography_theme-fr.scss */
 pre {
   overflow: auto;
   margin-bottom: 1.25rem;
 }
 
-/* line 44, ../scss/_4_typography_theme-fr.scss */
+/* line 49, ../scss/_4_typography_theme-fr.scss */
 pre code {
   padding: 0.125rem 0.3125rem 0.0625rem 0;
 }
 
-/* line 45, ../scss/_4_typography_theme-fr.scss */
+/* line 50, ../scss/_4_typography_theme-fr.scss */
 code {
   font-size: 0.875rem;
   line-height: 1.5;
 }
 
-/* line 47, ../scss/_4_typography_theme-fr.scss */
+/* line 52, ../scss/_4_typography_theme-fr.scss */
 blockquote {
   font-style: italic;
   position: relative;
@@ -6919,13 +7001,13 @@ blockquote {
   color: #4b4b4d;
 }
 
-/* line 55, ../scss/_4_typography_theme-fr.scss */
+/* line 60, ../scss/_4_typography_theme-fr.scss */
 blockquote p {
   font-style: italic;
   color: #575757;
 }
 
-/* line 57, ../scss/_4_typography_theme-fr.scss */
+/* line 62, ../scss/_4_typography_theme-fr.scss */
 blockquote:before {
   display: block;
   content: "\00BB";
@@ -6936,7 +7018,7 @@ blockquote:before {
   color: #4b4b4d;
 }
 
-/* line 65, ../scss/_4_typography_theme-fr.scss */
+/* line 70, ../scss/_4_typography_theme-fr.scss */
 blockquote:after {
   display: block;
   content: "\00AB";
@@ -6947,73 +7029,50 @@ blockquote:after {
   color: #4b4b4d;
 }
 
-/* line 75, ../scss/_4_typography_theme-fr.scss */
+/* line 80, ../scss/_4_typography_theme-fr.scss */
 blockquote cite:before {
   content: "\2014 \0020";
 }
 
-/* line 77, ../scss/_4_typography_theme-fr.scss */
+/* line 82, ../scss/_4_typography_theme-fr.scss */
 blockquote cite a, blockquote cite a:visited {
   color: #555;
 }
 
-/* line 79, ../scss/_4_typography_theme-fr.scss */
+/* line 84, ../scss/_4_typography_theme-fr.scss */
 cite {
   padding-top: 5px;
 }
 
-/* line 81, ../scss/_4_typography_theme-fr.scss */
-.alert-box {
-  font-family: "Volkhov", Georgia, Times, serif;
-  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9);
-}
-
-/* line 85, ../scss/_4_typography_theme-fr.scss */
-.alert-box p {
-  margin-bottom: 0;
-}
-
 /* line 86, ../scss/_4_typography_theme-fr.scss */
-.alert-box a {
-  text-shadow: 1px 1px 0px black;
-  color: #fff;
-  border-bottom: 1px dotted #fff;
-}
-
-/* line 91, ../scss/_4_typography_theme-fr.scss */
-.alert-box a:hover {
-  border-bottom: 1px solid #fff;
-}
-
-/* line 95, ../scss/_4_typography_theme-fr.scss */
 button, .button {
   letter-spacing: 1px;
 }
 
-/* line 97, ../scss/_4_typography_theme-fr.scss */
+/* line 88, ../scss/_4_typography_theme-fr.scss */
 mark {
   background-color: #f3cab2;
 }
 
-/* line 99, ../scss/_4_typography_theme-fr.scss */
+/* line 90, ../scss/_4_typography_theme-fr.scss */
 .subheadline {
   font-size: 1rem;
   margin: 0;
   text-transform: uppercase;
 }
 
-/* line 100, ../scss/_4_typography_theme-fr.scss */
+/* line 91, ../scss/_4_typography_theme-fr.scss */
 .teaser {
   font-size: 1.25rem;
 }
 
-/* line 101, ../scss/_4_typography_theme-fr.scss */
+/* line 92, ../scss/_4_typography_theme-fr.scss */
 .big-teaser {
   font-style: italic;
   font-weight: 300;
 }
 
-/* line 102, ../scss/_4_typography_theme-fr.scss */
+/* line 93, ../scss/_4_typography_theme-fr.scss */
 .big-teaser a {
   font-style: italic;
   font-weight: 400;
@@ -7021,13 +7080,13 @@ mark {
 
 /* Bigteaser Schriftgröße auf kleinen Bildschirmen veringern */
 @media only screen {
-  /* line 107, ../scss/_4_typography_theme-fr.scss */
+  /* line 98, ../scss/_4_typography_theme-fr.scss */
   .big-teaser {
     font-size: 1.25rem;
   }
 }
 @media only screen and (min-width: 40.063em) {
-  /* line 112, ../scss/_4_typography_theme-fr.scss */
+  /* line 103, ../scss/_4_typography_theme-fr.scss */
   .big-teaser {
     font-size: 1.8125rem;
   }
@@ -7037,42 +7096,42 @@ mark {
 Additional typographical elements
 
  - - - - - - - - - - - - - - - - - - - - - - - */
-/* line 124, ../scss/_4_typography_theme-fr.scss */
+/* line 115, ../scss/_4_typography_theme-fr.scss */
 .sans {
   font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 }
 
-/* line 125, ../scss/_4_typography_theme-fr.scss */
+/* line 116, ../scss/_4_typography_theme-fr.scss */
 .serif {
   font-family: "Volkhov", Georgia, Times, serif;
 }
 
-/* line 127, ../scss/_4_typography_theme-fr.scss */
+/* line 118, ../scss/_4_typography_theme-fr.scss */
 .font-size-h1 {
   font-size: 3.375rem;
 }
 
-/* line 128, ../scss/_4_typography_theme-fr.scss */
+/* line 119, ../scss/_4_typography_theme-fr.scss */
 .font-size-h2 {
   font-size: 2.25rem;
 }
 
-/* line 129, ../scss/_4_typography_theme-fr.scss */
+/* line 120, ../scss/_4_typography_theme-fr.scss */
 .font-size-h3 {
   font-size: 1.8125rem;
 }
 
-/* line 130, ../scss/_4_typography_theme-fr.scss */
+/* line 121, ../scss/_4_typography_theme-fr.scss */
 .font-size-h4 {
   font-size: 1.5rem;
 }
 
-/* line 131, ../scss/_4_typography_theme-fr.scss */
+/* line 122, ../scss/_4_typography_theme-fr.scss */
 .font-size-h5 {
   font-size: 1.1875rem;
 }
 
-/* line 132, ../scss/_4_typography_theme-fr.scss */
+/* line 123, ../scss/_4_typography_theme-fr.scss */
 .font-size-p {
   font-size: 1rem;
 }
@@ -7091,32 +7150,32 @@ Additional typographical elements
   font-weight: normal;
   font-style: normal;
 }
-/* line 158, ../scss/_4_typography_theme-fr.scss */
+/* line 149, ../scss/_4_typography_theme-fr.scss */
 .entypo {
   font-family: 'entypo';
 }
 
-/* line 159, ../scss/_4_typography_theme-fr.scss */
+/* line 150, ../scss/_4_typography_theme-fr.scss */
 .entypo-social {
   font-family: 'entypo-social';
 }
 
-/* line 160, ../scss/_4_typography_theme-fr.scss */
+/* line 151, ../scss/_4_typography_theme-fr.scss */
 .entypo-32 {
   font-size: 2rem;
 }
 
-/* line 161, ../scss/_4_typography_theme-fr.scss */
+/* line 152, ../scss/_4_typography_theme-fr.scss */
 .entypo-29 {
   font-size: 1.8125rem;
 }
 
-/* line 162, ../scss/_4_typography_theme-fr.scss */
+/* line 153, ../scss/_4_typography_theme-fr.scss */
 .entypo-48 {
   font-size: 3rem;
 }
 
-/* line 163, ../scss/_4_typography_theme-fr.scss */
+/* line 154, ../scss/_4_typography_theme-fr.scss */
 .entypo-64 {
   font-size: 4rem;
 }
@@ -7469,47 +7528,52 @@ CSS-Classes to add margin at the top or bottom
   margin: 0;
 }
 
-/* line 11, ../scss/_6_additional_theme-fr.scss */
+/* line 12, ../scss/_6_additional_theme-fr.scss */
 .alert-box {
-  font-family: "Volkhov", Georgia, Times, serif;
+  font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9);
 }
 
-/* line 12, ../scss/_6_additional_theme-fr.scss */
+/* line 16, ../scss/_6_additional_theme-fr.scss */
-.alert-box.terminal {
-  background: #0b0b0b;
-  color: #fff;
-  border-color: #090909;
-}
-
-/* line 14, ../scss/_6_additional_theme-fr.scss */
 .alert-box p {
   margin-bottom: 0;
 }
 
-/* line 15, ../scss/_6_additional_theme-fr.scss */
+/* line 19, ../scss/_6_additional_theme-fr.scss */
 .alert-box a {
   text-shadow: 1px 1px 0px black;
   color: #fff;
   border-bottom: 1px dotted #fff;
 }
 
-/* line 20, ../scss/_6_additional_theme-fr.scss */
+/* line 24, ../scss/_6_additional_theme-fr.scss */
 .alert-box a:hover {
   border-bottom: 1px solid #fff;
 }
 
-/* line 24, ../scss/_6_additional_theme-fr.scss */
+/* line 27, ../scss/_6_additional_theme-fr.scss */
+.alert-box.terminal {
+  background: #0b0b0b;
+  color: #fff;
+  border-color: #090909;
+}
+
+/* line 33, ../scss/_6_additional_theme-fr.scss */
+.breadcrumbs > .current {
+  font-weight: bold;
+}
+
+/* line 37, ../scss/_6_additional_theme-fr.scss */
 button, .button {
   letter-spacing: 1px;
 }
 
-/* line 25, ../scss/_6_additional_theme-fr.scss */
+/* line 38, ../scss/_6_additional_theme-fr.scss */
 button.grey, .button.grey {
   background: #575757;
 }
 
-/* line 26, ../scss/_6_additional_theme-fr.scss */
+/* line 39, ../scss/_6_additional_theme-fr.scss */
 button.grey:hover,
 button.grey:focus,
 .button.grey:hover,
@@ -7517,74 +7581,75 @@ button.grey:focus,
   background-color: #0b0b0b;
 }
 
-/* line 32, ../scss/_6_additional_theme-fr.scss */
+/* line 45, ../scss/_6_additional_theme-fr.scss */
 .shadow-no {
   text-shadow: transparent 0 0 0;
 }
 
-/* line 33, ../scss/_6_additional_theme-fr.scss */
+/* line 46, ../scss/_6_additional_theme-fr.scss */
 .shadow-black {
   text-shadow: rgba(0, 0, 0, 0.49804) 0px 1px 2px;
 }
 
-/* line 34, ../scss/_6_additional_theme-fr.scss */
+/* line 47, ../scss/_6_additional_theme-fr.scss */
 .shadow-white {
   text-shadow: rgba(255, 255, 255, 0.49804) 0px 1px 2px;
 }
 
-/* line 37, ../scss/_6_additional_theme-fr.scss */
+/* line 50, ../scss/_6_additional_theme-fr.scss */
 .side-nav li.title {
   text-transform: uppercase;
 }
 
-/* line 38, ../scss/_6_additional_theme-fr.scss */
+/* line 51, ../scss/_6_additional_theme-fr.scss */
 .side-nav li {
   border-top: 1px solid #cbcbcb;
 }
 
-/* line 39, ../scss/_6_additional_theme-fr.scss */
+/* line 52, ../scss/_6_additional_theme-fr.scss */
 .side-nav li a:not(.button) {
+  border-bottom: 0;
   padding: 0.4375rem 0rem;
 }
 
-/* line 40, ../scss/_6_additional_theme-fr.scss */
+/* line 53, ../scss/_6_additional_theme-fr.scss */
 .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
   background: #eee;
 }
 
-/* line 42, ../scss/_6_additional_theme-fr.scss */
+/* line 55, ../scss/_6_additional_theme-fr.scss */
 .homepage p {
   margin: 0;
   padding: 0;
   color: #575757;
 }
 
-/* line 43, ../scss/_6_additional_theme-fr.scss */
+/* line 56, ../scss/_6_additional_theme-fr.scss */
 .caption a {
   border-bottom: 1px dotted #bebebe;
   color: #575757;
   font-size: 0.8125rem;
 }
 
-/* line 46, ../scss/_6_additional_theme-fr.scss */
+/* line 59, ../scss/_6_additional_theme-fr.scss */
 .meta-info p {
   font-size: 0.8125rem;
   color: #efefef;
 }
 
-/* line 50, ../scss/_6_additional_theme-fr.scss */
+/* line 63, ../scss/_6_additional_theme-fr.scss */
 .meta-info a {
   text-decoration: underline;
   color: #efefef;
 }
 
-/* line 54, ../scss/_6_additional_theme-fr.scss */
+/* line 67, ../scss/_6_additional_theme-fr.scss */
 .meta-info a:hover {
   text-decoration: none;
   color: #a1d044;
 }
 
-/* line 60, ../scss/_6_additional_theme-fr.scss */
+/* line 73, ../scss/_6_additional_theme-fr.scss */
 #logo-monochrome {
   background: url(../img/phlow-logo-monochrome-100x36.png) no-repeat;
   height: 36px;

blog/archive.html

@@ -2,6 +2,7 @@
 layout: default
 title: "Blog Archive"
 description: "Check out all blog posts in my blog archive. Click on a headline to read the teaser."
+breadcrumb: true
 image:
    header: header_unsplash_8.jpg
 permalink: "blog/archive/"

blog/index.html

@@ -1,10 +1,10 @@
 ---
 layout: blog
-title: "The Feeling Responsive Blog Template"
+title: "Blog"
+description: "This is the Feeling Responsive Blog Template."
+breadcrumb: true
 image:
    header: "unsplash_6_bus_header.jpg"
    thumb: "unsplash_6_bus_thumb.jpg"
 ---
 
-
-

pages/404.md

@@ -1,8 +1,8 @@
 ---
 layout: page
-title: "404"
+title: "Oops! Noting here..."
-subheadline: "Oops! There is noting here..."
+subheadline: "404"
-description: "..., this is an error-page. Maybe the webpage moved or we deleted it. Or did you maybe mistype the URL?"
+description: "Maybe the webpage moved or we deleted it. Or did you maybe mistype the URL?"
 permalink: "/404.html"
 ---
 ## No problem!
@@ -12,7 +12,7 @@ Try...
 ...our **search**.
 
 
-### Search 
+### Search and Find
 
 {% include google_search.html %}
 

pages/design.md

@@ -4,10 +4,10 @@ title: "Style your content!"
 subheadline: "Layouts of Feeling Responsive"
 image:
    header: "header_unsplash_5.jpg"
-permalink: "/design/style-guide/"
+permalink: "/design/"
 ---
 <ul>
     {% for post in site.categories.design %}
-    <li><a href="{{ site.url }}/{{ post.permalink }}">{{ post.title }}</a></li>
+    <li><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></li>
     {% endfor %}
 </ul>

pages/headers.md

@@ -0,0 +1,14 @@
+---
+layout: page
+subheadline: "Header"
+title: "Style your Header!"
+description: "These are your options to style the header of each webpage individually."
+image:
+   header: "header_unsplash_5.jpg"
+permalink: "/headers/"
+---
+<ul>
+    {% for post in site.tags.header %}
+    <li><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></li>
+    {% endfor %}
+</ul>

pages/roadmap.md

@@ -10,12 +10,12 @@ permalink: "/roadmap/"
 
 ## ToDo
 
+* Produce an introduction video to showcase *Feeling Responsive*
+* [Submit *Feeling Responsive* to jekyllthemes.org](http://jekyllthemes.org/)
+* Optimize HTML and use Schema.org-Attributes › <http://schema.org/Article>
 * Convert Foundation Sass to use native Jekyll Sass support
 * More post-formats for blogging like special post formats for links, audio, tweets,...
-* [Submit *Feeling Responsive* to jekyllthemes.org](http://jekyllthemes.org/)
 * Produce some small tutorials to show features and how to customize *Feeling Responsive*
-* Optimize HTML and use Schema.org-Attributes › <http://schema.org/Article>
-* Produce an introduction video to showcase *Feeling Responsive*
 * Show how to use [Entypo-Icons](http://entypo.com)
 
 ## Done