steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Build out overlay header and feature row _include helper

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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>

10
_includes/page__hero.html
View File

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

51
_includes/splash-row
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>

43
_pages/splash-page.md
View File

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

1
_posts/2012-03-15-template-header-overlay-image.md
View File

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

134
assets/_scss/_archive.scss
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;
}
}
}
}

24
assets/_scss/_page.scss
View File

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

22
assets/_scss/_splash.scss
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;
}
}

1
assets/_scss/main.scss
View File

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

2
assets/css/main.css
View File

File diff suppressed because one or more lines are too long

BIN
images/unsplash-image-11.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB