Merge pull request #48 from ascribe/feature/blogcleanup

New goodies for the blog

assets/_src/less/ascribe.less

@@ -19,6 +19,7 @@
 @import 'ascribe/_helpers.less';
 @import 'ascribe/_buttons.less';
 @import 'ascribe/_media.less';
+@import 'ascribe/_forms.less';
 
 @import 'ascribe/_grid.less';
 @import 'ascribe/_footer.less';
@@ -32,6 +33,7 @@
 @import 'ascribe/_blog.less';
 @import 'ascribe/_testimonials.less';
 @import 'ascribe/_faq.less';
+@import 'ascribe/_share.less';
 
 @import '_page-api.less';
 
@@ -412,36 +414,12 @@
         &:extend(.list-unstyled all);
     }
 }
-.contact {
-    label {
-        &:extend(.small);
 
-        &.required {
-            &:after {
-                content: '*';
-                color: @pink;
-            }
-        }
-    }
-    input, textarea {
-        margin-bottom: 20px;
-        padding: 10px;
-        color: @greyText;
-        width: 80%;
-        margin-top: 5px;
-        border: 1px solid @greyHr;
-        outline: none;
-
-        &[aria-invalid=true] {
-            border: 1px solid @pink;
-        }
-    }
-    input[type=submit] {
-        &:extend(.button, .button.blue);
-        width: auto;
-    }
-    .contact-point {
 
+//
+// Contact
+//
+.contact-point {
     h1 {
         &:extend(.fontRegular);
         font-size: 19px;
@@ -449,26 +427,9 @@
         text-align: left;
         margin-bottom:0;
     }
-    }
-    .required-info {
-        .copyTextSmall;
-        color: @pink;
-    }
-    .wpcf7-not-valid-tip {
-        .copyTextSmall;
-        color: @pink;
-        margin-top: -20px;
-        margin-bottom: 10px;
-    }
-    div.wpcf7-validation-errors {
-        border: none;
-        padding:0;
-        margin:0;
-    }
-    div.wpcf7-response-output, div.wpcf7-display-none, div.wpcf7-mail-sent-ok {
-        border: 0!important;
-    }
 }
+
+
 .press-articles {
     text-align: center;
 

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;
@@ -10,7 +17,7 @@
     margin-top: 0;
 }
 
-.entry-image {
+.entry-teaser {
     width: 100%;
 
     img {
@@ -19,6 +26,11 @@
     }
 }
 
+.entry-lead {
+    &:extend(.large);
+    margin-bottom: @spacer;
+}
+
 .entry-content {
 
 }
@@ -39,6 +51,7 @@
         border-radius: 50%;
         vertical-align: middle;
         display: inline-block;
+        margin: 0;
         margin-right: (@spacer / 4);
         border: 1px solid #CFEEF3;
     }
@@ -48,6 +61,30 @@
 //
 // WP Media
 //
+.wp-caption,
+.alignnone,
+.alignleft,
+.alignright {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    margin-bottom: (@spacer/2);
+}
+
+.alignright {
+    @media (@screen-sm) {
+        float: right;
+        margin: 5px 0 (@spacer/2) (@spacer/2);
+    }
+}
+
+.alignleft {
+    @media (@screen-sm) {
+        float: left;
+        margin: 5px (@spacer/2) (@spacer/4) 0;
+    }
+}
+
 .wp-caption-text {
     &:extend(.small);
     color: @greyHr;
@@ -64,6 +101,84 @@
 }
 
 
+//
+// 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
+//
+#mc-embedded-subscribe-form,
+#subForm {
+    position: relative;
+
+    .button,
+    button {
+        &:extend(.button.small all);
+        font-size: @font-size-base;
+        height: 46px;
+        border: 1px solid @greyHr;
+    }
+
+    // try to deal with the existing messy markup
+    #mce-EMAI,
+    #fieldEmail {
+        margin-bottom: 0;
+    }
+    .button,
+    button {
+        &:extend(.button all, .button.blue);
+        width: 100%;
+    }
+
+    @media (@screen-sm) {
+        #mce-EMAIL,
+        #fieldEmail {
+            width: 60%;
+        }
+        .button,
+        button {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 41%;
+        }
+    }
+}
+
+#subForm {
+    button {
+        margin-top: (@spacer/2);
+
+        @media (@screen-sm) {
+            top: 24px;
+            margin-top: 0;
+        }
+    }
+}
+
+
 //
 // Pagination
 //

