You can add captions now to header images and article images

_data/navigation.yml

@@ -47,6 +47,8 @@
     url: "/design/header-with-text/"
   - title: "No Header"
     url: "/design/no-header/"
+  - title: "No Header but Image"
+    url: "/design/no-header-but-image/"
 
 - title: Documentation
   url: "/documentation/"

_drafts/page_all_frontmatter.md

@@ -11,12 +11,14 @@ tags:
     - 
 header: no
 header:
-    image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+    image_fullwidth: 
     image:
     pattern:
     color:
     background-color:  "#fabb00"
-    title: header with text
+    title: 
+    caption: 
+    caption_url: 
 image:
     title:
     homepage:

_includes/masthead.html

@@ -22,6 +22,16 @@
 	</div><!-- /.row -->
 </div><!-- /#masthead -->
 
+{% if page.header.caption_url && page.header.caption %}
+<div class="masthead-caption">
+	<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
+</div>
+{% elsif page.header.caption %}
+<div class="masthead-caption">
+	{{ page.header.caption }}
+</div>
+{% endif %}
+
 
 
 {% elsif page.header.image_fullwidth %}
@@ -36,32 +46,62 @@
 	</div><!-- /.row -->
 </div><!-- /#masthead -->
 
+{% if page.header.caption_url && page.header.caption %}
+<div class="masthead-caption">
+	<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
+</div>
+{% elsif page.header.caption %}
+<div class="masthead-caption">
+	{{ page.header.caption }}
+</div>
+{% endif %}
+
 
 
 {% elsif page.header.pattern %}
 
 <div id="masthead-with-pattern" style="background: url('{{ site.url }}/images/{{ page.header.pattern }}')">
 	<div class="row">
-		<div class="small-12 columns">
+		<figure class="small-12 columns">
 			<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
-		</div><!-- /.small-12.columns -->
+		</figure><!-- /.small-12.columns -->
 	</div><!-- /.row -->
 </div><!-- /#masthead -->
 
+	{% if page.header.caption_url && page.header.caption %}
+	<div class="masthead-caption">
+		<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
+	</div>
+	{% elsif page.header.caption %}
+	<div class="masthead-caption">
+		{{ page.header.caption }}
+	</div>
+	{% endif %}
+
 
 
 {% elsif page.header.background-color %}
 
 <div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
 	<div class="row">
-		<div class="small-12 columns">
+		<figure class="small-12 columns">
 			<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
-		</div><!-- /.small-12.columns -->
+		</figure><!-- /.small-12.columns -->
 	</div><!-- /.row -->
 </div><!-- /#masthead -->
 
+{% if page.header.caption_url && page.header.caption %}
+<div class="masthead-caption">
+	<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
+</div>
+{% elsif page.header.caption %}
+<div class="masthead-caption">
+	{{ page.header.caption }}
+</div>
+{% endif %}
+
+
+
 {% elsif page.header == no %}
 
-
-
 {% endif %}

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

@@ -12,6 +12,8 @@ tags:
 header:
     image: header_unsplash_2-970x.jpg
     pattern: pattern_concrete.jpg
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ---
 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/).
 
@@ -22,6 +24,8 @@ It's so easy to do. Just define in front matter an image and a pattern image. In
 header:
     image:  "header_unsplash_2-970x.jpg"
     pattern:  "pattern_concrete.jpg"
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ~~~
 
 

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

@@ -12,7 +12,9 @@ tags:
 image:
    thumb: "unsplash_brooklyn-bridge_thumb.jpg"
 header:
-   image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+    image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ---
 It's so easy to do. Just define in front matter your image.
 
@@ -20,7 +22,9 @@ It's so easy to do. Just define in front matter your image.
 
 ~~~
 header:
-   image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+    image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ~~~
 
 

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

@@ -12,6 +12,8 @@ tags:
 header:
     image: header_unsplash_2-970x.jpg
     background-color:  "#304558"
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ---
 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/).
 
@@ -23,6 +25,8 @@ It's so easy to do. Just define in front matter an image and a background color.
 header:
     image:  "header_unsplash_2-970x.jpg"
     background-color:  "#fabb00"
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ~~~
 
 

_posts/design/2015-02-10-header-with-text.md

@@ -14,6 +14,8 @@ header:
     background-color: "#EFC94C;"
 #    pattern: pattern_concrete.jpg
     image_fullwidth: unsplash_brooklyn-bridge_header.jpg
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ---
 
 
@@ -23,6 +25,8 @@ header:
 header:
     title: header with text
     image_fullwidth: unsplash_brooklyn-bridge_header.jpg
+    caption: This is a caption for the header image with link
+    caption_url: https://unsplash.com/
 ~~~
 
 ### All Header-Styles 

_posts/design/2015-03-12-no-header-but-image.md

@@ -0,0 +1,32 @@
+---
+layout: page
+subheadline:  "Headers With Style"
+title:  "No Header but Article Image"
+teaser: "Feeling Responsive enables you to get the attention of visitors. If you don't want to use a big header, use an image for the article instead."
+categories:
+    - design
+tags:
+    - design
+    - background color
+    - header
+header: no
+image:
+    title: unsplash_eagle.jpg
+    credit: This is a caption for the header image with link
+    url: https://unsplash.com/
+---
+First turn of the header with `header: no`. Than add an image to with the following code. The caption is optional.
+
+~~~
+header: no
+image:
+    title: unsplash_eagle.jpg
+    credit: This is a caption for the header image with link
+    url: https://unsplash.com/
+~~~
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts.html tag='header' %}

_posts/design/2015-03-12-no-header.md

@@ -0,0 +1,24 @@
+---
+layout: page
+subheadline:  "Headers With Style"
+title:  "No Header but Article Image"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header but a centered image above the headline."
+categories:
+    - design
+tags:
+    - design
+    - background color
+    - header
+header: no
+---
+*Silence is beautiful.* Sometimes you just want no distractions at all. Wether you like the content to speak for itself or enjoy pure typography on a plain background: *Feeling Responsive* got you covered. Just say *no* like this:
+
+~~~
+header: no
+~~~
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts.html tag='header' %}

_sass/_06_typography.scss

@@ -107,16 +107,31 @@ img { border-radius: $global-radius;}
 figure {
     margin: 0 0 rem-calc(30) 0;
 }
-figcaption {
+#masthead-with-background-color figure,
+#masthead-with-pattern figure {
+    margin: 0;
+}
+figcaption,
+.masthead-caption {
     color: $grey-10;
     font-family: $font-family-sans-serif;
     font-size: rem-calc(13);
     padding-top: rem-calc(2);
 }
-figcaption a {
+figcaption a,
+.masthead-caption a {
     border-bottom: 1px dotted $grey-4;
     color: $grey-10;
 }
+figcaption a:hover,
+.masthead-caption a:hover {
+    border-bottom: 2px solid $primary-color;
+    color: $primary-color;
+}
+.masthead-caption {
+    padding-right: 10px;
+    text-align: right;
+}
 
 
 /* Lists

pages/roadmap.md

@@ -24,6 +24,7 @@ permalink: "/roadmap/"
 
 ## Done
 
+* [<s>Now with optional caption for header</s>]
 * [<s>Refined humans.txt</s>](http://humanstxt.org/)
 * [<s>Produce an introduction video to showcase *Feeling Responsive*</s>](https://www.youtube.com/embed/3b5zCFSmVvU)
 * [<s>Additional header with text</s>]({{ site.url }}/headers/)