Build out overlay header and feature row _include helper

This commit is contained in:
Michael Rose 2016-03-24 15:28:29 -04:00
parent 4a38b2a4c5
commit 28d6c28050
11 changed files with 250 additions and 83 deletions

45
_includes/feature-row Normal file
View file

@ -0,0 +1,45 @@
{% include base_path %}
{% if include.id %}
{% assign feature_row = page.[include.id] %}
{% else %}
{% assign feature_row = page.feature_row %}
{% endif %}
<div class="feature__wrapper">
{% for f in feature_row %}
<div class="feature__item{% if include.type %}--{{ include.type }}{% endif %}">
<div class="archive__item">
{% if f.image_path %}
<div class="archive__item-teaser">
<img src=
{% if f.image_path contains "http" %}
"{{ f.image_path }}"
{% else %}
"{{ f.image_path | prepend: "/images/" | prepend: base_path }}"
{% endif %}
alt="{% if f.alt %}{{ f.alt }}{% endif %}">
</div>
{% endif %}
<div class="archive__item-body">
{% if f.title %}
<h2 class="archive__item-title">{{ f.title }}</h2>
{% endif %}
{% if f.excerpt %}
<div class="archive__item-excerpt">
{{ f.excerpt | markdownify }}
</div>
{% endif %}
{% if f.url %}
<p><a href="{{ f.url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>

View file

@ -22,7 +22,15 @@
{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }} {{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
{% endif %} {% endif %}
</h1> </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 %} {% if page.excerpt %}
<p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
{% endif %}
{% 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 %}
{% if page.header.cta_url %}
<p><a href="{{ page.header.cta_url }}" class="btn btn--light-outline btn--x-large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
{% endif %}
</div> </div>
{% else %} {% else %}
<img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image"> <img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">

View file

@ -1,51 +0,0 @@
{% include base_path %}
{% if include.id %}
{% assign splash_row = page.[include.id] %}
{% else %}
{% assign splash_row = page.splash_row %}
{% endif %}
{% capture splash_size %}{{ splash_row | size }}{% endcapture %}
{% if splash_size == '2' %}
{% assign splash_layout = 'half' %}
{% elsif splash_size >= '3' %}
{% assign splash_layout = 'third' %}
{% else %}
{% assign splash_layout = '' %}
{% endif %}
<div class="splash__wrapper">
{% for s in splash_row %}
<div class="splash__item">
<div class="archive__item">
{% if s.image_path %}
<div class="archive__item-teaser">
<img src=
{% if s.image_path contains "http" %}
"{{ s.image_path }}"
{% else %}
"{{ s.image_path | prepend: "/images/" | prepend: base_path }}"
{% endif %}
alt="{% if s.alt %}{{ s.alt }}{% endif %}">
</div>
{% endif %}
{% if s.title %}
<h2 class="archive__item-title">{{ s.title }}</h2>
{% endif %}
{% if s.excerpt %}
<div class="archive__item-excerpt">{{ s.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</div>
{% endif %}
{% if s.url %}
<p><a href="{{ s.url }}" class="btn {{ s.btn_class }}">{{ s.btn_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
{% endif %}
</div>
</div>
{% endfor %}
</div>

View file

@ -6,8 +6,13 @@ date: 2016-03-23T11:48:41-04:00
header: header:
overlay_color: "#000" overlay_color: "#000"
overlay_image: unsplash-image-1.jpg overlay_image: unsplash-image-1.jpg
cta_label: "Download"
cta_url: "https://github.com/mmistakes/minimal-mistakes/"
caption: "Photo credit: [**Unsplash**](https://unsplash.com)" caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
splash_row: excerpt: "Bacon ipsum dolor sit amet salami ham hock ham, hamburger corned beef short ribs kielbasa biltong t-bone drumstick tri-tip tail sirloin pork chop."
intro:
- excerpt: "Nullam suscipit et nam, tellus velit pellentesque at malesuada, enim eaque. Quis nulla, netus tempor in diam gravida tincidunt, *proin faucibus* voluptate felis id sollicitudin."
feature_row:
- image_path: unsplash-gallery-image-1-th.jpg - image_path: unsplash-gallery-image-1-th.jpg
alt: "placeholder image 1" alt: "placeholder image 1"
title: "Placeholder 1" title: "Placeholder 1"
@ -18,14 +23,42 @@ splash_row:
excerpt: "This is some sample content that goes here with **Markdown** formatting." excerpt: "This is some sample content that goes here with **Markdown** formatting."
url: "#test-link" url: "#test-link"
btn_label: "Read More" btn_label: "Read More"
btn_class: "btn--inverse" btn_class: "btn--inverse btn--large"
- image_path: unsplash-gallery-image-3-th.jpg - image_path: unsplash-gallery-image-3-th.jpg
title: "Placeholder 3" title: "Placeholder 3"
excerpt: "This is some sample content that goes here with **Markdown** formatting." excerpt: "This is some sample content that goes here with **Markdown** formatting."
feature_row2:
- image_path: unsplash-gallery-image-2-th.jpg
alt: "placeholder image 2"
title: "Placeholder Image Left Aligned"
excerpt: "This is some sample content that goes here with **Markdown** formatting."
url: "#test-link"
btn_label: "Read More"
btn_class: "btn--inverse btn--large"
feature_row3:
- image_path: unsplash-gallery-image-2-th.jpg
alt: "placeholder image 2"
title: "Placeholder Image Right Aligned"
excerpt: "This is some sample content that goes here with **Markdown** formatting."
url: "#test-link"
btn_label: "Read More"
btn_class: "btn--inverse btn--large"
feature_row4:
- image_path: unsplash-gallery-image-2-th.jpg
alt: "placeholder image 2"
title: "Placeholder Image Center Aligned"
excerpt: "This is some sample content that goes here with **Markdown** formatting."
url: "#test-link"
btn_label: "Read More"
btn_class: "btn--inverse btn--large"
--- ---
## Introductory Headline for the Splash Page Goes Here {% include feature-row id="intro" type="center" %}
Bacon ipsum dolor sit amet salami ham hock ham, hamburger corned beef short ribs kielbasa biltong t-bone drumstick tri-tip tail sirloin pork chop. {% include feature-row %}
{% include splash-row %} {% include feature-row id="feature_row2" type="left" %}
{% include feature-row id="feature_row3" type="right" %}
{% include feature-row id="feature_row4" type="center" %}

View file

@ -3,6 +3,7 @@ title: "Template: Header Image Overlay"
header: header:
overlay_image: unsplash-image-1.jpg overlay_image: unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)" caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_url: "https://unsplash.com"
categories: categories:
- Template - Template
- Uncategorized - Uncategorized

View file

@ -122,3 +122,137 @@ a:hover {
} }
} }
} }
/*
Features
========================================================================== */
.feature__wrapper {
@include clearfix();
margin-bottom: 2em;
border-bottom: 1px solid $border-color;
}
.feature__item {
margin-bottom: 2em;
@include breakpoint($small) {
text-align: center;
@include gallery(4 of 12);
.feature__item-teaser {
max-height: 200px;
overflow: hidden;
}
}
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
p {
font-size: 18px;
}
}
&--left {
@include full();
margin-bottom: 2em;
@include breakpoint($small) {
.archive__item-teaser {
@include span(5 of 12);
}
.archive__item-body {
@include span(7 of 12 last);
@include prefix(0.5 of 12);
@include suffix(1 of 12);
}
}
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
p {
font-size: 18px;
}
}
}
&--right {
@include full();
margin-bottom: 2em;
@include breakpoint($small) {
text-align: right;
.archive__item-teaser {
@include span(5 of 12 rtl);
}
.archive__item-body {
@include span(7 of 12 last rtl);
@include prefix(0.5 of 12);
@include suffix(1 of 12);
}
}
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
p {
font-size: 18px;
}
}
}
&--center {
@include full();
margin-bottom: 2em;
@include breakpoint($small) {
text-align: center;
.archive__item-teaser {
margin: 0 auto;
width: span(5 of 12);
}
.archive__item-body {
margin: 0 auto;
width: span(7 of 12);
}
}
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
p {
font-size: 18px;
}
}
}
}

