Custom Footer with Backlight Logo

This page uses a custom footer that includes social profile icons as well as the Backlight logo.
This is done with phplugins and custom css.
The footer employs the TTG Responsive Grid Framework to divide it into three columns. It also uses the "push" and "pull" classes to order the items differently on the desktop than on mobile devices. Custom css has been added to help format the footer on mobile devices.


/*Footer replacement*/

function ttg_footer_top( $style, $path) {

    echo '
    <div class="grid_12" id= "footer">

        <div class= "col_6 push_3 ">
        <p style="text-align:center;">All content ©1992-' . date("Y") . ' Rod Barbee. <br/>All rights reserved.</p>

        </div>

        <div class="social-media-profiles social-media col_3 push_3 clearfix"> 
            <ul>
                <li><a target="_blank" href="http://www.yoursite.com/blog/rss/" class="social_media fa fa-rss"></a></li>
                <li><a target="_blank" href="https://www.instagram.com/your-profile/" class="social_media fa fa-instagram"></a></li>
                <li><a target="_blank" href="https://www.facebook.com/your-profile/" class="social_media fa fa-facebook"></a></li>
                <li><a target="_blank" href="https://twitter.com/your-profile" class="social_media fa fa-twitter"></a></li>
            </ul>

        </div> <!-- #social-media-profiles -->

        <div class="col_3 ttg-logo pull_9">
        <ul>

            <li class="logomark clearfix backlight_logomark"><a href="http://theturninggate.net">
                <ul>
                    <li style="opacity:.85; top:75%; left:75%;"></li>
                    <li style="opacity:.40; top:75%; left:50%;"></li>
                    <li style="opacity:.40; top:50%; left:75%;"></li>
                    <li style="opacity:.55; top:75%; left:25%;"></li>
                    <li style="opacity:.55; top:25%; left:75%;"></li>
                    <li style="opacity:.55; top:50%; left:50%;"></li>
                    <li style="opacity:.70; top:50%; left:25%;"></li>
                    <li style="opacity:.70; top:75%; left: 0%;"></li>
                    <li style="opacity:.70; top:25%; left:50%;"></li>
                    <li style="opacity:.70; top: 0%; left:75%;"></li>
                    <li style="opacity:.85; top:50%; left: 0%;"></li>
                    <li style="opacity:.85; top: 0%; left:50%;"></li>
                    <li style="opacity:.98; top: 0%; left: 0%; width: 50%; height: 50%"></li>
                </ul>
                <h1><span>Built with</span><span>Backlight</span></h1></a>
            </li>
        </ul>

    </div>

    </div>
';  
    return false;
}

// END

And the css:


/*Custom footer with Pangolin social media code*/

 footer {
    background-color: white;
    border-top: 1px solid black;

}

 .social-media-profiles ul {
    float: right;
    margin: 0  auto 1.5rem;
    max-width: 115px;
    padding: 0;
    position: relative;    
}

 .social-media-profiles ul li {
    float: left;
    list-style-type: none;
    margin: 0px 4px 4px;
    padding: 2px 4px;
        background-color: #008000;
    border-radius: 6px
}

 .social-media-profiles a.social_media {
    text-decoration: none;
    color: white
}

#footer {
    padding: 12px 14px;
}

@media screen and ( max-width: 1023px ) {
    #footer {
        padding: 0 4px 12px;

    }
    #footer p {
        text-align: center;
    }
     .social-media-profiles ul {
        float: none;
    }   
}

/* Replace styling for Backlight logo 
in custom footer
=========================*/

#page__body .logomark h1 {
    font-size: 1.2em;
}

#page__body .backlight_logomark {
    float: left;
}

#page__body .backlight_logomark h1 span {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 18px;
}

#page__body .backlight_logomark h1 span:nth-child(2n) {
    font-size: 1rem;
}

@media screen and ( max-width: 991px ) {    

    #page__body .backlight_logomark {
    float: none;
    text-align: center;
    margin: 0 auto;
    width: 130px;
    display: block;
    }

    .ttg-logo {
    margin-bottom: 12px;
    padding-top: 8px;
    }

    .social-media-profiles ul {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    #footer {
        padding-top: 8px;
        }   
}