Create grid styling for related posts module

- Add default teaser image
- Disable image watch gulp task

_config.yml

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

_drafts/post-draft.md

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

_includes/archive-grid-single.html

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

_layouts/single.html

@@ -52,13 +52,13 @@ layout: default
 {% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
 {% if page.id and page.related and site.related_posts.size > 0 %}
   <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>
 {% endif %}

_posts/2016-02-24-welcome-to-jekyll.md

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

assets/scss/_archive.scss

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

assets/scss/_base.scss

@@ -119,6 +119,11 @@ a {
   &:active {
     outline: 0;
   }
+  &:hover {
+    img {
+      box-shadow: 0 0 10px rgba(#000, 0.25);
+    }
+  }
 }
 
 /* lists */
@@ -188,12 +193,6 @@ figure {
   }
   > a {
     display: block;
-    // image hover animation
-    &:hover {
-      img {
-        box-shadow: 0 0 10px rgba(#000, 0.20);
-      }
-    }
   }
   &.half {
     > a,
@@ -283,6 +282,6 @@ nav {
    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;
 }

assets/scss/_page.scss

@@ -99,6 +99,7 @@
 
 .page__meta {
   margin-top: 2em;
+  color: mix(#fff, $gray, 25%);
   font-family: $sans-serif;
   font-size: 14px;
   a {
@@ -141,21 +142,43 @@
   margin-top: 2em;
   padding-top: 1em;
   border-top: 1px solid $border-color;
+  @include clearfix();
+  float: left;
   @include breakpoint($medium) {
-    @include span(10 of 12);
     @include pre(2 of 12);
   }
   @include breakpoint($x-large) {
     @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 {
     text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
   }
 }
 

gulpfile.js

@@ -87,13 +87,12 @@ gulp.task('images', function () {
 /**
 *
 * 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/js/_*.js', ['jslint']);
   gulp.watch(['!assets/js/**/*_.js', 'assets/js/plugins/**/*.js', 'assets/js/vendor/**/*.js'], ['scripts']);
-  gulp.watch('images/*', ['images']);
 });