assets/_src/less/ascribe/_forms.less

@@ -0,0 +1,57 @@
+label {
+    &:extend(.small);
+
+    &.required {
+        &:after {
+            content: '*';
+            color: @pink;
+        }
+    }
+}
+
+.form-control {
+    margin: 0 0 (@spacer / 2) 0;
+    padding: 10px;
+    color: @greyText;
+    width: 100%;
+    border: 1px solid @greyHr;
+    outline: none;
+
+    &[aria-invalid=true] {
+        border: 1px solid @pink;
+    }
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="range"],
+input[type="search"],
+textarea {
+    &:extend(.form-control all);
+}
+
+input[type=submit] {
+    &:extend(.button, .button.blue);
+    width: auto;
+}
+
+.required-info {
+    .copyTextSmall;
+    color: @pink;
+}
+
+.wpcf7-not-valid-tip {
+    .copyTextSmall;
+    color: @pink;
+    margin-top: -20px;
+    margin-bottom: 10px;
+}
+div.wpcf7-validation-errors {
+    border: none;
+    padding:0;
+    margin:0;
+}
+div.wpcf7-response-output, div.wpcf7-display-none, div.wpcf7-mail-sent-ok {
+    border: 0!important;
+}

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

@@ -0,0 +1,37 @@
+//
+// Share area
+//
+.entry-share {
+    &:extend(.text-center);
+    margin: @spacer 0;
+    padding: (@spacer / 2);
+    border-top: 2px solid @blueLight;
+    border-bottom: 2px solid @blueLight;
+    background:  @greyBg;
+
+    a {
+        text-decoration: none;
+        display: inline-block;
+        background: @greySocial;
+        border-radius: 5px;
+        margin: 0 (@spacer / 8);
+
+        &:hover,
+        &:focus {
+            background: fade(@greySocial, 40%);
+
+            #icon-twitter { fill: @brand-twitter; }
+            #icon-facebook { fill: @brand-facebook; }
+            #icon-linkedin { fill: @brand-linkedin; }
+        }
+    }
+
+    // icons
+    .icon {
+        width: 32px;
+        height: 32px;
+        transition: .2s ease-out;
+        fill: @white;
+        vertical-align: middle;
+    }
+}

assets/_src/less/ascribe/_variables.less

@@ -20,12 +20,17 @@
 @blackish:             #1e1e1e;
 @black:                #000;
 
+// social networks
+@brand-twitter:              #00aced;
+@brand-facebook:             #3b5998;
+@brand-linkedin:             #007bb5;
+
 
 //
 // Typography
 //
 @font-size-base:      18px;
-@font-size-small:     16px;
+@font-size-small:     15px;
 @font-size-mini:      13px;
 @font-size-large:     24px;
 
@@ -76,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

@@ -22,30 +22,35 @@ if (strlen($full_name) <= 0) {
 
 $url     = get_the_permalink();
 $avatar  = get_avatar( get_the_author_meta('ID'), 96 );
+$excerpt = get_the_excerpt();
+$teaser  = get_the_post_thumbnail($post->ID, 'blog-teaser');
 
 ?>
 
 <article <?php post_class( '', $post->ID ); ?>>
 
-    <header>
+    <header class="entry-header">
-        <?php echo get_the_category_list(); ?>
+        <?php
-        <?php echo "<h1 class='entry-title'><a href='{$url}'>{$title}</a></h1>"  ?>
+            echo get_the_category_list();
+            echo "<h1 class='entry-title'><a href='{$url}'>{$title}</a></h1>";
+
+            // Show custom post excerpt when set
+            if ( is_singular() && has_excerpt() ) {
+                echo "<div class='entry-lead'>{$excerpt}</div>";
+            }
+        ?>
     </header>
 
-    <div class="entry-image">
+    <?php if ( has_post_thumbnail() ) { ?>
-        <?php
+        <div class="entry-teaser">
-        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
+            <?php if ( is_singular() ) {
-
+                echo $teaser;
-            $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'blog-crop');
-
-            if ( is_singular() ) {
-                echo "<img src='{$thumb[0]}' alt='{$title} image'>";
             } else {
-                echo "<a href='{$url}'><img src='{$thumb[0]}' alt='{$title} image'></a>";
+                echo "<a href='{$url}'>{$teaser}</a>";
-            }
             }
             ?>
         </div>
+    <?php } ?>
 
     <div class="entry-meta">
         <?php echo $avatar; ?>
