1
0
Fork 0

improved header ›~ now with no-header option

This commit is contained in:
Moritz »mo.« Sauer 2015-01-13 23:11:29 +01:00
parent 25dab72954
commit 9caed6f788
35 changed files with 97 additions and 106 deletions

View file

@ -21,6 +21,7 @@ This is an example of a beautiful aligned post in the middle. There is no sideba
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
### Lorem Ipsum
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View file

@ -5,8 +5,8 @@ subheadline: "Multi-Device Layouts"
description: "The full-width page format gives you all the space you need to show your content using the grid."
categories:
- design
image:
header: "unsplash_leaf_header.jpg"
header:
image_fullwidth: "unsplash_leaf_header.jpg"
---
*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing beautiful layouts][1] in the foundation documentation.

View file

@ -6,8 +6,9 @@ description: "Create powerful multi-device layouts quickly and easily with the 1
breadcrumb: true
categories:
- design
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
image:
header: "unsplash_brooklyn-bridge_header.jpg"
thumb: "unsplash_brooklyn-bridge_thumb.jpg"
---
*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing beautiful layouts][1] in the foundation documentation.

View file

@ -2,7 +2,7 @@
layout: post
title: "Header Image With Pattern"
subheadline: "Headers With Style"
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 kinds of headers. This example shows a header image in front of a pattern."
categories:
- design
tags:
@ -26,6 +26,6 @@ header:
## All Header-Styles
### All Header-Styles
{% include list-posts.html tag='header' %}

View file

@ -1,8 +1,8 @@
---
layout: post
title: "Header Full-Width-Image"
title: "Header with a 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>."
description: "Feeling Responsive allows you to use all kinds of headers. This example shows a header with a <em>full-width-image</em>."
categories:
- design
tags:
@ -10,21 +10,21 @@ tags:
- background color
- header
image:
header: "unsplash_brooklyn-bridge_header.jpg"
thumb: "unsplash_brooklyn-bridge_thumb.jpg"
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.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/).
It's so easy to do. Just define in front matter your image.
## Front Matter Code
~~~
header:
image: "header_unsplash_2-970x.jpg"
background-color: "#fabb00"
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
~~~
## All Header-Styles
### All Header-Styles
{% include list-posts.html tag='header' %}

View file

@ -2,7 +2,7 @@
layout: post
title: "Header Image With Background Color"
subheadline: "Headers With Style"
description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image with a defined background color via front matter."
description: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image with a defined background color via front matter."
categories:
- design
tags:
@ -27,6 +27,6 @@ header:
## All Header-Styles
### All Header-Styles
{% include list-posts.html tag='header' %}

View file

@ -2,7 +2,7 @@
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."
description: "Feeling Responsive allows you to use all kinds of headers. This example shows a header just with an image on the standard background."
categories:
- design
tags:
@ -13,6 +13,6 @@ tags:
## All Header-Styles
### All Header-Styles
{% include list-posts.html tag='header' %}

View file

@ -1,17 +1,18 @@
---
layout: post
layout: page
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."
description: "Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header at all. Just the navigation."
categories:
- design
tags:
- design
- background color
- header
header: no
---
No adjustments needed in front matter.
*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:
## All Header-Styles
{% include list-posts.html tag='header' %}
~~~
header: no
~~~

View file

@ -4,8 +4,8 @@ title: "Wonderful Typography"
subheadline: "Reading Experience"
meta_description: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
description: "<em>Feeling Responsive</em> uses <a href='https://www.google.com/fonts/specimen/Volkhov'>Volkhov</a> for headlines, <a href='https://www.google.com/fonts/specimen/Lato'>Lato</a> for everything else and if you are in need to show some code, it will be in <a href='http://www.microsoft.com/typography/fonts/family.aspx?FID=18'>Lucida Console</a> or <a href='http://en.wikipedia.org/wiki/Monaco_(typeface)'>Monaco</a>."
header: no
image:
header: homepage_typography.jpg
thumb: homepage_typography_thumb.jpg
homepage: homepage_typography.jpg
credit: Image by Antonio