improved header ›~ now with no-header option

_includes/footer.html

@@ -9,7 +9,7 @@
       <div id="footer">
         <div class="row">
           <div class="medium-6 large-5 columns">
-            <h5 class="shadow-black sans">{{ site.data.language.about_website }}</h5>
+            <h5 class="shadow-black">{{ site.data.language.about_website }}</h5>
 
             <p class="shadow-black">
               {{ site.description }}
@@ -21,11 +21,11 @@
           <div class="small-6 medium-3 large-3 large-offset-1 columns">
             {% for service_item in site.data.services %}
               {% if forloop.first == true %}
-                <h5 class="shadow-black sans">{{ service_item.menu_name }}</h5>
+                <h5 class="shadow-black">{{ service_item.menu_name }}</h5>
               {% endif %}
             {% endfor %}
               
-              <ul class="no-bullet shadow-black sans">
+              <ul class="no-bullet shadow-black">
               {% for service_item in site.data.services %}
                 {% if service_item.url contains 'http' %}
                   {% assign domain = '' %}
@@ -43,11 +43,11 @@
           <div class="small-6 medium-3 large-3 columns">
             {% for network_item in site.data.network %}
               {% if forloop.first == true %}
-                <h5 class="shadow-black sans">{{ network_item.menu_name }}</h5>
+                <h5 class="shadow-black">{{ network_item.menu_name }}</h5>
               {% endif %}
             {% endfor %}
               
-            <ul class="no-bullet shadow-black sans">
+            <ul class="no-bullet shadow-black">
             {% for network_item in site.data.network %}
               {% if network_item.url contains 'http' %}
                 {% assign domain = '' %}

_includes/footer_scripte.html

@@ -1,7 +1,8 @@
 <script src="{{ site.url }}/assets/js/javascript.min.js"></script>
 
-{% if page.image.header %}
+{% if page.header.image_fullwidth %}
 <script>
-    $("#masthead").backstretch("{{ site.url }}/images/{{ page.image.header }}", {fade: 700});
+    $("#masthead").backstretch("{{ site.url }}/images/{{ page.header.image_fullwidth }}", {fade: 700});
 </script>
-{% endif %}
+{% endif %}
+

_includes/masthead.html

@@ -1,4 +1,4 @@
-{% if page.image.header == NULL and page.header.pattern == NULL and page.header.background-color == NULL %}
+{% if page.header == NULL and page.header.image_fullwidth == NULL and page.header.pattern == NULL and page.header.background-color == NULL %}
 
 	<div id="masthead-no-image-header">
 		<div class="row">
@@ -10,7 +10,7 @@
 		</div><!-- /.row -->
 	</div><!-- /#masthead -->
 
-{% elsif page.image.header %}
+{% elsif page.header.image_fullwidth %}
 
 	<div id="masthead">
 		<div class="row">
