godaddy-wordpress/go

View on GitHub
.dev/assets/shared/css/header/header__titles.scss

Summary

Maintainability
Test Coverage
/*! Header: Site Branding */
.header__titles {
    position: relative;

    & a {
        outline-offset: 6px;
    }

    & .custom-logo {
        max-width: var(--go-logo-mobile--max-width);

        @include media(small) {
            max-width: var(--go-logo--max-width);
        }
    }

    h1.custom-logo {
        display: flex;
        justify-content: center;
        margin: 0;
        max-width: none;

        > .custom-logo-link {
            display: flex;
        }
    }
}

.header .header__titles {
    flex: 1 0 100%;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    order: 2;
    text-align: center;

    @include media(large) {
        flex: auto;
        justify-content: start;
        text-align: left;
    }
}

.site-title {
    color: var(--go-site-title--color--text);
    font-display: swap;
    font-family: var(--go-site-title--font-family, var(--go-heading--font-family));
    font-size: var(--go-site-title--font-size);
    font-weight: var(--go-site-title--font-weight, var(--go-heading--font-weight));
    letter-spacing: var(--go-site-title--letter-spacing);
    line-height: 1.1;
    margin: 0;
    text-transform: var(--go-site-title--text-transform);
}

.site-description {
    color: var(--go-site-description--color--text, var(--go-heading--color--text));
    font-display: swap;
    font-family: var(--go-site-description--font-family, inherit);
    font-size: var(--go-site-description--font-size, inherit) !important;
    font-weight: var(--go-site-description--font-weight, 400);
    letter-spacing: var(--go-site-description--letter-spacing, 0);
    line-height: var(--go-site-description--color--text, 1.4) !important;
    margin-top: var(--go-site-description--margin-top, 0.25rem);
    opacity: var(--go-site-description--opacity, 0.65);
    text-transform: var(--go-site-description--text-transform, normal);

    @include media(large) {
        margin-left: var(--go-navigation--padding--x, 2vw);
        margin-top: 0;
    }
}

.custom-logo-link {
    &:focus {
        outline-offset: 6px;
    }

    ~ a .site-title {
        margin-left: var(--go-navigation--padding--x, 2vw);
    }
}