Build out overlay header and feature row _include helper
This commit is contained in:
Michael Rose
parent
4a38b2a4c5
commit
28d6c28050
11 changed files with 250 additions and 83 deletions
45
_includes/feature-row
Normal file
45
_includes/feature-row
Normal 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>
|
||||
|
|
@ -22,7 +22,15 @@
|
|||
{{ 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 %}
|
||||
{% 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>
|
||||
{% else %}
|
||||
<img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -6,8 +6,13 @@ date: 2016-03-23T11:48:41-04:00
|
|||
header:
|
||||
overlay_color: "#000"
|
||||
overlay_image: unsplash-image-1.jpg
|
||||
cta_label: "Download"
|
||||
cta_url: "https://github.com/mmistakes/minimal-mistakes/"
|
||||
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
|
||||
alt: "placeholder image 1"
|
||||
title: "Placeholder 1"
|
||||
|
|
@ -18,14 +23,42 @@ splash_row:
|
|||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
||||
url: "#test-link"
|
||||
btn_label: "Read More"
|
||||
btn_class: "btn--inverse"
|
||||
btn_class: "btn--inverse btn--large"
|
||||
- image_path: unsplash-gallery-image-3-th.jpg
|
||||
title: "Placeholder 3"
|
||||
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" %}
|
||||
|
|
@ -3,6 +3,7 @@ title: "Template: Header Image Overlay"
|
|||
header:
|
||||
overlay_image: unsplash-image-1.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
cta_url: "https://unsplash.com"
|
||||
categories:
|
||||
- Template
|
||||
- Uncategorized
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.page__lead {
|
||||
font-family: $sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
p, li {
|
||||
font-size: 16px;
|
||||
|
|
@ -76,14 +81,29 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
.wrapper {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.page__title,
|
||||
.page__meta {
|
||||
.page__meta,
|
||||
.page__lead,
|
||||
.btn {
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 4px rgba(#000, 0.5);
|
||||
}
|
||||
|
||||
.page__title {
|
||||
font-size: 64px;
|
||||
font-size: 48px;
|
||||
|
||||
@include breakpoint($small) {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.page__lead {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
@import "page";
|
||||
@import "archive";
|
||||
@import "sidebar";
|
||||
@import "splash";
|
||||
|
||||
@import "vendor/font-awesome/font-awesome";
|
||||
@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 |
Loading…
Reference in a new issue