@@ -36,12 +36,16 @@
 
 {% 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">
-				<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
-	 		</div><!-- /.small-12.columns -->
-		</div><!-- /.row -->
-	</div><!-- /#masthead -->
+  <div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
+    <div class="row">
+      <div class="small-12 columns">
+        <img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
+      </div><!-- /.small-12.columns -->
+    </div><!-- /.row -->
+  </div><!-- /#masthead -->
+
+{% elsif page.header == no %}
+
+test
 
 {% endif %}

_includes/sidebar.html

@@ -8,8 +8,10 @@
 		</p>
 	</div>
 
+  <img class="b30" src="http://dummyimage.com/303x16:9/df4949/e27b3f.png&text=Ugly+Ad+Space" alt="">
 
-	<div class="ad-panel radius b30">
+
+	<div class="border-dotted radius b30">
 		<img src="http://placekitten.com/271/270" alt="uh, Placekitten">
 		<p class="text-left">
 			This is an advertisment with crazy cats! <a href="http://placekitten.com/">Check'em out.</a>

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

@@ -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.

_posts/design/2014-08-19-page-fullwidth.md

@@ -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.
 

_posts/design/2014-09-13-grid.md

@@ -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.

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

@@ -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' %}

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

@@ -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' %}

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

@@ -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' %}

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

@@ -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' %}

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

@@ -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
+~~~

_posts/design/2014-11-16-typography.md

@@ -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

assets/css/styles-responsive.css

@@ -4450,10 +4450,10 @@ kbd {
 .panel {
   border-style: solid;
   border-width: 1px;
-  border-color: #d8d8d8;
+  border-color: #cbcbcb;
   margin-bottom: 1.25rem;
   padding: 1.25rem;
-  background: #f2f2f2;
+  background: #e4e4e4;
   color: #333333;
 }
 /* line 55, ../bower_components/foundation/scss/foundation/components/_panels.scss */
@@ -7516,64 +7516,58 @@ CSS-Classes to add margin at the top or bottom
 }
 
 /* line 1, ../scss/_6_additional_theme-fr.scss */
-.ad-panel {
-  border: 1px solid #d7d7d7;
-  text-align: center;
-  padding: 15px;
+.border-dotted {
+  border: 1px dotted #a4a4a4;
+  padding: 1.25rem;
+  border-radius: 3px;
 }
 
-/* line 6, ../scss/_6_additional_theme-fr.scss */
-.ad-panel p {
-  padding: 0;
-  margin: 0;
-}
-
-/* line 12, ../scss/_6_additional_theme-fr.scss */
+/* line 7, ../scss/_6_additional_theme-fr.scss */
 .alert-box {
   font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9);
 }
 
-/* line 16, ../scss/_6_additional_theme-fr.scss */
+/* line 11, ../scss/_6_additional_theme-fr.scss */
 .alert-box p {
   margin-bottom: 0;
 }
 
-/* line 19, ../scss/_6_additional_theme-fr.scss */
+/* line 14, ../scss/_6_additional_theme-fr.scss */
 .alert-box a {
   text-shadow: 1px 1px 0px black;
   color: #fff;
   border-bottom: 1px dotted #fff;
 }
 
-/* line 24, ../scss/_6_additional_theme-fr.scss */
+/* line 19, ../scss/_6_additional_theme-fr.scss */
 .alert-box a:hover {
   border-bottom: 1px solid #fff;
 }
 
-/* line 27, ../scss/_6_additional_theme-fr.scss */
+/* line 22, ../scss/_6_additional_theme-fr.scss */
 .alert-box.terminal {
   background: #0b0b0b;
   color: #fff;
   border-color: #090909;
 }
 
-/* line 33, ../scss/_6_additional_theme-fr.scss */
+/* line 28, ../scss/_6_additional_theme-fr.scss */
 .breadcrumbs > .current {
   font-weight: bold;
 }
 
-/* line 37, ../scss/_6_additional_theme-fr.scss */
+/* line 32, ../scss/_6_additional_theme-fr.scss */
 button, .button {
   letter-spacing: 1px;
 }
 
-/* line 38, ../scss/_6_additional_theme-fr.scss */
+/* line 33, ../scss/_6_additional_theme-fr.scss */
 button.grey, .button.grey {
   background: #575757;
 }
 
-/* line 39, ../scss/_6_additional_theme-fr.scss */
+/* line 34, ../scss/_6_additional_theme-fr.scss */
 button.grey:hover,
 button.grey:focus,
 .button.grey:hover,
@@ -7581,75 +7575,75 @@ button.grey:focus,
   background-color: #0b0b0b;
 }
 
-/* line 45, ../scss/_6_additional_theme-fr.scss */
+/* line 40, ../scss/_6_additional_theme-fr.scss */
 .shadow-no {
   text-shadow: transparent 0 0 0;
 }
 
-/* line 46, ../scss/_6_additional_theme-fr.scss */
+/* line 41, ../scss/_6_additional_theme-fr.scss */
 .shadow-black {
   text-shadow: rgba(0, 0, 0, 0.49804) 0px 1px 2px;
 }
 
-/* line 47, ../scss/_6_additional_theme-fr.scss */
+/* line 42, ../scss/_6_additional_theme-fr.scss */
 .shadow-white {
   text-shadow: rgba(255, 255, 255, 0.49804) 0px 1px 2px;
 }
 
-/* line 50, ../scss/_6_additional_theme-fr.scss */
+/* line 45, ../scss/_6_additional_theme-fr.scss */
 .side-nav li.title {
   text-transform: uppercase;
 }
 
-/* line 51, ../scss/_6_additional_theme-fr.scss */
+/* line 46, ../scss/_6_additional_theme-fr.scss */
 .side-nav li {
   border-top: 1px solid #cbcbcb;
 }
 
-/* line 52, ../scss/_6_additional_theme-fr.scss */
+/* line 47, ../scss/_6_additional_theme-fr.scss */
 .side-nav li a:not(.button) {
   border-bottom: 0;
   padding: 0.4375rem 0rem;
 }
 
-/* line 53, ../scss/_6_additional_theme-fr.scss */
+/* line 48, ../scss/_6_additional_theme-fr.scss */
 .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
   background: #eee;
 }
 
-/* line 55, ../scss/_6_additional_theme-fr.scss */
+/* line 50, ../scss/_6_additional_theme-fr.scss */
 .homepage p {
   margin: 0;
   padding: 0;
   color: #575757;
 }
 
-/* line 56, ../scss/_6_additional_theme-fr.scss */
+/* line 51, ../scss/_6_additional_theme-fr.scss */
 .caption a {
   border-bottom: 1px dotted #bebebe;
   color: #575757;
   font-size: 0.8125rem;
 }
 
-/* line 59, ../scss/_6_additional_theme-fr.scss */
+/* line 54, ../scss/_6_additional_theme-fr.scss */
 .meta-info p {
   font-size: 0.8125rem;
   color: #efefef;
 }
 
-/* line 63, ../scss/_6_additional_theme-fr.scss */
+/* line 58, ../scss/_6_additional_theme-fr.scss */
 .meta-info a {
   text-decoration: underline;
   color: #efefef;
 }
 
