KevinK.dev.js/src/_mixins.scss

@import "./variables";

@mixin flexList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@mixin cardGeneric {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
        color 0.25s;
    color: $textColor;
    text-decoration: none;
    margin: 20px;
    background: $background;

    &:hover,
    &:active,
    &:focus {
        transform: scale(1.05);
        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
            -1px 11px 33px -10px rgba($accentColor, 0.75);
    }

    @media (prefers-color-scheme: light) {
        box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);

        background: $lightBackground;
        color: $lightTextColor;

        &:hover,
        &:active,
        &:focus {
            transform: scale(1.05);
            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
                -1px 11px 33px -10px rgba($accentColor, 0.75);
        }
    }
}

@mixin buttonBasic {
    display: flex;
    padding: 10px;
    text-align: center;
    background: $accentColor;
    color: white;
    text-decoration: none;
    box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
    transition: box-shadow 0.25s;
    align-items: center;
    justify-content: center;
    
    svg {
        margin-left: 10px;
    }

    &:hover,
    &:active,
    &:hover {
        box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
    }
}

@mixin button {
    @include buttonBasic;
    border-radius: 5px;
}

@mixin homeBanner {
    background: lighten($background, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s, color 0.25s;

    @media (prefers-color-scheme: light) {
        background: darken($accentColor, 1);
    }

    > div {
        display: flex;
        height: 100%;
        padding: 20px !important;
        line-height: 50px;
        font-size: 1.7em;
        color: white;

        > span {
            margin-left: auto;
            margin-right: auto;
        }

        > i {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}