Skip to content

Commit 28d6c28

Browse files
mmistakesmmistakes
committedMar 24, 2016
Build out overlay header and feature row _include helper
1 parent 4a38b2a commit 28d6c28

11 files changed

+250
-83
lines changed
 

‎_includes/feature-row

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{% include base_path %}
2+
3+
{% if include.id %}
4+
{% assign feature_row = page.[include.id] %}
5+
{% else %}
6+
{% assign feature_row = page.feature_row %}
7+
{% endif %}
8+
9+
<div class="feature__wrapper">
10+
11+
{% for f in feature_row %}
12+
<div class="feature__item{% if include.type %}--{{ include.type }}{% endif %}">
13+
<div class="archive__item">
14+
{% if f.image_path %}
15+
<div class="archive__item-teaser">
16+
<img src=
17+
{% if f.image_path contains "http" %}
18+
"{{ f.image_path }}"
19+
{% else %}
20+
"{{ f.image_path | prepend: "/images/" | prepend: base_path }}"
21+
{% endif %}
22+
alt="{% if f.alt %}{{ f.alt }}{% endif %}">
23+
</div>
24+
{% endif %}
25+
26+
<div class="archive__item-body">
27+
{% if f.title %}
28+
<h2 class="archive__item-title">{{ f.title }}</h2>
29+
{% endif %}
30+
31+
{% if f.excerpt %}
32+
<div class="archive__item-excerpt">
33+
{{ f.excerpt | markdownify }}
34+
</div>
35+
{% endif %}
36+
37+
{% if f.url %}
38+
<p><a href="{{ f.url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
39+
{% endif %}
40+
</div>
41+
</div>
42+
</div>
43+
{% endfor %}
44+
45+
</div>

‎_includes/page__hero.html

