src/components/PostShare/PostShare.css
/* 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;
}
}