Create grid styling for related posts module

- Add default teaser image
- Disable image watch gulp task
This commit is contained in:
Michael Rose 2016-03-18 15:07:02 -04:00
parent 17a6afcd35
commit eb2f3d052a
29 changed files with 86 additions and 26 deletions

View file

@ -15,6 +15,7 @@ url : "http://localhost:4000" # the base hostname & protoco
baseurl : "/minimal-mistakes" # the subpath of your site, e.g. /blog baseurl : "/minimal-mistakes" # the subpath of your site, e.g. /blog
email : "your-email@domain.com" email : "your-email@domain.com"
logo : "site-logo.png" logo : "site-logo.png"
teaser : "500x300.png"
breadcrumbs : true # true / false (default) breadcrumbs : true # true / false (default)
breadcrumb_home_label : "Home" breadcrumb_home_label : "Home"
breadcrumb_separator : "/" breadcrumb_separator : "/"

View file

@ -1,6 +1,8 @@
--- ---
layout: single layout: single
title: "Draft Post" title: "Draft Post"
header:
teaser: "unsplash-gallery-image-2-th.jpg"
categories: categories:
- Jekyll - Jekyll
tags: tags:

View file

@ -0,0 +1,25 @@
{% include base_path %}
{% if post.header.teaser %}
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
{% capture teaser %}{{ site.teaser }}{% endcapture %}
{% endif %}
<div class="grid__item">
<a href="{{ base_path }}{{ post.url }}">
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
<div class="archive__item-teaser">
<img src=
{% if teaser contains "http" %}
"{{ teaser }}"
{% else %}
"{{ teaser | prepend: "/images/" | prepend: base_path }}"
{% endif %}
alt="{{ page.title }}">
</div>
<h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</h2>
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
</article>
</a>
</div>

View file

@ -52,13 +52,13 @@ layout: default
{% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %} {% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
{% if page.id and page.related and site.related_posts.size > 0 %} {% if page.id and page.related and site.related_posts.size > 0 %}
<div class="page__related"> <div class="page__related">
{% if site.data.ui-text[site.locale].related_label %} {% if site.data.ui-text[site.locale].related_label %}
<h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label }}</h4> <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label }}</h4>
{% endif %} {% endif %}
<ul> <div class="grid__wrapper">
{% for post in site.related_posts limit:3 %} {% for post in site.related_posts limit:4 %}
<li><a href="{{ base_path }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li> {% include archive-grid-single.html %}
{% endfor %} {% endfor %}
</ul> </div>
</div> </div>
{% endif %} {% endif %}

View file

@ -1,5 +1,7 @@
--- ---
title: "Welcome to Jekyll!" title: "Welcome to Jekyll!"
header:
teaser: "http://wpthemetestdata.files.wordpress.com/2008/06/100_5540.jpg?w=604"
categories: categories:
- Jekyll - Jekyll
tags: tags:

File diff suppressed because one or more lines are too long

View file

@ -40,4 +40,13 @@
& + p { & + p {
text-indent: 0; text-indent: 0;
} }
}
a:hover {
.archive__item-teaser {
box-shadow: 0 0 10px rgba(#000, 0.25);
}
.archive__item-title {
text-decoration: underline;
}
} }

View file

@ -119,6 +119,11 @@ a {
&:active { &:active {
outline: 0; outline: 0;
} }
&:hover {
img {
box-shadow: 0 0 10px rgba(#000, 0.25);
}
}
} }
/* lists */ /* lists */
@ -188,12 +193,6 @@ figure {
} }
> a { > a {
display: block; display: block;
// image hover animation
&:hover {
img {
box-shadow: 0 0 10px rgba(#000, 0.20);
}
}
} }
&.half { &.half {
> a, > a,
@ -283,6 +282,6 @@ nav {
Global animation transition Global animation transition
========================================================================== */ ========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item, .archive__item-thumb, .archive__item-body, .palette__swatch { b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }

View file

@ -99,6 +99,7 @@
.page__meta { .page__meta {
margin-top: 2em; margin-top: 2em;
color: mix(#fff, $gray, 25%);
font-family: $sans-serif; font-family: $sans-serif;
font-size: 14px; font-size: 14px;
a { a {
@ -141,21 +142,43 @@
margin-top: 2em; margin-top: 2em;
padding-top: 1em; padding-top: 1em;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
@include clearfix();
float: left;
@include breakpoint($medium) { @include breakpoint($medium) {
@include span(10 of 12);
@include pre(2 of 12); @include pre(2 of 12);
} }
@include breakpoint($x-large) { @include breakpoint($x-large) {
@include pre(2.5 of 12); @include pre(2.5 of 12);
} }
li { .grid__item {
margin-bottom: 0; margin-bottom: 2em;
.archive__item-excerpt {
display: none;
}
.archive__item-teaser {
border-radius: $border-radius;
}
@include breakpoint($small) {
@include gallery(5 of 10);
.archive__item-teaser {
max-height: 200px;
overflow: hidden;
}
}
@include breakpoint($medium) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(2.5 of 10);
.archive__item-teaser {
max-height: 120px;
}
.archive__item-excerpt {
display: block;
}
}
} }
a { a {
text-decoration: none; text-decoration: none;
&:hover {
text-decoration: underline;
}
} }
} }

View file

@ -87,13 +87,12 @@ gulp.task('images', function () {
/** /**
* *
* Default task * Default task
* - Runs scss, scripts and image tasks * - Runs scss, scripts, and image tasks
* - Watches for scss, script, and image changes * - Watches for scss and script changes
* *
**/ **/
gulp.task('default', ['css', 'jslint', 'scripts', 'images'], function () { gulp.task('default', ['css', 'jslint', 'scripts'], function () {
gulp.watch('assets/scss/**/*.scss', ['css']); gulp.watch('assets/scss/**/*.scss', ['css']);
gulp.watch('assets/js/_*.js', ['jslint']); gulp.watch('assets/js/_*.js', ['jslint']);
gulp.watch(['!assets/js/**/*_.js', 'assets/js/plugins/**/*.js', 'assets/js/vendor/**/*.js'], ['scripts']); gulp.watch(['!assets/js/**/*_.js', 'assets/js/plugins/**/*.js', 'assets/js/vendor/**/*.js'], ['scripts']);
gulp.watch('images/*', ['images']);
}); });

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/500x300.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB