=Minor tweaks to form status, finalizing the nav.always.fixed submenus

Jake Vanderwerf

2026-06-02 c155de06a9e0f82e56446fefa1b39edb6b0542de

 all.css

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

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

    /*****************************
    Sizing
    *****************************/
@@ -76,6 +78,8 @@
    Colours
    *****************************/
    --filter: grayscale(.3) sepia(.4);
    --filterNone: grayscale(0) sepia(0);

    --mix-blend-mode: darken;
    --coverBlend: overlay;
    --coverIndex: 2;
@@ -375,6 +379,7 @@
        inline-size: fit-content;
        margin-inline: auto;
    }
    a > img,
    figure img {
        width: 100%;
        height: 100%;
@@ -628,7 +633,7 @@
*************************************************************/
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}

@media(prefers-reduced-motion){
@@ -841,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);
@@ -952,7 +957,7 @@
    }

    :is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
        color: var(--action-contrast);
        color: rgb(var(--action-contrast));
        background-color: rgb(var(--action-0));
    }

@@ -1019,6 +1024,12 @@
    ul.terms li {
        list-style: none;
    }
    ul.terms ul {
        display: inline-flex;
        margin: 0;
        gap: .5rem;
        flex-wrap: wrap;
    }

.term-list.cloud {
    display: flex;
@@ -1035,7 +1046,7 @@
    }
        .term-list.cloud a:hover,
        .term-list.cloud a:focus {
            color: var(--action-contrast);
            color: rgb(var(--action-contrast));
            background-color: rgb(var(--action-0));
        }
        .term-list a:has(.count) {
@@ -1049,7 +1060,7 @@
            /*aspect-ratio: 1;*/
            font-size: var(--txt-small);
            /*background-color: rgb(var(--action-0));*/
            /*color: var(--action-contrast);*/
            /*color: rgb(var(--action-contrast));*/
        }

.term-list li {
@@ -1095,19 +1106,19 @@
}
@media (min-width: 768px){
    .width-50 {
        max-width: 50%;
        max-width: calc(49% - var(--gap,0));
    }
    .width-25 {
        max-width: 25%;
        max-width: calc(24% - var(--gap,0));
    }
    .width-75 {
        max-width: 75%;
        max-width: calc(74% - var(--gap,0));
    }
    .width-33 {
        max-width: 33.333%;
        max-width: calc(32.333% - var(--gap,0));
    }
    .width-66 {
        max-width: 66.666%
        max-width: calc(65.666% - var(--gap,0));
    }
}
/** SPACING TODO: maybe scan our files for which we actually use? **/
@@ -1165,7 +1176,7 @@
.pb-7 { padding-bottom: var(--sp7); }

/** MARGIN **/
.m-0 {margin: 0;}
.m-0.m-0 {margin: 0;}
.m-1 {margin: var(--sp1);}
.m-2 {margin: var(--sp2);}
.m-3 {margin: var(--sp3);}
@@ -1480,10 +1491,10 @@
.abs { position: absolute; }
*:has(>.abs) { position: relative; }

.top { top: 0; right: 0; left: 0; }
.abs.top { top: 0; right: 0; left: 0; }
.top-right { top: 0; right: 0; }
.top-left { top: 0; left: 0; }
.btm { bottom: 0; left: 0; right: 0; }
.abs.btm { bottom: 0; left: 0; right: 0; }
.btm-right { bottom: 0; right: 0; }
.btm-left { bottom: 0; left: 0; }
.edges { inset: 0; }
@@ -1901,10 +1912,21 @@
.buttons a:visited:hover,
.buttons a:focus {
    background-color: rgb(var(--action-0));
    color: var(--action-contrast);
    color: rgb(var(--action-contrast));
    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,
@@ -1918,7 +1940,7 @@
    .buttons .outline a:visited:hover,
    .buttons .outline a:focus {
        background-color: rgb(var(--action-0));
        color: var(--action-contrast);
        color: rgb(var(--action-contrast));
        border-color: rgb(var(--action-0));
    }

@@ -2011,7 +2033,7 @@
    button.sticky:hover,
    button.sticky:focus {
        background-color: rgba(var(--action-0),var(--op-6));
        color: var(--action-contrast);
        color: rgb(var(--action-contrast));
    }
        .main-actions .buttons button:disabled,
        .main-actions .buttons button:disabled:hover,
@@ -2037,7 +2059,7 @@
        .main .m-actions .refresh:hover,
        .main .m-actions .refresh:focus {
            background-color: rgb(var(--action-0));
            color: var(--action-contrast);
            color: rgb(var(--action-contrast));
        }
        .main .refresh .indicator {
            background-color: rgba(var(--base), var(--op-3));
@@ -2076,6 +2098,22 @@
body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
    bottom: calc(var(--btn) + var(--chip_));
}
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 {
    width: max-content;
    min-height: var(--chip_);
    --w: var(--txt-small);
    padding: .25rem .5rem;
}
/******************************************************************
ACCESSIBILITY
******************************************************************/
@@ -2136,6 +2174,8 @@
[type=radio] + label,
[type=checkbox] + label {
    cursor: pointer;
    position: relative;
    padding-left: 1.5rem;
}
.field:is(.radio,.checkbox) fieldset {
    display: grid;
@@ -2164,6 +2204,11 @@
        color: rgb(var(--action-0));
    }

    [type=radio].btn + label:hover,
    [type=radio].btn:checked + label:hover {
        color: rgb(var(--action-contrast));
    }

    [type=radio] + label::before,
    [type=radio] + label::after,
    [type=checkbox] + label::before,
@@ -2182,7 +2227,7 @@
            transform: rotate(45deg);
            width: .25em;
            height: .75em;
            border: solid var(--action-contrast);
            border: solid rgb(var(--action-contrast));
            border-width: 0 2px 2px 0;
            display: none;
        }
