propernaming/site/css/main.scss

// This is the intro text on the home page
%title-text-shared {
    text-align: center;
    font-size: xxx-large;
    margin:0;
    font:28px normal;
}

#title-text {
    @extend %title-text-shared;
}

// this gives the main page some margin on the left and right.
// I may not be using this at all...
.padding-left-and-right {
    padding:0 1em;
}

%blue-button-shared {
    background-color: rgba(36, 44, 108, 1);
    border: solid transparent 0px;
    color:white;
    padding: 1em;
    cursor: pointer;
    box-shadow:5px 5px 10px #000000;
}

.blue-button {
    @extend %blue-button-shared;
}

.blue-button a {
    color:white;
    text-decoration:none;
}

@keyframes button-hover {
    from {
        box-shadow:5px 5px 10px #000000;
    }
    to {
        box-shadow:10px 10px 10px #000000, 2px 3px 5px rgba(36, 44, 108, 0.3) inset;
    }
}
.blue-button:hover {
    @extend %blue-button-shared;
    animation-name:button-hover;
    animation-duration:1s;
    animation-fill-mode: forwards;
}

.background-grey {
    background-color:grey;
}

.background-white {
    background-color:white
}

// this is needed for the articles in the classes section of the front page
img {
    max-width:100%;
}

.img-center {
    display:block;
    margin:auto;
}

.parallax {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text-white {
    color:white;
}

// this is for the laptop view
@media (min-width:800px){
    #title-text {
        @extend %title-text-shared;
        max-width:50%;
        padding-left: 25%;
    }
}

// for the mobile view
@media (max-width:800px) {
    #title-text {
        @extend %title-text-shared;
        max-width:50%;
        padding-left: 25%;
        font:35px normal;
    }
    h1,h2,h3,h4,h5,h6,h7 {
        text-align:center;
    }
    .hidden-mobile {
        display:none;
    }
    .flex {
        flex-direction:column;
        align-items:center;
    }
}