lightspeeddevelopment/lsx

View on GitHub
assets/css/scss/templates/_blog.scss

Summary

Maintainability
Test Coverage
.blog,
.archive,
.archive.category,
.search-results {
    &:not(.has-sidebar) {
        .site-main {
            @include media(">=tablet") {
                margin: 0 auto;
                width: 83.33333%;
            }

            @include media(">=desktop") {
                width: 100%;
            }
        }
        &.blog,
        &.archive.category,
        &.archive.tag {
            &:not(.lsx-body-full-width) {
                .site-main {
                    @include media(">=desktop") {
                        width: 66.66667%;
                    }
                }
            }
        }
    }
}

article.post,
article.page,
article.lsx-slot {
    .blog &,
    .archive &,
    .search-results &,
    .lsx-related-posts & {
        & + article.post,
        & + article.page,
        & + article.lsx-slot {
            margin-top: 30px;
        }

        .entry-layout {
            background-color: #fff;
            padding-bottom: 15px;

            & > .entry-image {
                @include media(">=phone") {
                    display: none;
                }
            }
        }

        .entry-header {
            position: relative;
        }

        .thumbnail {
            border: 0 none;
            border-radius: 0;
            display: block;
            margin-bottom: 0;
            overflow: hidden;
            padding: 0;
            position: relative;

            & > .attachment-responsive {
                border: 0;
                width: 100%;

                &.lazyload,
                &.lazyloading {
                    width: auto;
                }
            }
        }

        .entry-meta {
            padding: 15px 10px;
            @include media(">=desktop") {
                padding: 3rem 3rem 1rem;
            }

            .post-meta {
                display: block;
                font-size: 13px;
                position: relative;
                text-align: left;
            }

            .post-meta-avatar {
                border: 2px solid #fff;
                border-radius: 50%;
                height: 75px;
                left: 50%;
                overflow: hidden;
                position: absolute;
                top: -80px;
                transform: translateX(-50%);
                transition: border 300ms ease;
                width: 75px;
            }
        }
        .post-meta-categories {
            display: block;
            padding: 0 10px 20px;
            font-size: 13px;
            color: $small;
            @include media(">=desktop") {
                padding: 0rem 3rem 2rem;
            }
            a {
                color: $small;
            }
        }

        .entry-title {
            font-size: 22px;
            text-align: left;
            padding: 30px 10px 0;
            @include media(">=desktop") {
                padding: 3rem 3rem 0;
            }
            & .fa {
                display: none;
            }

            & .label-sticky {
                border-radius: 0;
                color: #fff;
                font-family: $font-family-base;
                font-size: $font-size-base;
                font-weight: 400;
                padding: 1rem;
                position: absolute;
                right: 1rem;
                top: 1rem;
                box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.15);
            }
        }

        .entry-summary {
            word-break: break-word;
            padding: 0 10px;
            @include media(">=desktop") {
                padding: 0 3rem;
            }
            p {
                margin-bottom: 15px;
                .moretag {
                    text-transform: uppercase;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .woocommerce {
                max-width: 100%;
            }
        }

        .entry-content {
            padding: 0 10rem;
            p {
                margin-bottom: 15px;
            }
        }

        .post-tags-wrapper {
            margin: 0 10px;
            font-style: italic;
            border-top: 2px solid #d8d8d8;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding-top: 14px;
            margin-top: 14px;
            padding-bottom: 2rem;
            margin-top: 0;
            @include media(">=desktop") {
                margin: 0 3rem;
            }
            .post-tags {
                display: block;
                font-size: 13px;
                //padding-top: 4px;
            }
            & > * {
                &:after {
                    @include fa-icon();

                    content: "|";
                    display: inline-block;
                    font-size: 20px;
                    margin: 0 5px;
                    vertical-align: middle;
                }
                &:last-child {
                    &:after {
                        content: "";
                    }
                }
            }
            & > .post-comments {
                &:before {
                    @include fa-icon();
                    content: "\f0e5";
                    display: inline-block;
                    font-size: 15px;
                    margin: 0;
                }
            }

            .post-meta-categories,
            .post-comments {
                display: inline;
                font-size: 13px;
                //padding-top: 4px;
            }
        }

        .post-tags {
            & > a {
                display: inline-block;
                margin-right: 5px;

                &:before {
                    content: "#";
                    display: inline-block;
                }

                &:last-child,
                &:only-child {
                    margin-right: 0;
                }
            }
        }

        .moretag {
            line-height: 1.33;
            text-transform: uppercase;
            &:after {
                @include fa-icon();

                content: $fa-var-long-arrow-right;
                display: inline-block;
                margin-left: 5px;
            }
        }
        .entry-title {
            margin-bottom: 10px;
        }
        &.has-thumb {
            .entry-meta {
                padding-top: 0;
            }
            .entry-title {
                margin-bottom: 10px;
            }
        }

        &.format-quote {
            .entry-title {
                display: none;
            }
        }
    }
}

.search-results {
    article.lsx-slot {
        &:not(.post),
        &.post.format-quote {
            .post-meta {
                & > .post-meta-avatar,
                & > .post-meta-author,
                & > .post-meta-time {
                    display: none;
                }
            }
        }

        &:not(.post) {
            .entry-meta {
                & > .post-meta.post-meta-top {
                    margin-top: 22.5px;
                }
            }
        }

        &.post.format-quote {
            .entry-meta {
                & > .post-meta.post-meta-top {
                    margin-top: 0;
                }
            }
        }
    }

    &.search .post-wrapper {
        padding-top: 14px;
    }

    &:not( .lsx-body-grid-layout ):not( .lsx-body-half-grid-layout ):not( .lsx-body-list-layout ):not( .lsx-search-enabled ) {
        #categories-slider {
            + .post-wrapper {
                margin-top: -6.3rem;
            }
        }
        .post-wrapper {
            align-items: flex-start;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-top: -30px;

            @include media('>=phone') {
                margin-left: -15px;
                margin-right: -15px;
            }

            & > .post,
            & > .page,
            & > .lsx-slot {
                margin-top: 0;
                margin-bottom: 30px;
                width: 100%;

                @include media('>=phone') {
                    padding-left: 15px;
                    padding-right: 15px;
                    width: 50%;
                }

                @include media('>=desktop') {
                    width: 33.33333%;
                }

                .entry-meta,
                .entry-title,
                .post-meta-categories,
                .entry-summary,
                .entry-content {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem;
                }
                .post-tags-wrapper {
                    margin-top: 0;
                    margin-left: 1.5rem;
                    margin-right: 1.5rem;
                    padding-bottom: 1.5rem;
                    display: flex;
                }
                .entry-title {
                    font-size: 22px;
                }
            }
        }
    }
}