chemiker/sciolism-2019-for-wordpress

View on GitHub
src/sass/footer.scss

Summary

Maintainability
Test Coverage
/**
 * FOOTER
 */

nav#primaryNavigation ul li a,
nav#primaryNavigation ul li a:visited,
aside#sideNavigation ul li a,
aside#sideNavigation ul li a:visited
#copyright,
body>footer {
    color: $textColor;
}

body>footer h2 i,
#copyright {
    text-align: center;
}

body>footer h2 i {
    margin-right: $iconSpacer;
    width: $iconSpacer * 7;
    color: $darkGrey;
}

body>footer {
    display: flex;
    gap: $footerInnerSpacing * 2;
    flex-wrap: wrap;
    justify-content: center;
    padding: $footerInnerSpacing * 2 0;
    margin-top: #{$headerSpacer * 0.75 * 2};
    font-size: 0.9em;
    background-color: $grey;
    border-top: #{$headerSpacer * 0.2} solid $darkGrey;

    .dashicons-before:before,
    .dashicons {
        margin-right: $iconSpacer;
        width: $iconSpacer * 7;
        color: $darkGrey;
    }

    h2 {
        color: $darkerGrey;
        margin: 0 0 $footerInnerSpacing * 0.5 0;

        i {
            font-size: $smallerTextSize;
        }
    }

    nav#primaryNavigation,
    aside#sideNavigation,
    form {
        flex-basis: #{$siteWidth * 0.3};
    }

    nav#primaryNavigation,
    aside#sideNavigation {
        vertical-align: top;
        flex-grow: 0;

        ul {
            list-style-type: none;
            @include setMultiProperty(margin padding, 0);

            li {
                margin-left: 8 * $iconSpacer;

                a,
                a:visited {
                    margin: {
                        @include setMultiProperty(top bottom, $iconSpacer);
                    }
                    padding: $iconSpacer * 1.5;

                    &:hover {
                        text-decoration: underline;
                        color: $lightBlue;
                    }

                    &[aria-current="page"]:before {
                        display: inline-block;
                        font-family: $icon;
                        content: "\f345";
                        vertical-align: top;
                        font-size: $smallerTextSize;
                        margin-left: -15px;
                    }
                }


            }
        }
    }

    form {
        padding: 0 #{$headerSpacer * 0.1};
    }
}

#sidebar {
    max-width: #{$siteWidth * 0.3};
    overflow-y: auto;

    ul {
        margin: 0px;
    }

    li {
        list-style-type: none;
        padding: 0px;
    }
}

#copyright {
    font: {
        size: $smallerTextSize;
        family: $code;
    }
    background-color: $lightBlue;

    &,
    a,
    a:visited {
        color: #FFF;
    }

    a:hover {
        text-decoration: underline;
    }

    p {
        margin: 0;
        padding: $footerInnerSpacing;
    }
}