haysclark/gatsby-starter-casper

View on GitHub
src/components/PostShare/PostShare.css

Summary

Maintainability
Test Coverage
/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 3rem;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 1.8rem;
    display: inline-block;
    margin: 1rem 1.6rem 1.6rem 0;
    color: #bbc7cc;
    text-decoration: none;
}

.post-footer .share .icon-twitter:hover {
    color: #55acee;
}

.post-footer .share .icon-facebook:hover {
    color: #3b5998;
}

.post-footer .share .icon-pinterest:hover {
    color: #3b5998;
}

.post-footer .share .icon-google-plus:hover {
    color: #dd4b39;
}

/* ==========================================================================
   13. Media Queries - Smaller than 500px
   ========================================================================== */

@media only screen and (max-width: 500px) {
    .post-footer .share {
        position: static;
        width: auto;
    }

    .post-footer .share a {
        margin: 1.4rem 0.8rem 0;
    }
}