=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
    *****************************/
@@ -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);
@@ -1022,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;
@@ -1098,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? **/
@@ -1168,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);}
@@ -1908,6 +1916,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 +2101,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 +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));
@@ -2926,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);
@@ -3001,7 +3027,7 @@
            }
            ul.gallery li {
                height: auto;
                width: 100%;
                width: 46%;
            }
            ul.gallery figure {
                width: 100%;
@@ -3056,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 {
@@ -3170,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);
@@ -3580,6 +3606,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 +3628,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 +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;
@@ -3623,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%;