@@ -56,11 +61,19 @@ $avatar = get_avatar( get_the_author_meta('ID'), 96 );
     <main class="entry-content">
         <?php
         if ( ! is_singular() ) {
-            the_excerpt();
+            echo "<p>{$excerpt}</p>";
             echo "<a class='button small' href='{$url}'>Read More</a>";
         } else {
             the_content();
         }
         ?>
     </main>
+
+    <?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.php

@@ -3,12 +3,6 @@
 /**
  * ascribe functions and definitions
  *
- * When using a child theme (see http://codex.wordpress.org/Theme_Development and
- * http://codex.wordpress.org/Child_Themes), you can override certain functions
- * (those wrapped in a function_exists() call) by defining them first in your child theme's
- * functions.php file. The child theme's functions.php file is included before the parent
- * theme's file, so the child theme functions would be used.
- *
  * @package ascribe
  * @since 0.1.0
  */
@@ -21,29 +15,17 @@ define( 'WPTHEME_VERSION',      '0.1.0' );
 define( 'WPTHEME_URL',          get_stylesheet_directory_uri() );
 define( 'WPTHEME_TEMPLATE_URL', get_template_directory_uri() );
 define( 'WPTHEME_PATH',         get_template_directory() . '/' );
-define( 'WPTHEME_INC',          WPTHEME_PATH . 'includes/' );
+define( 'WPTHEME_INC',          WPTHEME_PATH . 'functions/' );
 
 // Include compartmentalized functions
 require_once WPTHEME_INC . 'core.php';
+require_once WPTHEME_INC . 'blog.php';
 require_once WPTHEME_INC . 'cpt-team.php';
 require_once WPTHEME_INC . 'cpt-career.php';
 require_once WPTHEME_INC . 'cpt-presscoverage.php';
 require_once WPTHEME_INC . 'cpt-event.php';
 require_once WPTHEME_INC . 'cpt-testimonial.php';
 
-// Run the setup functions
-TenUp\ascribe\Core\setup();
-
-
-// REMOVE WIDTH AND HEIGHT ATTRIBUTES ON THUMBNAILS
-add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
-add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
-
-function remove_thumbnail_dimensions( $html ) {
-    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
-    return $html;
-}
-
 //remove emoji script
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
@@ -64,13 +46,6 @@ if( function_exists('acf_add_options_page') ) {
     ));
 }
 
