=jakevan finished

Jake Vanderwerf

2026-05-31 1d877d76881ffa55d4f94405e807d5e64364f7a4

 all.css

@@ -27,6 +27,8 @@
    --full: 100vw;
    --offScreen: -200vw;

    --aside: min(500px, calc(100vw - 2rem));

    /*****************************
    Sizing
    *****************************/
@@ -844,10 +846,10 @@
:is(h1,h2,h3,h4,h5,h6), p {
    width: 100%;
}
    .group :is(h1,h2,h3,h4,h5,h6), p {
        width: max-content;
        max-width: 100%;
    }
    /*.group :is(h1,h2,h3,h4,h5,h6), p {*/
    /*    width: max-content;*/
    /*    max-width: 100%;*/
    /*}*/

:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
    font-weight: var(--fw-h-bold);
@@ -1908,6 +1910,17 @@
    box-shadow: var(--shdw-none);
}

.btn.action {
    background-color: rgb(var(--action-0));
    color: rgb(var(--action-contrast));
    border: 1px solid var(--action-0);
}
    .btn.action:hover,
    .btn.action:focus {
        background-color: transparent;
        color: rgb(var(--action-0));
    }

    button.outline:hover,
    button.outline:focus,
    [type=submit].outline:hover,
@@ -2082,6 +2095,11 @@
body:has(.fixed.bottom):has(nav.index.on-this-page).scroll-up.scroll-up #back-to-top {
    bottom: calc(var(--btn) + var(--chipchip));
}
@media(max-width:787px) {
    body:has(.fixed.bottom):has(nav.letters.on-this-page).scroll-up.scroll-up #back-to-top {
        bottom: calc(var(--btn) + var(--chipchip) + .25rem);
    }
}

button[data-action=refresh],
button.clear-filters {
@@ -2908,7 +2926,7 @@
            position: absolute;
            width: 100%;
            max-width: none;
            bottom: 0;
            bottom: var(--btn_);
            left: 0;
            right: 0;
            background: rgba(var(--base),var(--op-45));
@@ -3001,7 +3019,7 @@
            }
            ul.gallery li {
                height: auto;
                width: 100%;
                width: 46%;
            }
            ul.gallery figure {
                width: 100%;
@@ -3056,7 +3074,7 @@
    position: fixed;
    top: var(--btnbtn);
    bottom: var(--btn_);
    width: min(500px, calc(100vw - 2rem));
    width: var(--aside);
    padding: 0 0 var(--btn);
}
    aside.main.left {
@@ -3170,11 +3188,11 @@
        animation: spin 1s var(--trans-fn) infinite;
    }
.main.expanded + .qtoggle {
    width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
    width: calc(var(--aside) - var(--btn));
}

.main-actions .buttons:has(.expanded) {
    width: calc(min(500px, calc(100vw - 2rem)));
    width: var(--aside);
}
.main.expanded + .qtoggle {
    left: var(--btn);
@@ -3580,6 +3598,10 @@
    touch-action: pan-x;
    margin:0!important;
}
    .loop.scroll li {
        min-width: 40vw;
        padding: 0;
    }
    a:has(img) {
        display:block;
        padding: .25rem;
@@ -3598,10 +3620,28 @@
/*********************************************************
DIRECTORY
*********************************************************/
.is-directory main {
    padding-top: var(--btnbtn);
}
    .is-directory main > details {
        grid-column: wide;
        max-width: 100%;
        margin: 1rem 0;
        padding-right: var(--chipchip);
    }
        .is-directory main> details ul {
            --justify: flex-start;
        }
        .is-directory main > details li::before {
            display: none;
        }
.directory-list > ul {
    max-width: none;
    margin-left: 0!important;
}
.directory-list {
    padding: 0!important;
}
.directory-list .image {
    display: flex;
    flex-wrap: nowrap;
@@ -3615,7 +3655,7 @@
    text-align: center;
    font-weight: var(--fw-h-bold);
    position: sticky;
    font-size: var(--txt-enormous);
    font-size: var(--txt-xx-large);
    width: 100%;
    top: var(--btn);
    left: 0;
@@ -3623,14 +3663,34 @@
    text-shadow: rgb(var(--base-200)) 1px 1px 0;
    user-select: none;
}
    .directory-list >ul > li {
    .directory-list >ul > li.nowrap {
        padding: 2rem;
        align-items: flex-start;
        flex-wrap: wrap!important;
    }
    .directory-list > ul > li h3 {
        background-color: rgb(var(--base-50));
    }
        .directory-list > ul > li:nth-of-type(even) h3 {
            background-color: rgb(var(--base-100));
        }
    @media (min-width: 768px) {
        .directory-list h3 {
            background-color: transparent!important;
            font-size: var(--txt-enormous);
        }

        .directory-list >ul > li.nowrap {
            flex-wrap: nowrap!important;
        }
    }
    .directory-list >ul > li:nth-of-type(even) {
        background-color: rgb(var(--base-100));
    }

    .directory-list > ul > li {
        padding: 3rem var(--btn) 3rem 1.5rem;
    }
    /** The letter's list **/
    .directory-list ul ul {
        width: 100%;