sarsooxyz.hugo/assets/scss/main.scss

:root {
    // --shadow-colour: #828282;
    --shadow-colour: #3f0aff;
}

@mixin shadowed {
    box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour);
    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);

    @media (prefers-reduced-motion: no-preference) { 
        transition: box-shadow, translate;
        transition-duration: var(--duration);
        transition-timing-function: ease-in-out;

        &:hover {
            box-shadow: 0px 0px 0px var(--shadow-colour);
            translate: none;
        }
    }
}

.shadowed {
    --shift: 8px;
    --duration: 0.2s;

    @include shadowed;
}


///////////////////////
//      AVATAR
///////////////////////

.avatar {

    img {
        --shift: 20px;
        --transition-time: 1s;

        border-style: solid;
        border-width: 7px;
        border-color: black;

        @media (prefers-reduced-motion: no-preference) { 
            animation: shift-avatar 3s ease-in-out infinite alternate backwards;

            @keyframes shift-avatar {
                from { 
                    filter: drop-shadow(0px 0px 0px var(--shadow-colour)); 
                    translate: none;
                }
                to {
                    filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
                    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
                }
            }
        }
    }

    @media (prefers-reduced-motion: no-preference) { 
        img:hover {
            filter: none;
            translate: none;
            // animation-play-state: paused;
        }
    }
}

@media only screen and (max-width: 768px) {
    .avatar img {
        --shift: 13px;
        border-width: 5px;
    }
}

///////////////////////
//     BOX LINK
///////////////////////

.box-link {
    --shift: 8px;
    --border-radius: 10px;

    position: relative;
    width: 100%; 
    height: 17rem;
    display: flex; 
    justify-content: center;

    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);

    @media (prefers-reduced-motion: no-preference) { 
        transition: translate;
        transition-duration: 0.25s;
        transition-timing-function: ease-in-out;

        animation: shift-image 0.3s backwards;
        @keyframes shift-image {
            from { translate: none; }
            to { translate: calc(var(--shift) * -1) calc(var(--shift) * -1); }
        }
    }

    span {
        border-radius: var(--border-radius);
        opacity: .5; 
        background-color: black; 
        position: absolute; 
        top: 0; left: 0; bottom: 0; right: 0; 
        z-index: 0; 
    }

    img {
        /* object-position:38% 50%;  */
        z-index: -1; 
        position: absolute; 
        top: 0; left: 0; bottom: 0; right: 0; 
        margin: 0; 
        padding: 0; 
        width: 100%; height: 100%; 
        overflow: hidden;
        object-fit: cover;
        border: 4px solid black;
        border-radius: var(--border-radius);
        box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour);

        @media (prefers-reduced-motion: no-preference) { 
            transition: box-shadow;
            transition-duration: 0.25s;
            transition-timing-function: ease-in-out;
            animation: shift-shadow 0.3s backwards;
            @keyframes shift-shadow {
                from { box-shadow: none; }
                to { box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour); }
            }
        }
    }

    @media (prefers-reduced-motion: no-preference) { 
        &:hover {
            translate: none;

            img {
                box-shadow: none;
            }
        }
    }

    .text-section {
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }

    p {
        color: white;
        text-align: center !important;
        text-shadow: 3px 3px 5px black;
        margin: 0;
    }

    .center-link-text {
        color: white;
        cursor: pointer;
        text-underline-offset: 3px;
        text-decoration-skip-ink: auto;
    }
}

///////////////////////
//   FOOTER LOGO
///////////////////////

.footer-logo {
    filter: contrast(100%);
    transition: filter 1s ease-in-out;
}

.footer-logo:hover {
    filter: contrast(0%) drop-shadow(7px 7px 5px grey);
}

///////////////////////
//    ART GRID
///////////////////////

.art-grid {
    --shift: 5px;
    --duration: 0.2s;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    & > figure > img {
        border: 5px solid black;
        @include shadowed;
    }

    & > .art-col-2 {
        grid-column: span 2;
    }

    & > .art-col-3 {
        grid-column: span 3;
    }

    & > .art-row-2 {
        grid-row: span 2;
    }

    & > .art-row-3 {
        grid-row: span 3;
    }
}

.art-home-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dev-grid {
    display: grid;
    gap: 20px;
}

.dev-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.dev-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 768px) {
    .art-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .art-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dev-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.youtube-embed {
    iframe {
        --shift: 8px;
        --duration: .2s;

        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 20px;

        border: 5px solid black;

        @include shadowed;
    }
}