propernaming/site/css/basic.scss

// this is the css that is shared on many pages
.text-center {
    text-align:center;
}

%border-shadow {
    box-shadow:5px 5px 10px #000000;
}

// most of the section > article uses this on the home page
.display-text {
    max-width: 70%;
    margin:0 0 0 15%;
    line-height: 1.875em;
    h1,h2,h3,h4,h5,h6,h7 {
        text-align:center;
    }
}

%article-shared {
    background-color:white;
    margin:2em;
    padding:1em;
    max-width:37%;
    @extend %border-shadow;
}

// most of the sections on the home page use this
.padding-above-and-below {
    padding:5em 0;
    .flex-no-wrap {
        display: -webkit-flex;
        display:flex;
        justify-content:center;
        flex-direction:row;
    }
    .flex {
        display: -webkit-flex;
        display:flex;
        justify-content:center;
        flex-flow:row wrap;
    }
    .narrow-article {
        @extend %article-shared;
        p {
            line-height:1.875em;
        }
    }
}

// for the mobile view
@media (max-width:800px) {
    .display-text {
        max-width: 100%;
        margin: 1em;
        line-height: 1.875em;
    }
    .narrow-article {
        max-width:75% !important;
    }

    .padding-above-and-below {
        padding:5em 0;
        .flex-no-wrap {
            display: -webkit-flex;
            display:flex;
            justify-content:center;
            flex-direction:column;
            img {
                align-self:center;
            }
        }

    }
}

// for the desktop view
@media (min-width:1500px) {
    .narrow-article {
        max-width:25% !important;
        padding:1em !important;
        margin:2em !important;
        background-color:white !important;
    }
}