KevinK.dev.js/src/pages/projects.module.scss

@import "../variables";
@import "../mixins";

.projectList {
    @include flexList;
    margin: 15px 0;
}

.projectCard {
    @include cardGeneric;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 300px;
    flex-shrink: 0;

    .projectCardActivityIndicator {
        position: absolute;
        margin: 12px;
        padding: 2px 5px;
        border-radius: 3px;

        &.activityIndicatorGreen {
            background: #26de81;
        }

        &.activityIndicatorYellow {
            background: #f7b731;
        }

        &.activityIndicatorRed {
            background: #fc5c65;
        }

        &.activityIndicatorBlue {
            background: #45aaf2;
        }
    }

    .projectCardImage {
        width: 100%;
        height: 250px;
        background-position: center;
        background-size: cover;
        text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
        color: white;
    }

    .projectCardMeta {
        padding: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 10px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, black);
    }

    .projectCardTitle {
        display: block;
        font-size: 1.5em;
        margin-top: auto;
    }

    .projectCardCTA {
        display: block;
    }

    .projectCardCTA a {
        @include buttonBasic;
    }

    .projectCardCTAContainer {
        display: flex;
    }

    @media (max-width: 900px) {
        .projectCardCTAContainer {
            flex-direction: column;
        }

        .projectCardCTA:nth-child(2) {
            border-left: none;
        }
    }

    .projectCardCTAContainer > * {
        flex-grow: 1;
    }
}