+9-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,15 @@ <h1 class="page__title" itemprop="headline">
2222
{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
2323
{% endif %}
2424
</h1>
25-
{% 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 %}
25+
{% if page.excerpt %}
26+
<p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
27+
{% endif %}
28+
{% if site.read_time and page.read_time %}
29+
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
30+
{% endif %}
31+
{% if page.header.cta_url %}
32+
<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>
33+
{% endif %}
2634
</div>
2735
{% else %}
2836
<img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">

‎_includes/splash-row

-51
This file was deleted.

‎_pages/splash-page.md

+38-5
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,13 @@ date: 2016-03-23T11:48:41-04:00
66
header:
77
overlay_color: "#000"
88
overlay_image: unsplash-image-1.jpg
9+
cta_label: "Download"
10+
cta_url: "https://github.com/mmistakes/minimal-mistakes/"
911
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
10-
splash_row:
12+
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."
13+
intro:
14+
- 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."
15+
feature_row:
1116
- image_path: unsplash-gallery-image-1-th.jpg
1217
alt: "placeholder image 1"
1318
title: "Placeholder 1"
@@ -18,14 +23,42 @@ splash_row:
1823
excerpt: "This is some sample content that goes here with **Markdown** formatting."
1924
url: "#test-link"
2025
btn_label: "Read More"
21-
btn_class: "btn--inverse"
26+
btn_class: "btn--inverse btn--large"
2227
- image_path: unsplash-gallery-image-3-th.jpg
2328
title: "Placeholder 3"
2429
excerpt: "This is some sample content that goes here with **Markdown** formatting."
30+
feature_row2:
31+
- image_path: unsplash-gallery-image-2-th.jpg
32+
alt: "placeholder image 2"
33+
title: "Placeholder Image Left Aligned"
34+
excerpt: "This is some sample content that goes here with **Markdown** formatting."
35+
url: "#test-link"
36+
btn_label: "Read More"
37+
btn_class: "btn--inverse btn--large"
38+
feature_row3:
39+
- image_path: unsplash-gallery-image-2-th.jpg
40+
alt: "placeholder image 2"
41+
title: "Placeholder Image Right Aligned"
42+
excerpt: "This is some sample content that goes here with **Markdown** formatting."
43+
url: "#test-link"
44+
btn_label: "Read More"
45+
btn_class: "btn--inverse btn--large"
46+
feature_row4:
47+
- image_path: unsplash-gallery-image-2-th.jpg
48+
alt: "placeholder image 2"
49+
title: "Placeholder Image Center Aligned"
50+
excerpt: "This is some sample content that goes here with **Markdown** formatting."
51+
url: "#test-link"
52+
btn_label: "Read More"
53+
btn_class: "btn--inverse btn--large"
2554
---
2655

27-
## Introductory Headline for the Splash Page Goes Here
56+
{% include feature-row id="intro" type="center" %}
57+
58+
{% include feature-row %}
59+
60+
{% include feature-row id="feature_row2" type="left" %}
2861

29-
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.
62+
{% include feature-row id="feature_row3" type="right" %}
3063

31-
{% include splash-row %}
64+
{% include feature-row id="feature_row4" type="center" %}

‎_posts/2012-03-15-template-header-overlay-image.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: "Template: Header Image Overlay"
33
header:
44
overlay_image: unsplash-image-1.jpg
55
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
6+
cta_url: "https://unsplash.com"
67
categories:
78
- Template
89
- Uncategorized

‎assets/_scss/_archive.scss

+134
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,137 @@ a:hover {
122122
}
123123
}
124124
}
125+
126+
127+
/*
128+
Features
129+
========================================================================== */
130+
131+
.feature__wrapper {
132+
@include clearfix();
133+
margin-bottom: 2em;
134+
border-bottom: 1px solid $border-color;
135+
}
136+
137+
.feature__item {
138+
margin-bottom: 2em;
139+
140+
@include breakpoint($small) {
141+
text-align: center;
142+
@include gallery(4 of 12);
143+
144+
.feature__item-teaser {
145+
max-height: 200px;
146+
overflow: hidden;
147+
}
148+
}
149+
150+
.archive__item-title {
151+
margin-bottom: 0.5em;
152+
font-size: 30px;
153+
}
154+
155+
.archive__item-excerpt {
156+
margin-bottom: 1em;
157+
font-size: 18px;
158+
159+
p {
160+
font-size: 18px;
161+
}
162+
}
163+
164+
&--left {
165+
@include full();
166+
margin-bottom: 2em;
167+
168+
@include breakpoint($small) {
169+
.archive__item-teaser {
170+
@include span(5 of 12);
171+
}
172+
173+
.archive__item-body {
174+
@include span(7 of 12 last);
175+
@include prefix(0.5 of 12);
176+
@include suffix(1 of 12);
177+
}
178+
}
179+
180+
.archive__item-title {
181+
margin-bottom: 0.5em;
182+
font-size: 30px;
183+
}
184+
185+
.archive__item-excerpt {
186+
margin-bottom: 1em;
187+
font-size: 18px;
188+
189+
p {
190+
font-size: 18px;
191+
}
192+
}
193+
}
194+
195+
&--right {
196+
@include full();
197+
margin-bottom: 2em;
198+
@include breakpoint($small) {
199+
text-align: right;
200+
201+
.archive__item-teaser {
202+
@include span(5 of 12 rtl);
203+
}
204+
205+
.archive__item-body {
206+
@include span(7 of 12 last rtl);
207+
@include prefix(0.5 of 12);
208+
@include suffix(1 of 12);
209+
}
210+
}
211+
212+
.archive__item-title {
213+
margin-bottom: 0.5em;
214+
font-size: 30px;
215+
}
216+
217+
.archive__item-excerpt {
218+
margin-bottom: 1em;
219+
font-size: 18px;
220+
221+
p {
222+
font-size: 18px;
223+
}
224+
}
225+
}
226+
227+
&--center {
228+
@include full();
229+
margin-bottom: 2em;
230+
@include breakpoint($small) {
231+
text-align: center;
232+
233+
.archive__item-teaser {
234+
margin: 0 auto;
235+
width: span(5 of 12);
236+
}
237+
238+
.archive__item-body {
239+
margin: 0 auto;
240+
width: span(7 of 12);
241+
}
242+
}
243+
244+
.archive__item-title {
245+
margin-bottom: 0.5em;
246+
font-size: 30px;
247+
}
248+
249+
.archive__item-excerpt {
250+
margin-bottom: 1em;
251+
font-size: 18px;
252+
253+
p {
254+
font-size: 18px;
255+
}
256+
}
257+
}
258+
}

‎assets/_scss/_page.scss

+22-2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@
5555
}
5656
}
5757

58+
.page__lead {
59+
font-family: $sans-serif;
60+
font-size: 20px;
61+
}
62+
5863
.page__content {
5964
p, li {
6065
font-size: 16px;
@@ -76,14 +81,29 @@
7681
background-repeat: no-repeat;
7782
background-position: center;
7883

84+
.wrapper {
85+
padding-left: 2em;
86+
padding-right: 2em;
87+
}
88+
7989
.page__title,
80-
.page__meta {
90+
.page__meta,
91+
.page__lead,
92+
.btn {
8193
color: #fff;
8294
text-shadow: 1px 1px 4px rgba(#000, 0.5);
8395
}
8496

8597
.page__title {
86-
font-size: 64px;
98+
font-size: 48px;
99+
100+
@include breakpoint($small) {
101+
font-size: 60px;
102+
}
103+
}
104+
105+
.page__lead {
106+
font-weight: bold;
87107
}
88108
}
89109
}

‎assets/_scss/_splash.scss

-22
This file was deleted.

‎assets/_scss/main.scss

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
@import "page";
3131
@import "archive";
3232
@import "sidebar";
33-
@import "splash";
3433

3534
@import "vendor/font-awesome/font-awesome";
3635
@import "vendor/magnific-popup/magnific-popup";

‎assets/css/main.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎images/unsplash-image-11.jpg

-123 Bytes
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.