Add header overlay sample posts

This commit is contained in:
Michael Rose 2016-03-23 21:50:22 -04:00
parent bda9a23261
commit cae92a8770
13 changed files with 86 additions and 39 deletions

View file

@ -4,18 +4,24 @@
{% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
{% endif %}
{% if page.header.background_image contains "http" %}
{% capture background_img_path %}{{ page.header.background_image }}{% endcapture %}
{% else %}
{% capture background_img_path %}{{ page.header.background_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
{% if page.header.overlay_image contains "http" %}
{% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
{% elsif page.header.overlay_image %}
{% capture overlay_img_path %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
{% endif %}
<div class="page__hero{% if page.header.splash %}--splash{% endif %}"
style="background: {{ page.header.background_color | default: 'transparent' }} {% if background_img_path %}url('{{ background_img_path }}'){% endif %};"
<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
style="background: {{ page.header.overlay_color | default: 'transparent' }} {% if overlay_img_path %}url('{{ overlay_img_path }}'){% endif %};"
>
{% if page.header.splash %}
{% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper">
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
<h1 class="page__title" itemprop="headline">
{% if paginator %}
{{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page }} {{ paginator.page }}{% endunless %}
{% else %}
{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
{% endif %}
</h1>
{% if site.read_time and page.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
</div>
{% else %}

View file

@ -2,7 +2,7 @@
layout: default
---
{% if page.header.image %}
{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
{% include page__hero.html %}
{% endif %}
@ -14,7 +14,9 @@ layout: default
{% include sidebar.html %}
<div class="archive">
{% unless page.header.overlay_color or page.header.overlay_image %}
<h1 class="page__title">{{ page.title }}</h1>
{% endunless %}
{{ content }}
</div>
</div>

View file

@ -4,7 +4,7 @@ layout: default
{% include base_path %}
{% if page.header.image %}
{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
{% include page__hero.html %}
{% endif %}
@ -16,15 +16,18 @@ layout: default
{% include sidebar.html %}
<article class="page" itemscope itemtype="http://schema.org/CreativeWork">
{% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
{% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
{% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
{% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
<div class="page__inner-wrap">
{% unless page.header.overlay_color or page.header.overlay_image %}
<header>
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
{% if site.read_time and page.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
</header>
{% endunless %}
<section class="page__content" itemprop="text">
{{ content }}

View file

@ -4,7 +4,7 @@ layout: default
{% include base_path %}
{% if page.header.splash %}
{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
{% include page__hero.html %}
{% endif %}

View file

@ -1,5 +1,5 @@
---
title: "Template: Featured Image (External URL)"
title: "Template: Header Image (External URL)"
header:
image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg
categories:
@ -12,6 +12,6 @@ tags:
- template
---
This post should display a **featured image**, if the theme supports it.
This post should display a **header image**, if the theme supports it.
Featured image is an external asset and should load.

View file

@ -1,5 +1,5 @@
---
title: "Template: Featured Image (Horizontal)"
title: "Template: Header Image (Horizontal)"
header:
image: unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
@ -13,8 +13,8 @@ tags:
- template
---
This post should display a **featured image**, if the theme supports it.
This post should display a **header image**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests a horizontal featured image.
This post tests a horizontal header image.

View file

@ -1,5 +1,5 @@
---
title: "Template: Featured Image and Text Readability"
title: "Template: Header Image and Text Readability"
header:
image: unsplash-image-4.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

View file

@ -1,5 +1,5 @@
---
title: "Template: Featured Image (Vertical)"
title: "Template: Header Image (Vertical)"
header:
image: unsplash-image-6.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
@ -14,8 +14,8 @@ tags:
- template
---
This post should display a **featured image**, if the theme supports it.
This post should display a **header image**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests a vertical featured image.
This post tests a vertical header image.

View file

@ -0,0 +1,18 @@
---
title: "Template: Header Overlay with Background Fill"
header:
overlay_color: "#333"
categories:
- Template
- Uncategorized
tags:
- edge case
- image
- template
---
This post should display a **header with a solid background color**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests overlay headers.

View file

@ -0,0 +1,18 @@
---
title: "Template: Header Image Overlay"
header:
overlay_image: unsplash-image-1.jpg
categories:
- Template
- Uncategorized
tags:
- edge case
- image
- template
---
This post should display a **header with an overlay image**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests overlay header images.

View file

@ -64,6 +64,19 @@
position: relative;
margin-bottom: 2em;
@include clearfix;
&--overlay {
position: relative;
margin-bottom: 2em;
padding: 3em 0;
@include clearfix;
text-align: center;
.page__title {
color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5);
}
}
}
.page__hero-image {

View file

@ -2,19 +2,6 @@
SPLASH
========================================================================== */
.page__hero--splash {
position: relative;
margin-bottom: 2em;
padding: 3em 0;
@include clearfix;
text-align: center;
.page__title {
color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5);
}
}
.splash__item {
margin-bottom: 2em;

File diff suppressed because one or more lines are too long