diff --git a/_data/navigation.yml b/_data/navigation.yml
index 37eeb5e..9654d85 100644
--- a/_data/navigation.yml
+++ b/_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/"
diff --git a/_drafts/page_all_frontmatter.md b/_drafts/page_all_frontmatter.md
index a4ca8ca..2cedb77 100644
--- a/_drafts/page_all_frontmatter.md
+++ b/_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:
diff --git a/_includes/masthead.html b/_includes/masthead.html
index aaea9ca..5b4fb58 100644
--- a/_includes/masthead.html
+++ b/_includes/masthead.html
@@ -22,6 +22,16 @@
+{% if page.header.caption_url && page.header.caption %}
+
+{% elsif page.header.caption %}
+
+ {{ page.header.caption }}
+
+{% endif %}
+
{% elsif page.header.image_fullwidth %}
@@ -36,32 +46,62 @@
+{% if page.header.caption_url && page.header.caption %}
+
+{% elsif page.header.caption %}
+
+ {{ page.header.caption }}
+
+{% endif %}
+
{% elsif page.header.pattern %}
+ {% if page.header.caption_url && page.header.caption %}
+
+ {% elsif page.header.caption %}
+
+ {{ page.header.caption }}
+
+ {% endif %}
+
{% elsif page.header.background-color %}
+{% if page.header.caption_url && page.header.caption %}
+
+{% elsif page.header.caption %}
+
+ {{ page.header.caption }}
+
+{% endif %}
+
+
+
{% elsif page.header == no %}
-
-
{% endif %}
diff --git a/_posts/design/2014-10-08-header-image-pattern.md b/_posts/design/2014-10-08-header-image-pattern.md
index 2c9b107..34f4901 100755
--- a/_posts/design/2014-10-08-header-image-pattern.md
+++ b/_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/
~~~
diff --git a/_posts/design/2014-10-09-header-full-width-image.md b/_posts/design/2014-10-09-header-full-width-image.md
index 351031c..5e75902 100755
--- a/_posts/design/2014-10-09-header-full-width-image.md
+++ b/_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/
~~~
diff --git a/_posts/design/2014-10-09-header-image-color.md b/_posts/design/2014-10-09-header-image-color.md
index fbe7ca9..387c119 100755
--- a/_posts/design/2014-10-09-header-image-color.md
+++ b/_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/
~~~
diff --git a/_posts/design/2015-02-10-header-with-text.md b/_posts/design/2015-02-10-header-with-text.md
index ea444af..5bc84e8 100644
--- a/_posts/design/2015-02-10-header-with-text.md
+++ b/_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
diff --git a/_posts/design/2015-03-12-no-header-but-image.md b/_posts/design/2015-03-12-no-header-but-image.md
new file mode 100644
index 0000000..65d93ff
--- /dev/null
+++ b/_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' %}
\ No newline at end of file
diff --git a/_posts/design/2015-03-12-no-header.md b/_posts/design/2015-03-12-no-header.md
new file mode 100644
index 0000000..69031a3
--- /dev/null
+++ b/_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 no 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' %}
\ No newline at end of file
diff --git a/_sass/_06_typography.scss b/_sass/_06_typography.scss
index ce4091a..032d2af 100644
--- a/_sass/_06_typography.scss
+++ b/_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
diff --git a/images/unsplash_eagle.jpg b/images/unsplash_eagle.jpg
new file mode 100644
index 0000000..76af344
Binary files /dev/null and b/images/unsplash_eagle.jpg differ
diff --git a/pages/roadmap.md b/pages/roadmap.md
index 98955eb..54922c5 100644
--- a/pages/roadmap.md
+++ b/pages/roadmap.md
@@ -24,6 +24,7 @@ permalink: "/roadmap/"
## Done
+* [Now with optional caption for header]
* [Refined humans.txt](http://humanstxt.org/)
* [Produce an introduction video to showcase *Feeling Responsive*](https://www.youtube.com/embed/3b5zCFSmVvU)
* [Additional header with text]({{ site.url }}/headers/)
-