haysclark/gatsby-starter-casper

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

Summary

Maintainability
Test Coverage
.author-profile {
    padding: 0 15px 5rem;
    border-bottom: #ebf2f6 1px solid;
    text-align: center;
}

/* Add a little circle in the middle of the border-bottom */
.author-profile::after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #e7eef2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #fff;
    border-radius: 100%;
    box-shadow: #fff 0 0 0 5px;
}

/* ==========================================================================
       Media Queries - Smaller than 900px
   ========================================================================== */

@media only screen and (max-width: 900px) {
    .author-profile {
        padding-bottom: 4rem;
    }
}

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

@media only screen and (max-width: 500px) {
    .author-profile {
        padding-bottom: 2rem;
    }
}