Jake Vanderwerf
2026-02-14 d4dd4ccfdceaaff4e5cb409a96b3c802d762d8d8
nav.css
@@ -26,6 +26,7 @@
    height: max(var(--btn), max-content);
    width: 100%;
    max-inline-size: none;
    padding: 0;
}
/* Links fill parent */
@@ -340,6 +341,8 @@
}
nav.fixed.bottom a {
    gap: 1rem;
    --w: var(--chip_);
    color: var(--contrast);
    font-size: var(--txt-x-small);
}
@@ -369,30 +372,53 @@
}
body:has(nav.fixed) nav.on-this-page {
    bottom: var(--btn_);
    bottom: var(--btn);
}
body:has(.additional-actions button) nav.on-this-page{
    width: calc(100vw - var(--btn_) - 1rem);
}
.on-this-page ul {
    width: 100%;
    gap: 0;
}
.on-this-page li {
    justify-content: center;
}
.on-this-page .active a {
    background-color: rgba(var(--base-rgb),var(--op-6));
    color: var(--action-contrast);
}
.on-this-page a {
    height: var(--chip);
    padding: 0;
}
/**************************************************************
VARIANT: LETTERS (nav.letters)
Only define what makes it different
**************************************************************/
nav.letters li {
    flex: 1;
    height: var(--chip);
    max-width: calc(7.69% - 2px); /*Fit 26 letters over 2 rows) */
}
nav.letters ul {
    --wrap: wrap;
}
nav.letters,
nav.letters ul {
    height: var(--chipchip);
}
@media (min-width: 768px) {
    nav.letters,
    nav.letters ul {
        height: var(--chip);
    }
    nav.letters ul {
        --wrap: nowrap;
    }
    nav.letters li {
        flex: 0 1 auto;
        max-width: none;
    }