-//add excerpt to page
-function wpcodex_add_excerpt_support_for_pages() {
-    add_post_type_support( 'page', 'excerpt' );
-}
-add_action( 'init', 'wpcodex_add_excerpt_support_for_pages' );
-
-
 //Register Navigation
 function register_primary_nav_menu() {
     register_nav_menu('landing-menu',__( 'Product Tour Navigation Menu' ));
@@ -79,28 +54,6 @@ function register_primary_nav_menu() {
 }
 add_action( 'init', 'register_primary_nav_menu');
 
-// ADD THUMBNAILS TO POSTS
-add_theme_support( 'post-thumbnails' );
-
-
-// ENABLE HR IN WSYWIG
-function enable_more_buttons($buttons) {
-    $buttons[] = 'hr';
-
-    return $buttons;
-}
-add_filter("mce_buttons", "enable_more_buttons");
-
-
-
-// THUMBNAIL ADD CUSTOM SIZE
-add_action( 'after_setup_theme', 'ttl_image_setup' );
-function ttl_image_setup() {
-    add_image_size( 'blog-crop', 600, 350, true ); //(cropped)
-    add_image_size( 'blog-feature-crop', 300, 175, true ); //(cropped)
-}
-
-
 // ADD QUERY VAR FOR EVENT PAGINATION
 add_filter('query_vars', 'add_my_var');
 function add_my_var($public_query_vars) {

functions/blog.php

@@ -0,0 +1,41 @@
+<?php
+/*
+ *
+ * All the blog related custom functions
+ *
+ */
+
+/*
+ *
+ * Add some custom image sizes to editor
+ *
+ */
+function ascribe_blog_image_sizes( $sizes ) {
+    return array_merge( $sizes, array(
+        'blog-full-column' => __( 'Blog Full Column' ),
+    ) );
+}
+add_filter('image_size_names_choose', 'ascribe_blog_image_sizes');
+
+
+/*
+ *
+ * Put excerpt meta-box before editor
+ *
+ */
+function ascribe_move_excerpt_meta_box( $post ) {
+    if ( in_array( $post->post_type, array( 'post' ) ) ) {
+        remove_meta_box( 'postexcerpt', $post->post_type, 'normal' );
+        echo "<h2 style='padding: 10px 0 0;'>Excerpt</h2>";
+        post_excerpt_meta_box( $post );
+
+        echo "<style>
+                #excerpt { min-height: 90px }
+                #excerpt + p { display: none }
+
+              </style>";
+    }
+}
+add_action( 'edit_form_after_title', 'ascribe_move_excerpt_meta_box' );
+
+?>

functions/core.php

@@ -0,0 +1,58 @@
+<?php
+
+/*
+ *
+ * Theme setup
+ *
+ */
+function ascribe_setup() {
+    add_theme_support('post-thumbnails');
+    add_theme_support('html5', ['caption']);
+
+    // Full column content images for blog, 720px wide, auto height
+    add_image_size( 'blog-full-column', 720 );
+
+    // Blog teaser images, cropped to 720px x 420px
+    add_image_size( 'blog-teaser', 720, 420, true );
+
+    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' );
+}
+add_action('after_setup_theme', 'ascribe_setup');
+
+
+/*
+ *
+ * Theme Assets
+ *
+ */
+function ascribe_assets() {
+
+    // Styles
+    wp_enqueue_style(
+        'wptheme',
+        WPTHEME_URL . "/assets/dist/css/ascribe.min.css",
+        array(),
+        WPTHEME_VERSION
+    );
+
+    // Scripts
+    if (!is_admin()) {
+        wp_deregister_script('jquery');
+        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', false, '2.2.0', true);
+        wp_enqueue_script('jquery');
+    }
+
+    wp_enqueue_script(
+        'wptheme',
+        WPTHEME_TEMPLATE_URL . "/assets/dist/js/ascribe.min.js",
+        array('jquery'),
+        WPTHEME_VERSION,
+        true
+    );
+}
+add_action( 'wp_enqueue_scripts', 'ascribe_assets' );
+
+?>

includes/core.php

@@ -1,67 +0,0 @@
-<?php
-namespace TenUp\ascribe\Core;
-
-/**
- * Set up theme defaults and register supported WordPress features.
- *
- * @since 0.1.0
- *
- * @uses add_action()
- *
- * @return void.
- */
-function setup() {
-    $n = function( $function ) {
-        return __NAMESPACE__ . "\\$function";
-    };
-
-    add_action( 'wp_enqueue_scripts', $n( 'scripts' )     );
-    add_action( 'wp_enqueue_scripts', $n( 'styles' )      );
-
-}
-
-/**
- * Enqueue scripts for front-end.
- *
- * @uses wp_enqueue_script() to load front end scripts.
- *
- * @since 0.1.0
- *
- * @return void.
- */
-function scripts( $debug = false ) {
-
-    if (!is_admin()) {
-        wp_deregister_script('jquery');
-        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', false, '2.2.0', true);
-        wp_enqueue_script('jquery');
-    }
-
-    wp_enqueue_script(
-        'wptheme',
-        WPTHEME_TEMPLATE_URL . "/assets/dist/js/ascribe.min.js",
-        array('jquery'),
-        WPTHEME_VERSION,
-        true
-    );
-}
-
-/**
- * Enqueue styles for front-end.
- *
- * @uses wp_enqueue_style() to load front end styles.
- *
- * @since 0.1.0
- *
- * @return void.
- */
-function styles( $debug = false ) {
-    $min = ( $debug || defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
-
-    wp_enqueue_style(
-        'wptheme',
-        WPTHEME_URL . "/assets/dist/css/ascribe{$min}.css",
-        array(),
-        WPTHEME_VERSION
-    );
-}

partials/share.php

@@ -0,0 +1,37 @@
+<aside class="entry-share">
+
+    <?php
+        $title   = urlencode(get_the_title());
+        $url     = urlencode(get_the_permalink());
+        $twitter = get_field('twitter_url', 'option');
+    ?>
+
+    <a class="js-tracking-twitter-share" href="https://twitter.com/intent/tweet?text=<?php echo $title ?>&amp;url=<?php echo $url ?>&amp;via=ascribeio" title="Share on Twitter" rel="external nofollow" target="_blank">
+        <svg version="1.1" class="icon" id="icon-twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-109 111 36 36">
+        <path d="M-85.3,123.2c-0.6-0.7-1.5-1.1-2.5-1.1c-1.9,0-3.5,1.6-3.5,3.5c0,0.3,0,0.5,0.1,0.8
+            c-2.9-0.1-5.5-1.5-7.2-3.6c-0.3,0.5-0.5,1.1-0.5,1.8c0,1.2,0.6,2.3,1.6,2.9c-0.6,0-1.1-0.2-1.6-0.4l0,0c0,1.7,1.2,3.1,2.8,3.4
+            c-0.3,0.1-0.6,0.1-0.9,0.1c-0.2,0-0.4,0-0.7-0.1c0.4,1.4,1.7,2.4,3.3,2.4c-1.2,0.9-2.7,1.5-4.3,1.5c-0.3,0-0.6,0-0.8,0
+            c1.5,1,3.4,1.6,5.4,1.6c6.4,0,9.9-5.3,9.9-9.9c0-0.2,0-0.3,0-0.5c0.7-0.5,1.3-1.1,1.7-1.8c-0.6,0.3-1.3,0.5-2,0.6
+            c0.7-0.4,1.3-1.1,1.5-1.9C-83.8,122.7-84.5,123-85.3,123.2z"/>
+        </svg>
+    </a>
+
+    <a class="js-tracking-facebook-share" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo $url ?>&amp;p[title]=<?php echo $title ?>" rel="external nofollow" target="_blank">
+        <svg version="1.1" class="icon" id="icon-facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-109 111 36 36">
+        <path  d="M-87.6,122.6h1.5v-3c-0.3,0-1.1-0.1-2.3-0.1c-2.5,0-4.6,1.7-4.6,4.6v2.4h-3v3.1h2.9v8.9h4v-8.9h2.7
+            l0.4-3.1h-3.2v-2.1C-89.1,123.4-89,122.6-87.6,122.6z"/>
+        </svg>
+    </a>
+
+    <a class="js-tracking-linkedin-share" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo $url ?>" rel="external nofollow">
+        <svg version="1.1" class="icon" id="icon-linkedin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-109 111 36 36">
+        <g>
+            <rect x="-100" y="125.4" class="st1" width="3.9" height="12.5"/>
+            <path d="M-98,120c-1.3,0-2.1,0.8-2.1,1.9c0,1,0.8,1.9,2,1.9c1.3,0,2.1-0.8,2.1-1.9C-96,120.8-96.8,120-98,120z"/>
+            <path d="M-86.3,125.2c-2.1,0-3.4,1.2-3.9,2h-0.1l-0.2-1.7H-94c0.1,1.1,0.1,2.4,0.1,4v8.5h3.9v-7.2c0-0.4,0-0.7,0.1-1
+                c0.3-0.8,0.9-1.5,2-1.5c1.4,0,2,1.1,2,2.7v6.9h3.9h0.1v-7.3C-81.8,126.9-83.8,125.2-86.3,125.2z"/>
+        </g>
+        </svg>
+    </a>
+
+</aside>

template-blogheader.php

@@ -11,8 +11,19 @@ require 'controller/init.php';
 ?>
 <header class="header">
     <div class="row">
-        <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a>
+        <a href="<?php echo get_bloginfo('wpurl');?>">
-        <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
+            <img
+                src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png"
+                srcset="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png 1x, <?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white@2x.png 2x"
+                alt="ascribe logo"
+                class="logo phone-and-up">
+        </a>
+        <a href="<?php echo get_bloginfo('wpurl');?>">
+            <img
+                src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg"
+                alt="ascribe logo"
+                class="logo phone-only">
+        </a>
         <div class="app-links">
             <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
             <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
@@ -42,6 +53,8 @@ require 'controller/init.php';
             $args = array(
                 'hide_empty' => 0
             );
+            echo "<li><a href='{$blogUrl}'>All</a></li>";
+
             foreach((get_categories($args)) as $category) {
                 if ($category->cat_name != 'Uncategorized') {
                     echo '<li><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '><span>' . $category->name.'</span></a></li> ';

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; ?>