site/_site/styles/window.css

/* ---------------
- window styling -
---------------- */

.window {
    summary {
        display: inline-flex;
        min-width: 100%;
        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
        opacity: .8;
        text-align: center;
        vertical-align: middle;
        overflow: clip;
        transition: .2s opacity;

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

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

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

        a:hover {
            text-decoration: underline;
        }

        [class^="tabler--"] {
            transform: scale(1.1);
        }

        div:nth-child(3) {
            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 */
        div:nth-child(4) {
            background: color-mix(in srgb, var(--accent) 40%, transparent);
            padding: .4rem .5rem .2rem .6rem;
            border-left: .2rem solid var(--accent);
            border-bottom-left-radius: 1rem;
            color: var(--foreground);

            transition: background .2s;
            transition: background-color .2s;
        }

        /* close button (animated on hover) */
        div:nth-child(4):hover {
            background: var(--red);

            transition: background .2s;

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

    section, article {
        padding: .8rem;
    }

    background-color: var(--background);
    color: var(--foreground);

    border: var(--accent) solid .15rem;
    border-radius: .6rem;

    max-width: 60em;
    overflow: clip;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;

    transition: .2s box-shadow;
    animation-fill-mode: backwards;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* window styling when hovered */
.window:hover {
    summary {
        opacity: 1;
        transition: .2s opacity;
    }
}

/* window styling when open (default state) */
.window[open] {
    summary {
        opacity: 1;
        border-bottom: .1rem solid var(--accent);

        transition: .2s opacity;
    }

    border-radius: 2rem .6rem 2rem .6rem;
}

.window:hover {
    box-shadow: var(--accent) 0px 0px 0px .3rem;

    transition: .2s box-shadow;
}

/* window when its the first one on the page */
.window:nth-child(2) {
    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(3) {
    animation: .3s ease-out .4s 1 window-appear;
    animation-fill-mode: backwards;
}

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

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

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

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

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

/* ------------------
- the footer window -
------------------ */

footer {
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;

    details > summary > a {
        padding: .3rem 0rem .3rem 1rem !important;
    }

    section, article {
        padding: 1rem !important;
    }
}