WebJamApps/breakpointministries

View on GitHub
static/layout/_footer.scss

Summary

Maintainability
Test Coverage
.footer {
    background: white;

    display: grid;
    grid-column: 2 / end;
    padding: .25rem 1rem;

    @media only screen and (min-width: $bp-4k) {
        padding: 0.5rem 1rem;
    }

    @media only screen and (max-width: $bp-ipad-land) and (max-height: $bp-ipad-pro) {
        margin: auto 0;
    }

    @media only screen and (max-width: $bp-med) {
        grid-column: 1 / end;
    }

    @media only screen and (max-width: $bp-mobile-s) {
        padding: 0 1rem;
    }

    &__poweredBy {
        margin: .25rem 0;
        font-weight: $font-weight-med;
        color: rgba($color-black, .8);
        text-align: left;

        @media only screen and (max-width: $bp-med) {
            margin: inherit;
        }

        p {
            @media only screen and (min-width: $bp-4k) {
                font-size: 3rem;
            }

            @media only screen and (max-width: $bp-extra-sm) {
                @media only screen and (orientation: landscape) {
                    font-size: 1.56rem;
                }
              }
        }
    }

    & a {
        color: rgba($color-black, .7);
        text-decoration: none;
    }

    &__social-media {
        list-style: none;
        margin: auto .3rem;
        display: inline-flex;
        grid-column: 2 / end;
        justify-content: flex-end;
        @include socialMedia;
        
        @media only screen and (max-width: $bp-med) {
            margin: auto 0;
        }
    }
}