fix the blog

archive.php

@@ -1,9 +1,9 @@
 <?php
     get_header();
     get_template_part( 'template', 'blogheader' );
-echo '<div class="centered-content-padding">';
+
-echo '<div class="column-container">';
+    echo '<div class="blog-column row row--content">';
-echo '<div class="blog-column">';
+
     if ( have_posts() ) {
         while ( have_posts() ) {
             the_post();
@@ -17,9 +17,6 @@ else {
     }
 
     echo '</div>';
-//get_sidebar('blog');
 
-echo '</div>';
-echo '</div>';
     get_footer();
 ?>

assets/less/ascribe.less

@@ -27,27 +27,29 @@
 @import 'ascribe/_subtemplates.less';
 @import 'ascribe/_feature-circles.less';
 @import 'ascribe/_team.less';
+@import 'ascribe/_blog.less';
 
 @import 'vendor/print.less';
 
 // HEADER
 @chevronOffsetHeader: 60px;
-header {
+
-    overflow: hidden;
+.header + .chevron-divider {
-    padding-bottom: 50px;
-}
-header + .chevron-divider {
     height: 175px;
 }
 
-.page-template-template-companywhite header,
+.header {
-.page-template-template-general header,
+    overflow: hidden;
-.page-template-default header,
+    padding-bottom: 50px;
-.blog header,
+
-.single-career header,
+    .page-template-template-companywhite &,
-.error404 header,
+    .page-template-template-general &,
-.archive header,
+    .page-template-default &,
-.single-post header {
+    .blog &,
+    .single-career &,
+    .error404 &,
+    .archive &,
+    .single-post & {
 
         .logo {
             margin-top: 30px;
@@ -62,6 +64,7 @@ header + .chevron-divider {
             top: 20px;
 
             ul {
+                &:extend(.list-unstyled all, .small);
                 li {
                     display: inline-block;
                     border: 1px solid #b8b9b9;
@@ -128,103 +131,10 @@ header + .chevron-divider {
             }
         }
     }
-.blog header, .archive header, .single-post header {
-    &:extend(.blueGradient);
-    padding-bottom:0;
-
-    nav {
-
-        ul {
-            li {
-                border: 1px solid fade(@white,30);
-
-                a {
-                    color: @white;
 }
 
-                &:hover {
-                    background-color: fade(@white,30);
-                    border: 1px solid fade(@white,30);
 
-                    a {
-                        color: @white;
-                    }
-                }
-            }
-        }
-    }
 
-    .chevron-divider {
-        position: absolute;
-        top: 110px;
-        z-index: 1;
-    }
-    h1 {
-        color: @white;
-        font-size: 54px;
-        position: relative;
-        z-index: 2;
-        margin-top: 100px;
-        margin-bottom: 50px;
-        text-align: center;
-        a {
-            color: @white;
-
-            &:hover {
-                color: @pink;
-            }
-        }
-    }
-    .app-links {
-        color: @white;
-        a {
-            color: @white;
-
-            &:hover {
-                color: @pink;
-            }
-        }
-    }
-    & + nav {
-        background-color: @blueBright;
-        border-top: 2px solid fade(@white,50);
-
-        ul {
-            display:table;
-            padding: 0 10px;
-            width: 100%;
-        }
-        li {
-            width: 20%;
-            display: table;
-            text-align: center;
-            vertical-align: middle;
-            padding: 0;
-            height: 88px;
-            float: left;
-
-            &:hover {
-                background-color: fade(@white,50);
-            }
-        }
-        a {
-            display: table-cell;
-            text-align: center;
-            font-size: 16px;
-            color: #fff;
-            height: 88px;
-            width: 100%;
-            vertical-align: middle;
-            padding: 0 10px;
-        }
-
-        @media screen and (max-width: 450px) {
-            li {
-                width: 50%;
-            }
-        }
-    }
-}
 .tour-switcher {
     .phone-and-up;
 }
@@ -1168,104 +1078,6 @@ header + .chevron-divider {
     }
 }
 
-// BLOG
-.blog .column-container {
-    width: calc(~"100% + 70px");
-
-}
-article.post {
-    padding-top: 40px;
-    padding-bottom: 50px;
-    border-bottom: 2px solid #e5e5e5;
-    h2 {
-        margin:0;
-        font-size: 12px;
-        &:extend(.fontLight);
-    }
-    .post-categories {
-        list-style: none;
-        font-size: 12px;
-        &:extend(.fontLight);
-    }
-    h1 {
-        margin-top:0;
-    }
-    .image {
-        width: 100%;
-        img {
-            display: block;
-            max-width: 100%;
-            width: 100%;
-        }
-    }
-
-    .meta {
-        .chevron-divider;
-        opacity: 1;
-        line-height: 75px;
-        height: 75px;
-        padding-left: 15px;
-        margin-bottom: 35px;
-        font-weight: 500;
-        font-size: 16px;
-    }
-}
-.blog-column {
-    .ttl-columns.columnTwoThirds;
-    padding-right: 70px;
-
-}
-.blog-sidebar {
-    .ttl-columns.column-3;
-    padding-right: 70px;
-    padding-top: 40px;
-
-    img {
-        display:block;
-        margin-bottom: 60px;
-    }
-
-    .sidebar-blog-features {
-        .copyText;
-
-        h1 {
-            font-size: 19px;
-            &:extend(.fontRegular);
-            color: @pink;
-            margin-bottom:0;
-        }
-        time {
-            font-size:18px;
-            display:block;
-            margin-bottom: 5px;
-        }
-        a {
-            color: @black;
-            &:hover {
-                opacity: .3;
-            }
-        }
-        .blog {
-            margin-bottom: 70px;
-
-            &:hover {
-                opacity: 0.3;
-            }
-        }
-    }
-
-    @media screen and (max-width: @middleWidth) {
-        width: 50%;
-        min-width: 260px;
-        display: block;
-        margin:0 auto;
-    }
-}
-.single-post {
-    .article-post {
-        border-bottom:0;
-    }
-}
 
 // ASCRIBE CHANGES
 .page-template-template-tour header .sticky.stuck {
@@ -1287,10 +1099,6 @@ article.post {
     text-align: center;
 }
 
-.blog-column {
-    width: auto;
-}
-
 h1 > a,
 .press-articles .press-article h1 a {
     color: #d8127d;

assets/less/ascribe/_blog.less

@@ -0,0 +1,144 @@
+
+.hentry {
+    &:extend(.subtemplate);
+    border-bottom: 2px solid @blueLight;
+}
+
+.entry-title {
+    margin-top: 0;
+}
+
+.entry-image {
+    width: 100%;
+
+    img {
+        display: block;
+        width: 100%;
+    }
+}
+
+.entry-content {
+
+}
+
+.entry-meta {
+    .chevron-divider;
+    opacity: 1;
+    line-height: 75px;
+    height: 75px;
+    padding-left: 15px;
+    margin-bottom: 35px;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+
+//
+// Categories list
+//
+.post-categories {
+    &:extend(.list-unstyled all, .small);
+    margin-bottom: (@line-height-small / 2);
+}
+
+
+//
+// Blog header
+//
+.header {
+    .blog &, .archive &, .single-post & {
+        &:extend(.blueGradient);
+        padding-bottom:0;
+
+        .menu-item {
+            border: 1px solid fade(@white,30);
+            transition: .2s ease-out;
+
+            a {
+                color: @white;
+            }
+
+            &:hover {
+                background-color: fade(@white,30);
+                border: 1px solid fade(@white,30);
+
+                a {
+                    color: @white;
+                }
+            }
+        }
+
+        .chevron-divider {
+            position: absolute;
+            top: 110px;
+            z-index: 1;
+        }
+        h1 {
+            color: @white;
+            font-size: 54px;
+            position: relative;
+            z-index: 2;
+            margin-top: 100px;
+            margin-bottom: 50px;
+            text-align: center;
+            a {
+                color: @white;
+
+                &:hover {
+                    color: @pink;
+                }
+            }
+        }
+        .app-links {
+            color: @white;
+            a {
+                color: @white;
+
+                &:hover {
+                    color: @pink;
+                }
+            }
+        }
+    }
+}
+
+.blog-categories {
+    background-color: @blueBright;
+    border-top: 2px solid fade(@white,50);
+
+    ul {
+        &:extend(.list-unstyled);
+        display: table;
+        padding: 0 10px;
+        width: 100%;
+    }
+    li {
+        width: 20%;
+        display: table;
+        text-align: center;
+        vertical-align: middle;
+        padding: 0;
+        height: 88px;
+        float: left;
+
+        &:hover {
+            background-color: fade(@white,50);
+        }
+    }
+    a {
+        display: table-cell;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        height: 88px;
+        width: 100%;
+        vertical-align: middle;
+        padding: 0 10px;
+    }
+
+    @media screen and (max-width: 450px) {
+        li {
+            width: 50%;
+        }
+    }
+}

assets/less/ascribe/_branding.less

@@ -148,13 +148,6 @@ a {
     }
 }
 
-hr {
-    border: 0;
-    height: 2px;
-    background: @greyHr;
-    margin: 40px 0;
-}
-
 .blueGradient {
     background-color: @blueBright;
     background: linear-gradient(to bottom,  rgba(81,156,173,1) 0%,rgba(103,196,218,1) 100%); /* W3C */

assets/less/ascribe/_buttons.less

@@ -77,23 +77,8 @@
     }
 
     &.small {
-        &:extend(.fontLight);
         padding: (@spacer / 4) (@spacer / 2);
         font-size: @font-size-small;
-        color: @white;
-        background-color: transparent;
-        border-color: @white;
         min-width: 0;
-
-        &:hover,
-        &:focus {
-            background-color: fade(@white,40);
-            border-color: fade(@white,40);
-            color: @white;
-        }
-    }
-
-    @media screen and (max-width: @smallWidth) {
-        min-width: initial;
     }
 }

assets/less/ascribe/_footer.less

@@ -13,7 +13,7 @@
     a { color: @white; }
 
     .menu {
-        &:extend(.list-unstyled);
+        &:extend(.list-unstyled all);
     }
 
     .menu-item {
@@ -111,7 +111,7 @@
 // Social links
 //
 .footer__social {
-    &:extend(.list-unstyled);
+    &:extend(.list-unstyled all);
     margin-top: (@spacer/2);
 
     @media (@screen-sm) {

assets/less/ascribe/_hero.less

@@ -35,7 +35,7 @@
         .tourNavText;
 
         ul {
-            &:extend(.list-unstyled);
+            &:extend(.list-unstyled all);
             padding: 0 35px;
             position: absolute;
 

assets/less/ascribe/_typography.less

@@ -56,6 +56,7 @@ body {
 a {
     color: @link-color;
     text-decoration: none;
+    transition: .2s ease-out;
 
     &:hover,
     &:focus {
@@ -76,6 +77,7 @@ h1, h2, h3, h4, h5, h6,
     font-weight: @headings-font-weight;
     line-height: @headings-line-height;
     color: @headings-color;
+    margin-bottom: @line-height-base;
 
     // remove old style numerals
     font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
@@ -119,7 +121,7 @@ textarea {
 // Body text
 //
 p {
-    margin: 0 0 (@line-height-base / 2);
+    margin: 0 0 @line-height-base;
 }
 
 
@@ -172,12 +174,12 @@ em,
 // Unordered and Ordered lists
 ul,
 ol {
-    margin-top: (@line-height-base / 2);
+    margin-top: @line-height-base;
-    margin-bottom: (@line-height-base / 2);
+    margin-bottom: @line-height-base;
     padding-left: @line-height-base;
 
     li {
-        margin-bottom: (@line-height-base / 4);
+        margin-bottom: (@line-height-base / 2);
         padding-left: (@line-height-base / 2);
     }
     ul,
@@ -243,3 +245,11 @@ address {
     font-style: normal;
     line-height: @line-height-base;
 }
+
+
+hr {
+    border: 0;
+    height: 2px;
+    background: @blueLight;
+    margin: @spacer 0;
+}

content-blog.php

@@ -24,11 +24,14 @@ $url = get_the_permalink();
 
 ?>
 
-<article class="row row--content" <?php post_class(); ?>>
+<article <?php post_class( '', $post_id ); ?>>
-    <h2><?php echo get_the_category_list(); ?></h2>
-    <?php echo "<h1><a href='{$url}'>{$title}</a></h1>"  ?>
 
-    <div class="image">
+    <header>
+        <?php echo get_the_category_list(); ?>
+        <?php echo "<h1 class='entry-title'><a href='{$url}'>{$title}</a></h1>"  ?>
+    </header>
+
+    <div class="entry-image">
         <?php
         if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
 
@@ -38,17 +41,18 @@ $url = get_the_permalink();
         }
         ?>
     </div>
-    <div class="meta">
+
+    <div class="entry-meta">
         <?php echo get_avatar( get_the_author_email(), 'size here' ); ?>
         <span class="author">by <?php echo $full_name; ?></span>
         on <date><?php the_time( get_option( 'date_format' ) ); ?></date>
     </div>
 
-    <main class="entry">
+    <main class="entry-content">
         <?php
         if ( ! is_singular() ) {
             the_excerpt();
-            echo "<a href='{$url}'>Read More</a>";
+            echo "<a class='button small' href='{$url}'>Read More</a>";
         } else {
             the_content();
         }

home.php

@@ -1,9 +1,9 @@
 <?php
     get_header();
     get_template_part( 'template', 'blogheader' );
-echo '<div class="centered-content-padding">';
+
-echo '<div class="column-container">';
+    echo '<div class="blog-column row row--content">';
-echo '<div class="blog-column">';
+
     if ( have_posts() ) {
         while ( have_posts() ) {
             the_post();
@@ -18,11 +18,9 @@ else {
     ?>
     <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
     <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
+
     <?php
     echo '</div>';
-//get_sidebar('blog');
 
-echo '</div>';
-echo '</div>';
     get_footer();
 ?>

single-post.php

@@ -1,7 +1,9 @@
 <?php
     get_header();
     get_template_part( 'template', 'blogheader' );
-echo '<div class="centered-content-padding">';
+
+    echo '<div class="blog-column row row--content">';
+
     if ( have_posts() ) {
         while ( have_posts() ) {
             the_post();
@@ -15,5 +17,6 @@ else {
     }
 
     echo '</div>';
+    
     get_footer();
 ?>

template-blogheader.php

@@ -9,7 +9,7 @@
 require 'controller/init.php';
 
 ?>
-<header class="blog">
+<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');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>