@@ -2276,7 +2321,7 @@
    }
.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
    background-color:rgb(var(--action-0));
    color: var(--action-contrast);
    color: rgb(var(--action-contrast));
    border-radius: 4px;
}

@@ -2586,6 +2631,9 @@
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
    z-index: var(--z-5);
}
aside.expanded {
    margin: 0!important;
}
dialog::backdrop {
    backdrop-filter: blur(5px);
    background-color: rgba(var(--base),var(--op-4));
@@ -2599,7 +2647,7 @@
dialog[open] {
    z-index: var(--z-10);
    --padding: 0;
    top: 5vh;
    margin: auto!important;
    width: min(500px, 95vw);
    height: fit-content;
    max-height: 90vh;
@@ -2613,9 +2661,11 @@
        max-height: 98vh;
        top: 1vh;
    }
    dialog > .wrap {
    dialog > .wrap.wrap {
        max-height: var(--maxHeight);
        overflow: hidden auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0 0 0 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: var(--btn);
@@ -2654,7 +2704,7 @@
        box-shadow: none;
        width: 100%;
        background-color: rgb(var(--action-0));
        color: var(--action-contrast);
        color: rgb(var(--action-contrast));
        --gap: .75rem;
        font-size: var(--txt-x-small);
        border-radius: 0;
@@ -2671,14 +2721,98 @@
        .m-actions button:last-of-type {
            border-bottom-right-radius: 1rem;
        }
    dialog ul {
    dialog li {
        list-style: none;
        padding: 0;
    }
    dialog .search-container {
        padding-top: 1rem;
        width: 100%;
        gap: .5rem;
    }
    dialog header {
        width: 100%;
        text-align: center;
        font-size: var(--txt-x-medium);
        height: var(--chipchip);
    }
        dialog header h2 {
            margin: 0;
        }
        /** SELECTOR **/
        .selected-items {
            width: 100%;
            padding: .5rem;
            border-radius: var(--radius);
            background-color: rgb(var(--base));
            --justify: flex-start;
            --gap: .5rem;
            margin-bottom: .5rem;
        }
            .selected-items button {
                width: max-content;
                padding: .125rem .5rem;
                font-size: var(--txt-x-small);
                min-height: var(--chip_);
            }
                .selected-items button .icon-x {
                    --w: var(--txt-small);
                    align-self: flex-start;
                }
            .selected-items.selected-items:empty {
                padding: 0;
                background-color: transparent;
                margin: 0;
            }
            .selected-item.selected-item {
                padding: .25rem .5rem;
                margin: .125em;
                background-color: rgb(var(--base-100));
                border-radius: .25rem;
                font-size: var(--txt-medium);
                border: 1px solid rgb(var(--base-200));
                position: relative;
                width: max-content;
            }
                .selected-item button {
                    min-height: 0;
                    height: var(--chip);
                    width: var(--chip);
                    padding: 0;
                    --w: var(--txt-small);
                }
            .clear-filters {
                margin-left: auto;
                border: 1px solid var(--base-200);
            }
            #jvb-selector .message {
                width: 100%;
                text-align: center;
            }
            #jvb-selector .items-wrap {
                width: 100%;
                padding: 1rem 0;
                border: 1px solid rgb(var(--base-200));
                border-width: 1px 0;
            }
            #jvb-selector .items-container {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                margin: 0;
            }

            .autocomplete-dropdown {
                width: 100%;
                background-color: var(--base-100);
                padding: .5rem;
                box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
            }
                li.autocomplete {
                    list-style: none;
                    display: inline-flex;
                    margin: .25rem;
                    min-height: var(--chip);
                }

    /** GALLERY **/
    img[data-gallery] {
@@ -2798,7 +2932,7 @@
            position: absolute;
            width: 100%;
            max-width: none;
            bottom: 0;
            bottom: var(--btn_);
            left: 0;
            right: 0;
            background: rgba(var(--base),var(--op-45));
@@ -2816,7 +2950,9 @@
                cursor: pointer;
                user-select: none;
            }

            dialog.gallery details[open] {
                background: rgba(var(--base), var(--op-6));
            }
            dialog.gallery details[open] .item-info {
                padding: 0.75rem 1rem 1rem;
                font-size: var(--txt-x-small);
@@ -2855,9 +2991,9 @@
ul.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: .2em;
    padding: 0;
    list-style-type: none;
    margin: .2em!important;
    padding: 0!important;
    max-width: 100vw;
}
    ul.gallery::after {
        content: '';
@@ -2867,9 +3003,12 @@

    ul.gallery li {
        flex-grow: 1;
        list-style: none;
        height: 40vh;
        margin: .2em;
        overflow: hidden;
        padding: 0;
        max-width:49%;
    }

    ul.gallery figure {
@@ -2888,7 +3027,7 @@
            }
            ul.gallery li {
                height: auto;
                width: 100%;
                width: 46%;
            }
            ul.gallery figure {
                width: 100%;
@@ -2906,6 +3045,35 @@
                height: 80vh;
            }
        }

    ul.gallery.cut {
        --gap: var(--txt-small);
        display: grid;
        max-width: var(--narrow);
        grid: auto-flow 1fr/repeat(3, 1fr);
        gap: var(--gap);
    }
        ul.gallery.cut img {
            filter: var(--filterNone);
        }
        ul.gallery.cut:hover img {
            filter: var(--filter);
        }
        ul.gallery.cut:hover img:hover {
            filter: var(--filterNone);
        }
            ul.gallery.cut li:nth-of-type(4n +2) {
                grid-area: 1/2/span 2/span 2;
                clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4));
            }
            ul.gallery.cut li:nth-of-type(4n +3) {
                grid-area: 2/1/span 2/span 2;
                clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
            }




