wp-theme/ascribe/assets/_src/less/ascribe/_blog.less

.blog-column {
    margin-bottom: -80px;
    background: #fff;
    position: relative;
    z-index: 5;
}

.hentry {
    &:extend(.subtemplate);
    border-bottom: 2px solid @blueLight;

    &:last-child { border: none }
}

.entry-title {
    margin-top: 0;
}

.entry-teaser {
    width: 100%;

    img {
        display: block;
        width: 100%;
    }
}

.entry-lead {
    &:extend(.large);
    margin-bottom: @spacer;
}

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

    .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
        margin: 0;
        margin-right: (@spacer / 4);
        border: 1px solid #CFEEF3;
    }
}


//
// 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;
    font-style: italic;
}


//
// Categories list
//
.post-categories {
    &:extend(.list-unstyled all, .small);
    margin-bottom: (@line-height-small / 2);
}


//
// 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
//
.pagination {
    background: @white;
    margin-top: (@spacer/2);
    padding-bottom: (@spacer/2);

    a {
        &:extend(.button all, .button.small);
    }
}

.pagination__next {
    &:extend(.text-right);
}


//
// Blog header
//
.blog-categories {
    background-color: @blueBright;
    border-top: 2px solid fade(@white,50);

    ul {
        &:extend(.list-unstyled all);
        display: table;
        padding: 0 10px;
        width: 100%;
    }
    li {
        width: 20%;
        display: table;
        text-align: center;
        vertical-align: middle;
        padding: 0;
        height: 88px;
        float: left;
        transition: .2s ease-out;

        &:hover,
        &:focus {
            background-color: fade(@white,50);
        }
    }
    a {
        &:extend(.text-center, .small);
        display: table-cell;
        color: @white;
        height: 88px;
        width: 100%;
        vertical-align: middle;
        padding: 0 10px;

        &:hover,
        &:focus {
            color: @blueMedium;
        }
    }

    @media screen and (max-width: 450px) {
        li {
            width: 50%;
        }
    }
}


//
// Featured Blog Posts
//
.subtemplate--featured {
    @media (@screen-sm) {
        .grid__col { flex: 33%; }
    }

    .grid__col > a { display: block; }
}

.subtemplate--featured--more {
    &:extend(.text-center);
    margin-bottom: 0;
}

.featured {
    position: relative;
    transition: .2s ease-out;

    a:hover &,
    a:focus & {
        transform: scale(1.01);
        box-shadow: 0 4px 8px fade(#000, 20%);
    }

    a:active & {
        top: 1px;
        transform: none;
        transition: none;
        box-shadow: none;
    }
}

.featured__title {
    &:extend(.h4);
    margin: 0;
    font-size: @font-size-base;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    background: fade(@blueDeep, 70%);
    padding: (@spacer / 4);
    transition: .2s ease-out;

    a:hover &,
    a:focus & { color: @link-color; }
}

.featured__image {
    max-height: 175px;
    display: block;
}