KevinK.dev.js/src/_globals.scss

@use "sass:map";

$layoutWidth: 1100px;
$layoutPadding: 20px;

$mainFont: "Encode SansVariable", sans-serif;

$theme: (
    "accent": #e52b3e,
    "background": #070707,
    "text": white,
    "red": #e52b3e,
    "orange": #e5752b,
    "green": #18bb20,
    "blue": #6d94e9,
    "purple": #886af5,
);

$theme-light: (
    "accent": #e52b3e,
    "background": white,
    "text": black,
    "red": #db1e31,
    "orange": #aa4f12,
    "green": #17681b,
    "blue": #2b66e5,
    "purple": #6848da,
);

$border: thin solid var(--color-border);
$textShadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
$textShadowAccent: 0 0 20px var(--color-accent-shadow);

$cardShadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
$cardHoverShadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
    -1px 11px 33px -10px var(--color-accent-shadow-hover);

$cardLightShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
$cardLightHoverShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
    -1px 11px 33px -10px var(--color-accent-shadow-hover);

$homeProfileShadow: -1px 11px 33px -10px var(--color-accent-shadow-profile);
$homeProfileClipFront: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
$homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);

$aboutCVShadow: 0 0 15px 0 var(--color-accent-shadow-profile);

@mixin vars {
    --color-accent: #{map.get($theme, "accent")};
    --color-accent-darker: #{darken(map.get($theme, "accent"), 5)};
    --color-accent-shadow: #{rgba(map.get($theme, "accent"), 0.15)};
    --color-accent-shadow-button: #{rgba(map.get($theme, "accent"), 0.5)};
    --color-accent-shadow-button-hover: #{rgba(map.get($theme, "accent"), 0.9)};
    --color-accent-shadow-hover: #{rgba(map.get($theme, "accent"), 0.75)};
    --color-accent-shadow-profile: #{rgba(map.get($theme, "accent"), 0.25)};
    --color-background: #{map.get($theme, "background")};
    --color-background-secondary: #{lighten(map.get($theme, "background"), 1)};
    --color-background-glass: #{rgba(map.get($theme, "background"), 0.9)};
    --color-background-transparent: #{rgba(map.get($theme, "background"), 0.95)};
    --color-background-seethru: #{rgba(map.get($theme, "background"), 0.35)};
    --color-background-extreme-seethru: #{rgba(
            map.get($theme, "background"),
            0.25
        )};
    --color-text: #{map.get($theme, "text")};
    --color-border: rgba(0, 0, 0, 0.25);
    --color-fake-link: #{map.get($theme, "blue")};

    --color-skill-1: #{map.get($theme, "red")};
    --color-skill-2: #{map.get($theme, "orange")};
    --color-skill-3: #{map.get($theme, "green")};
    --color-skill-4: #{map.get($theme, "blue")};
    --color-skill-5: #{map.get($theme, "purple")};

    --color-notice: #{rgba(map.get($theme, "accent"), 0.15)};

    --color-cv-edu: #{map.get($theme, "blue")};
    --color-cv-intern-apprentice: #{map.get($theme, "orange")};

    @media (prefers-color-scheme: light) {
        --color-background: #{map.get($theme-light, "background")};
        --color-background-secondary: #{darken(
                map.get($theme-light, "background"),
                1
            )};
        --color-background-glass: #{rgba(
                map.get($theme-light, "background"),
                0.9
            )};
        --color-background-transparent: #{rgba(
                map.get($theme-light, "background"),
                0.95
            )};
        --color-background-seethru: #{rgba(
                map.get($theme-light, "background"),
                0.35
            )};
        --color-background-extreme-seethru: #{rgba(
                map.get($theme-light, "background"),
                0.25
            )};
        --color-text: #{map.get($theme-light, "text")};
        --color-accent-shadow: #{rgba(map.get($theme, "accent"), 0.3)};
        --color-fake-link: #{map.get($theme-light, "blue")};

        --color-skill-1: #{map.get($theme-light, "red")};
        --color-skill-2: #{map.get($theme-light, "orange")};
        --color-skill-3: #{map.get($theme-light, "green")};
        --color-skill-4: #{map.get($theme-light, "blue")};
        --color-skill-5: #{map.get($theme-light, "purple")};

        --color-cv-edu: #{map.get($theme-light, "blue")};
        --color-cv-intern-apprentice: #{map.get($theme-light, "orange")};
    }
}

@mixin homeBg {
    background: linear-gradient(45deg, #000850 0%, #000320 100%),
        radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
        linear-gradient(225deg, #ff7a00 0%, #000000 100%),
        linear-gradient(
            135deg,
            #cdffeb 10%,
            #cdffeb 35%,
            #009f9d 35%,
            #009f9d 60%,
            #07456f 60%,
            #07456f 67%,
            #0f0a3c 67%,
            #0f0a3c 100%
        );
    background-blend-mode: screen, overlay, hard-light, normal;

   /*background: linear-gradient(to bottom, rgba(black, 0.35), transparent 70px),
        radial-gradient(circle at center, #00000063, transparent 600px),
        radial-gradient(
            circle at top right,
            #3e1a78 0,
            #5049cbe3 25%,
            #7bade382 45%,
            transparent 50%
        ),
        radial-gradient(
            circle at bottom left,
            #078d70 0,
            #26ceaae3 25%,
            #99e8c282 45%,
            transparent 75%
        ),
        linear-gradient(
            to bottom left,
            #3e1a78,
            #5049cb,
            #7bade3,
            #fff,
            #99e8c2,
            #26ceaa,
            #078d70
        );*/
}

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

@mixin cardGeneric {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: $cardShadow;
    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
        color 0.25s;
    color: var(--color-text);
    text-decoration: none;
    margin: 20px;
    background: var(--color-background);

    &:hover,
    &:active,
    &:focus {
        transform: scale(1.05);
        box-shadow: $cardHoverShadow;
    }

    @media (prefers-color-scheme: light) {
        box-shadow: $cardLightShadow;

        &:hover,
        &:active,
        &:focus {
            transform: scale(1.05);
            box-shadow: $cardLightHoverShadow;
        }
    }
}

@mixin buttonBasic {
    display: flex;
    padding: 10px;
    text-align: center;
    background: var(--color-accent-darker);
    color: white;
    text-decoration: none;
    box-shadow: 0 0 33px -10px var(--color-accent-shadow-button);
    transition: box-shadow 0.25s;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 10px black;

    @media (prefers-color-scheme: light) {
        background-color: var(--color-accent);
    }

    svg {
        margin-left: 10px;
    }

    &:hover,
    &:active,
    &:hover {
        box-shadow: 0 0 33px -10px var(--color-accent-shadow-button-hover);
    }
}

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

@mixin homeBanner {
    background: var(--color-background-secondary);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 0.25s, color 0.25s;

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

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

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