_github-cards.scss

$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";s

.gh-cards {
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;

    p {
        margin: 0;
    }

    a {
        text-decoration: none;
        color: #0366d6;

        &:hover {
            text-decoration: underline;
        }
    }

    h4 {
        font-size: 1.125rem;
        margin: 0;
    }

    .gh-card {
        display: inline-block;
        width: 400px;
        margin-bottom: 16px;
        margin-right: 16px;
        border-radius: 4px;
        box-shadow: 0 2px 4px #aaaaaa;
        padding: 12px;
        border: 1px solid #ddd;
        font-family: $font-family;

        h4 {
            font-family: $font-family;
        }

        .gh-card-desc {
            margin: 16px 0;
            min-height: 2.25rem;
        }

        .text-grey {
            color: #586069;
            fill: #586069;
        }

        svg {
            width: 14px;
            height: 16px;
            margin-right: 8px;
        }

    }

    .gh-card-info {
        display: block;
        font-size: 1rem;
        overflow: hidden;

        h4 {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    .gh-card-top {
        display: flex;
        justify-content: flex-start;
    }

    .gh-card-avatar {
        width:  75px;
        height: 75px;
        border-radius: 4px;
        margin-right: 8px;
    }

    .gh-card-details {
        margin-top: 8px;
    }

    .gh-card-lang {
        margin: 0;
        flex-grow: 1;
        text-align: right;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
    }

    .gh-card-bottom {
        padding-top: 8px;
        border-top: 1px solid #ccc;
        display:flex;
        align-items: flex-start;

        p {
            display:flex;
            margin-right: 8px;
        }
    }

    .gh-card-license {
        @extend .gh-card-lang;
    }
}