site/_includes/styles/windows.css

/* ╭────────────────────────────────────────────╮
/  │           _           _                    │
/  │ __      _(_)_ __   __| | _____      _____  │
/  │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
/  │  \ V  V /| | | | | (_| | (_) \ V  V /\__ \ │
/  │   \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
/  ╰────────────────────────────────────────────╯
/  windows - related styling for the windows on pages */

.window {
    .header {
        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
        border-bottom: .1rem solid var(--accent);
        display: inline-flex;
        min-width: 100%;
        overflow: clip;
        text-align: center;
        vertical-align: middle;

        .titlebar-icon {
            background: color-mix(in srgb, var(--accent) 40%, transparent);
            padding: .4rem .4rem .2rem 1rem;
            border-right: .2rem solid var(--accent);
            border-bottom: .2rem solid var(--accent);
            border-bottom-right-radius: 1rem;
            margin-bottom: -.2rem;

            span {
                background-color: var(--foreground);
            }
        }

        a {
            padding: .3rem 0rem .3rem .5rem;
            text-decoration: none;
            color: var(--foreground);
        }

        a:hover {
            text-decoration: underline;
        }

        .icon {
            transform: scale(1.1);
        }

        .window-buttons {
            margin-left: auto !important;
            padding: .2rem .5rem .2rem 0rem;

            span {
                text-align: center;
                vertical-align: middle;
                background-color: var(--foreground);
            }

            /* maximize button (which does nothing) */
            span:nth-child(2) {
                opacity: .6;
                cursor: not-allowed;
            }
        }

        .close-button {
            background: color-mix(in srgb, var(--accent) 40%, transparent);
            border-bottom-left-radius: 1rem;
            border-bottom: .2rem solid var(--accent);
            border-left: .2rem solid var(--accent);
            color: var(--foreground);
            margin-bottom: -.2rem;
            padding: .4rem .5rem .2rem .6rem;
            transition: background .2s, background-color .2s;
        }

        /* close button (animated on hover) */
        .close-button:hover {
            background: var(--red);
            transition: background .2s;

            span {
                background-color: var(--background);
                transition: background-color .2s;
            }
        }
    }

    section, article {
        padding: .8rem;
    }

    animation-fill-mode: backwards;
    background-color: var(--background);
    border-radius: 2rem .6rem 2rem .6rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: var(--foreground);
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    max-width: 60em;
    outline: var(--accent) solid .15rem;
    overflow: clip;
    transition: .2s outline;
}

/* window styling when hovered */
.window:hover {
    outline: var(--accent) solid .5rem;
    transition: .2s outline;
}

/* window when its the first one on the page */
.window:first-child {
    margin-top: 5rem;

    animation: .3s ease-out .2s 1 window-appear;
    animation-fill-mode: backwards;
}

/* rest of the windows if they exist, to finish the rest of the animations */
.window:nth-child(2) {
    animation: .3s ease-out .4s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(3) {
    animation: .3s ease-out .6s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(4) {
    animation: .3s ease-out .8s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(5) {
    animation: .3s ease-out 1s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(6) {
    animation: .3s ease-out 1.2s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(7) {
    animation: .3s ease-out 1.4s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(8) {
    animation: .3s ease-out 1.6s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(9) {
    animation: .3s ease-out 1.8s 1 window-appear;
    animation-fill-mode: backwards;
}

.window:nth-child(10) {
    animation: .3s ease-out 2s 1 window-appear;
    animation-fill-mode: backwards;
}

/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 1083px) {
    .window:not(#footer) {
        .header {
            .icon {
                padding: .3rem .4rem .3rem .4rem;
            }

            .window-buttons {
                display: none !important;
            }

            .close-button {
                margin-left: auto !important;
            }
        }

        main, section, article {
            padding: .5rem;
        }

        animation: unset !important;
        border-bottom: var(--accent) solid .15rem;
        border-left: unset !important;
        border-radius: unset !important;
        border-right: unset !important;
        border-top: var(--accent) solid .15rem;
        margin-bottom: .8em;
    }

    /* window when its the first one on the page */
    .window:first-child {
        margin-top: 3.4rem !important;
    }
}