related posts through YARPP

assets/_src/less/ascribe/_blog.less

@@ -1,4 +1,11 @@
 
+.blog-column {
+    margin-bottom: -80px;
+    background: #fff;
+    position: relative;
+    z-index: 5;
+}
+
 .hentry {
     &:extend(.subtemplate);
     border-bottom: 2px solid @blueLight;
@@ -44,6 +51,7 @@
         border-radius: 50%;
         vertical-align: middle;
         display: inline-block;
+        margin: 0;
         margin-right: (@spacer / 4);
         border: 1px solid #CFEEF3;
     }
@@ -93,6 +101,31 @@
 }
 
 
+//
+// Related Posts
+//
+.yarpp-related { margin: 0 !important; }
+
+.related {
+    padding-top: (@spacer / 2);
+
+    .featured__title {
+        &:extend(.bold);
+        font-size: @font-size-h6;
+    }
+
+    a { display: block; }
+
+    .grid { margin-bottom: 0; }
+}
+
+.related__title {
+    &:extend(.h3, .text-center);
+    margin-bottom: 0;
+    padding-bottom: @spacer;
+}
+
+
 //
 // Art Radar MailChimp Signup
 //

assets/_src/less/ascribe/_grid.less

@@ -169,6 +169,32 @@
     > .grid__col { flex: 0 0 82.5%; }
 }
 
+@media (@screen-xs) {
+    .grid-mini--fit {
+        > .grid__col { flex: 1; }
+    }
+    .grid-mini--full{
+        > .grid__col { flex: 0 0 100%; }
+    }
+    .grid-mini--1of6 {
+        > .grid__col { flex: 0 0 16.5%; }
+    }
+    .grid-mini--2of6,
+    .grid-mini--third {
+        > .grid__col { flex: 0 0 33%; }
+    }
+    .grid-mini--3of6,
+    .grid-mini--half {
+        > .grid__col { flex: 0 0 50%; }
+    }
+    .grid-mini--4of6 {
+        > .grid__col { flex: 0 0 66%; }
+    }
+    .grid-mini--5of6 {
+        > .grid__col { flex: 0 0 82.5%; }
+    }
+}
+
 @media (@screen-sm) {
     .grid-small--fit {
         > .grid__col { flex: 1; }

assets/_src/less/ascribe/_share.less

@@ -2,6 +2,7 @@
 // Share area
 //
 .entry-share {
+    &:extend(.text-center);
     margin: @spacer 0;
     padding: (@spacer / 2);
     border-top: 2px solid @blueLight;

assets/_src/less/ascribe/_variables.less

@@ -81,6 +81,7 @@
 @screen-md-min:       900px;
 @screen-lg-min:       1100px;
 
+@screen-xs:           ~'min-width: @{screen-xs-min}';
 @screen-sm:           ~'min-width: @{screen-sm-min}';
 @screen-md:           ~'min-width: @{screen-md-min}';
 @screen-lg:           ~'min-width: @{screen-lg-min}';

content-blog.php

@@ -71,6 +71,9 @@ $teaser  = get_the_post_thumbnail($post->ID, 'blog-teaser');
 
     <?php if ( is_singular() ) {
         get_template_part( 'partials/share' );
+
+        if( function_exists('related_posts') )
+            related_posts();
     } ?>
 
 </article>

controller/classes/Subtemplate.php

@@ -405,7 +405,7 @@ class Subtemplate {
 
         $result = "<section class='subtemplate row subtemplate--featured'>
                         <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
-                        <div class='grid grid--gutters grid--half grid-small--fit'>
+                        <div class='grid grid--gutters grid--full grid-mini--half grid-small--fit'>
                             {$blogFeatures}
                         </div>
                         <p class='subtemplate--featured--more'><a class='button small white-blue' href='{$blogUrl}'>Go to Blog</a></p>

functions/core.php

@@ -15,7 +15,7 @@ function ascribe_setup() {
     // Blog teaser images, cropped to 720px x 420px
     add_image_size( 'blog-teaser', 720, 420, true );
 
-    add_image_size( 'blog-feature-crop', 300, 175, true ); //(cropped)
+    add_image_size( 'blog-feature-crop', 400, 230, true ); //(cropped)
 
     // Add default posts and comments RSS feed links to head.
     add_theme_support( 'automatic-feed-links' );

yarpp-template-ascribe.php

@@ -0,0 +1,27 @@
+<?php
+/*
+YARPP Template: ascribe Blog
+*/
+
+if ( have_posts() ): ?>
+
+    <section class="related">
+        <h1 class="related__title">Related</h1>
+        <div class="grid grid--gutters grid--full grid-mini--half grid-small--third">
+
+    	<?php while ( have_posts()) : the_post(); ?>
+    		<?php if (has_post_thumbnail()):?>
+                <div class="grid__col">
+                    <a href="<?php the_permalink() ?>">
+                        <article class="featured">
+                            <?php the_post_thumbnail('blog-feature-crop'); ?>
+                            <h1 class="featured__title"><?php the_title() ?></h1>
+                        </article>
+                    </a>
+                </div>
+    		<?php endif; ?>
+    	<?php endwhile; ?>
+        </div>
+    </section>
+
+<?php endif; ?>