/*** POPUPS: notifications, cart, queue ***/
aside.main.main {
    --wrap: nowrap;
@@ -2914,7 +3082,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 {
@@ -2944,7 +3112,7 @@
        aside.main header {
            --w: 2em;
            background-color: rgb(var(--action-0));
            color: var(--action-contrast);
            color: rgb(var(--action-contrast));
            padding: 1rem;
        }
        .tab-content header {
@@ -2973,7 +3141,7 @@
            }
            nav.share a:hover {
                background-color: rgb(var(--action-0));
                color: var(--action-contrast);
                color: rgb(var(--action-contrast));
            }
        aside.main h4,
        aside.main .hint {
@@ -3028,11 +3196,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);
@@ -3157,7 +3325,7 @@

.callout.callout {
    background-color: rgb(var(--action-0));
    color: var(--action-contrast);
    color: rgb(var(--action-contrast));
}

.callalt.callalt {
@@ -3174,7 +3342,7 @@
}

.callout a {
    background-color: var(--action-contrast);
    background-color: rgb(var(--action-contrast));
    padding: 0 .125rem;
    border-radius: 4px;
}
@@ -3376,7 +3544,7 @@
    position: relative;
    padding: var(--btn);
}
    blockquote .icon {
    blockquote .icon-quotes-fi {
        position: absolute;
        top: var(--btn);
        left: calc((10vw + var(--btn)) * -1);
@@ -3402,7 +3570,8 @@
    margin: 0;
}
/** QUERY **/
.loop {
ul.loop {
    max-width: none;
    padding: var(--sp4) var(--sp1);
}
.loop :is(h1,h2,h3,h4,h5,h6) {
@@ -3423,13 +3592,30 @@
}

.loop li > figure {
    float: left;
    margin-right: var(--chip_);
    margin-top: 0;
    max-width: 30%;
    /*float: left;*/
    /*margin-right: var(--chip_);*/
    /*margin-top: 0;*/
    /*max-width: 30%;*/
    aspect-ratio: 1;
}

.loop.scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    touch-action: pan-x;
    margin:0!important;
}
    .loop.scroll li {
        min-width: 40vw;
        padding: 0;
    }
    a:has(img) {
        display:block;
        padding: .25rem;
    }


.no-results p,
.no-results {
    display: flex;
@@ -3442,8 +3628,27 @@
/*********************************************************
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;
@@ -3458,7 +3663,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;
@@ -3466,14 +3671,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%;