improved header ›~ now with no-header option
This commit is contained in:
Moritz »mo.« Sauer
parent
25dab72954
commit
9caed6f788
35 changed files with 97 additions and 106 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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' %}
|
||||
|
|
@ -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' %}
|
||||
|
|
@ -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' %}
|
||||
|
|
@ -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' %}
|
||||
|
|
@ -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
|
||||
~~~
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Reference in a new issue