lightspeeddevelopment/lsx-customizer

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

Summary

Maintainability
Test Coverage
article.page {
    .page-template-template-no-sidebar &,
    .page-template-default:not(.has-sidebar) & {
        @include media(">=tablet") {
            margin: 0 auto;
            width: 83.33333%;
        }

        @include media(">=desktop") {
            width: 66.66667%;
        }
    }
}
.edit-link {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/*    Template: Cover Template
/* -------------------------------------------------------------------------- */

.page-template-template-cover,
.post-template-template-cover {
    &.gutenberg-compatible-template.using-gutenberg.lsx-page-title,
    &.banner-disabled.single {
        #primary,
        #primary.content-area {
            margin-top: 0;
        }
    }
    #primary {
        margin-top: 0;
    }
    &.mobile-header-hamburger {
        #masthead {
            background-color: transparent;

            &.masthead-open {
                background-color: #374750;
            }
            .primary-navbar {
                > .nav {
                    background-color: transparent;
                }
            }
        }
    }
    &.mobile-header-navigation-bar {
        @include media(">=desktop-wide") {
            #masthead {
                background-color: transparent;
                .primary-navbar {
                    > .nav {
                        background-color: transparent;
                    }
                }
            }
        }
    }
    #masthead {
        margin-bottom: -80px;
        z-index: 9;
        box-shadow: none;
        &.scroll-to-fixed-fixed {
            position: relative !important;
        }
        #searchform {
            .search-submit {
                color: white;
            }
        }
        .primary-navbar {
            border: none;
            > .nav {
                .menu-item {
                    > a,
                    &.active > a {
                        @include media(">=desktop") {
                            color: white;
                        }
                    }
                }
            }
        }
    }
    &.mobile-header-hamburger {
        #masthead {
            .wrapper-toggle {
                background-color: transparent;
                .navbar-toggle {
                    background-color: transparent;
                    > .icon-bar {
                        background-color: white;
                    }
                }
            }
        }
    }
    .breadcrumbs-container,
    #top-menu {
        display: none;
    }
    .cover-header {
        display: flex;
        overflow: hidden;
        @include media("<tablet") {
            margin-right: -15px;
            margin-left: -15px;
        }
        &.bg-image {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        &.bg-attachment-fixed {
            background-attachment: fixed;
        }
        .cover-header-inner-wrapper {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-end;
            width: 100%;
            min-height: calc(100vh - 2rem);
            .cover-header-inner {
                padding: 10rem 0 5rem 0;
                @include media("<=tablet") {
                    padding: 10rem 0 13rem 0;
                }
                width: 100%;
                .cover-color-overlay,
                .cover-color-overlay::before {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    top: 0;
                }
                .cover-color-overlay::before {
                    background: currentColor;
                    content: "";
                    display: block;
                }
                .the-excerpt-wrapper {
                    font-size: 28px;
                    padding-left: 5rem;
                    padding-right: 5rem;
                    a {
                        text-decoration: underline;
                    }
                }
                .to-the-content-wrapper {
                    .to-the-content {
                        display: inline-block;
                        padding: 2rem;
                        i {
                            font-size: 35px;
                            transition: transform 0.1s linear;
                        }
                        &:hover {
                            i {
                                transform: scale(1.1);
                            }
                        }
                    }
                }
            }
        }
    }
    #main {
        .entry-header {
            background: transparent;
            padding: 0;
            position: relative;
            width: 100%;
            * {
                color: white;
            }
            .entry-categories-inner {
                a {
                    font-size: 15px;
                    text-transform: uppercase;
                    text-decoration: underline;
                    margin: 0 5px;
                    @include media("<custom") {
                        font-size: 13px;
                    }
                }
            }
            .entry-title {
                font-size: 56px;
                padding-left: 5rem;
                padding-right: 5rem;
            }
            .intro-text {
                * {
                    font-size: 28px;
                    padding-left: 5rem;
                    padding-right: 5rem;
                    @include media("<custom") {
                        font-size: 18px;
                    }
                }
                a {
                    text-decoration: underline;
                }
                .lsx-postnav-wrapper {
                    display: none;
                }
            }
            .moretag {
                display: none;
            }
        }
    }

    #primary {
        .entry-categories-inner {
            a {
                &:hover {
                    color: nth($blue, 1);
                }
            }
        }
        .entry-meta {
            .post-meta {
                .vcard {
                    &:before {
                        content: "\f007";
                        font-family: FontAwesome;
                        margin-right: 10px;
                    }
                    margin-right: $lsx-gap;
                    &:hover,
                    &:hover * {
                        color: nth($blue, 1);
                    }
                }
                .post-meta-time {
                    &:before {
                        content: "\f073";
                        font-family: FontAwesome;
                        margin-right: 10px;
                    }
                    &:hover,
                    &:hover * {
                        color: nth($blue, 1);
                    }
                }
            }
        }
    }
}

body:not(.logged-in) {
    &.page-template-template-cover,
    &.post-template-template-cover {
        .cover-header {
            .cover-header-inner-wrapper {
                min-height: 100vh;
            }
        }
    }
}

body.template-cover .entry-header {
    background: transparent;
    padding: 0;
}

.cover-header h1,
.cover-header h2,
.cover-header h3,
.cover-header h4,
.cover-header h5,
.cover-header h6,
.cover-header .faux-heading {
    color: inherit;
}

.cover-header .entry-header a {
    color: inherit;
}