-/* line 67, ../scss/_6_additional_theme-fr.scss */
+/* line 62, ../scss/_6_additional_theme-fr.scss */
 .meta-info a:hover {
   text-decoration: none;
   color: #a1d044;
 }
 
-/* line 73, ../scss/_6_additional_theme-fr.scss */
+/* line 68, ../scss/_6_additional_theme-fr.scss */
 #logo-monochrome {
   background: url(../img/phlow-logo-monochrome-100x36.png) no-repeat;
   height: 36px;

index.html

@@ -2,8 +2,8 @@
 layout: default
 format: blog-index
 title: "Feeling Responsive – A Jekyll Theme Based On Foundation"
-image:
-    header: "header_unsplash_12.jpg"
+header:
+   image_fullwidth: "header_unsplash_12.jpg"
 ---
 <div id="header-home">
     <div class="row">

pages/changelog.md

@@ -3,8 +3,8 @@ layout: page
 title: "Change is good!"
 subheadline: "Feeling Responsive Theme Changelog"
 description: "History and changelog of Feeling Responsive Theme by Phlow Media."
-image:
-    header: "header_unsplash_9.jpg"
+header:
+   image_fullwidth: "header_unsplash_9.jpg"
 permalink: "/changelog/"
 ---
 2015-01-12 // Version 0.94

pages/design.md

@@ -2,8 +2,8 @@
 layout: page
 title: "Style your content!"
 subheadline: "Layouts of Feeling Responsive"
-image:
-   header: "header_unsplash_5.jpg"
+header:
+   image_fullwidth: "header_unsplash_5.jpg"
 permalink: "/design/"
 ---
 <ul>

pages/documentation.md

@@ -105,19 +105,9 @@ With foundation responsive videos are easy. [More ›](http://foundation.zurb.co
 
 <img class="t60" src="{{ site.url }}/images/header_homepage_13.jpg">
 
-## Images: Header, Title, Thumbnails, Homepage   {#images}
+## Images: Title, Thumbnails, Homepage   {#images}
 
-There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article. 
-
-
-### Header Images
-
-Header images are displayed right under the top navigation. We use Backstretch to expand them from left to right. The width should be 1600 pixel or higher and in a ratio like 16:9 or 21:9 or 2:1.
-
-~~~
-image:
-    header: thumbnail_image.jpg
-~~~
+There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/). 
 
 
 ### Title Images
@@ -127,8 +117,6 @@ image:
     title: thumbnail_image.jpg
 ~~~
 
-You can choose to show a special full-width header image or not.
-
 
 ### Thumbnails
 
@@ -142,7 +130,7 @@ image:
 
 ### Homepage Image
 
-If you want to feature an article on the homepage with a huge image, than use the homepage image with a width of 970 pixels. If no homepage image is defined *Feeling Responsive* writes over the blog entries *New Blog Articles*. Define the homepage image like this:
+If you want to feature an article on the homepage with a huge image, than use the homepage image with a width of 970 pixels. If no homepage image is defined *Feeling Responsive* writes instead *New Blog Articles* over the blog entries. Define the homepage image like this:
 
 ~~~
 image:
@@ -157,7 +145,7 @@ Sometimes you want to give credit to the creator of your images, maybe with a li
 
 ~~~
 image:
-    header: header_image.jpg
+    title: header_image.jpg
     credit: Image by Phlow
     url: "http://phlow.de/"
 ~~~
@@ -166,7 +154,6 @@ image:
 
 ~~~
 image:
-    header: header_image.jpg
     title: title_image.jpg
     thumb: thumbnail_image.jpg
     homepage: header_homepage_13.jpg

pages/getting-started.md

@@ -3,8 +3,8 @@ layout: page
 title: "Getting Started"
 subheadline: "A Step-by-Step Guide"
 description: "This step-by-step guide helps you to customize Feeling Responsive to your needs."
-image:
-    header: header_homepage_13.jpg
+header:
+   image_fullwidth: "header_homepage_13.jpg"
 permalink: "/getting-started/"
 ---
 1. Open `_config.yml` and work it through, it's well documented

pages/headers.md

@@ -2,9 +2,9 @@
 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"
+description: "These are your options to style the header of each webpage individually. <em>Feeling Responsive</em> uses <a href='http://srobbin.com/jquery-plugins/backstretch/'>Backstretch by Scott Robin</a> to expand them from left to right. The width should be 1600 pixel or higher using a ratio like 16:9 or 21:9 or 2:1."
+header:
+   image_fullwidth: "header_unsplash_5.jpg"
 permalink: "/headers/"
 ---
 <ul>

pages/roadmap.md

@@ -3,8 +3,8 @@ layout: page
 title: "Roadmap"
 subheadline: "ToDo-List & Ideas"
 description: "Here are some ideas and features I want to implement in the future."
-image:
-   header: "header_unsplash_3.jpg"
+header:
+   image_fullwidth: "header_unsplash_3.jpg"
 permalink: "/roadmap/"
 ---