portfolio/src/components/molecules/Repository.module.scss

@import 'variables';

.repo {
    padding: $spacer;
    border-radius: $border-radius;
    background: rgba(#fff, 0.15);
    box-shadow: 0 3px 5px rgba($brand-main, 0.1),
        0 5px 16px rgba($brand-main, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    :global(.dark) & {
        background: darken($body-background-color--dark, 1%);
        box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.1),
            0 5px 16px rgba(darken($brand-main, 20%), 0.1);
    }

    > * {
        width: 100%;
    }

    p {
        font-size: $font-size-small;
    }

    p:last-child {
        margin: 0;
    }
}

.repoTitle {
    font-size: $font-size-h4;
    margin-bottom: $spacer / 2;
}

.meta {
    font-size: $font-size-small;
    align-self: flex-end;
    display: flex;
    justify-content: space-between;

    a {
        display: inline-block;
        color: $brand-grey-light;
        font-variant-numeric: lining-nums;

        &:hover,
        &:focus {
            color: $brand-cyan;
        }
    }

    svg {
        width: $font-size-small;
        height: $font-size-small;
        margin-right: $spacer / 12;
        margin-bottom: -($spacer / 12);
    }
}