View file

@ -55,6 +55,11 @@
} }
} }
.page__lead {
font-family: $sans-serif;
font-size: 20px;
}
.page__content { .page__content {
p, li { p, li {
font-size: 16px; font-size: 16px;
@ -76,14 +81,29 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
.wrapper {
padding-left: 2em;
padding-right: 2em;
}
.page__title, .page__title,
.page__meta { .page__meta,
.page__lead,
.btn {
color: #fff; color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5); text-shadow: 1px 1px 4px rgba(#000, 0.5);
} }
.page__title { .page__title {
font-size: 64px; font-size: 48px;
@include breakpoint($small) {
font-size: 60px;
}
}
.page__lead {
font-weight: bold;
} }
} }
} }

View file

@ -1,22 +0,0 @@
/* ==========================================================================
SPLASH
========================================================================== */
.splash__item {
margin-bottom: 2em;
@include breakpoint($small) {
text-align: center;
@include gallery(4 of 12);
.splash__item-teaser {
max-height: 200px;
overflow: hidden;
}
}
.archive__item-excerpt {
margin-bottom: 1em;
}
}

View file

@ -30,7 +30,6 @@
@import "page"; @import "page";
@import "archive"; @import "archive";
@import "sidebar"; @import "sidebar";
@import "splash";
@import "vendor/font-awesome/font-awesome"; @import "vendor/font-awesome/font-awesome";
@import "vendor/magnific-popup/magnific-popup"; @import "vendor/magnific-popup/magnific-popup";

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB