lightspeeddevelopment/lsx-customizer

.single-post {
    article.post {
        margin: 0 auto;
        max-width: 850px;
        @include media('<phone') {
            padding: 0 25px;
        }
        .archive-title {
            font-size: 30px;
            letter-spacing: 1px;
            line-height: 1.2;
            margin-top: $lsx-gap / 2;
            margin-bottom: 5px;
            text-align: center;

            & > .fa { display: none; }
        }

        .entry-meta {
            margin-top: 20px;
            .post-meta {
                display: block;
                font-size: 13px;
                position: relative;
                text-align: center;

                //&.post-meta-top { margin-top: $lsx-large-gap; }
            }

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

        .entry-content { margin-top: $lsx-gap; }

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

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

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

    .post-navigation {
        .nav-links {
            margin-left: -15px;
            margin-right: -15px;
            margin-top: 2.4rem;
            @include media('<phone') {
                margin-left: 0;
                margin-right: 0;
            }
            .previous,
            .next {
                @include media('<phone') {
                    @include make-xs-column(12);
                }

                & > a {
                    &:before {
                        @include fa-icon();

                        font-size: 5.5rem;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }

            .previous {
                text-align: left;

                & > a {
                    padding-left: 4.5rem;

                    &:before {
                        content: $fa-var-angle-left;
                        left: 15px;
                    }
                }
            }

            .next {
                text-align: right;

                & > a {
                    padding-right: 4.5rem;

                    &:before {
                        content: $fa-var-angle-right;
                        right: 15px;
                    }
                }
            }

            a {
                & > p,
                & > h3 {
                    margin-bottom: 0;
                }

                & > p {
                    font-size: 13px;
                    line-height: 2;
                }

                & > h3 {
                    font-size: 20px;
                    line-height: 1.35;
                }
            }
        }
    }

    &.page-has-banner {
        article.post {
            .entry-meta {
                .post-meta-top { margin-top: calc(-#{$lsx-large-gap} + 42.5px + 30px); }
            }
        }
    }
}

.gutenberg-compatible-template.using-gutenberg:not(.has-block-banner):not(.has-block-media-text):not(.has-block-cover) {
    .entry-content {
        padding-top: $lsx-gap;
    }
}