=switchiing over

Jake Vanderwerf

2026-04-26 5be81a8e31abfbf5d816d1f4adf6d60c89ebb49c

 nav.css

@@ -269,7 +269,6 @@

/**************************************************************
VARIANT: BREADCRUMBS (#breadcrumbs)
Only define what makes it different
**************************************************************/
nav#breadcrumbs {
    /* Different sizing */
@@ -286,6 +285,8 @@
}
#breadcrumbs ol {
    height: max-content;
    --wrap: wrap!important;
    --justify: flex-start!important;
}
#breadcrumbs li {
    width: max-content;
@@ -369,6 +370,12 @@
    color: var(--base-200);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-6);

}
.on-this-page li,
.on-this-page a {
    width: 100%;
    height: 100%;
}

body:has(nav.fixed) nav.on-this-page {
@@ -377,7 +384,16 @@
body:has(.additional-actions button) nav.on-this-page{
    width: calc(100vw - var(--btn_) - 1rem);
}

.on-this-page button {
    order: 3;
    padding: 0 1rem;
    width: max-content;
    aspect-ratio: unset;
    height: var(--btn);
}
.on-this-page.open button {
    order: 0;
}
.on-this-page ul {
    width: 100%;
    gap: 0;
@@ -391,9 +407,14 @@
    color: var(--action-contrast);
}
.on-this-page a {
    height: var(--chip);
    padding: 0;
}
.on-this-page #back-to-top span {
    display: none;
}
.on-this-page.open #back-to-top span {
    display: block;
}

/**************************************************************
VARIANT: LETTERS (nav.letters)
@@ -432,31 +453,36 @@
Only define what makes it different
**************************************************************/
nav.index {
    --justify: flex-start;
    --justify: space-between;
    --padding: 0;
    background-color: rgba(var(--base-rgb),var(--op-6));
}

.index ul {
    width: max-content;
    width: 100%;
}

.index li {
    flex-shrink: 0;
    transform: scaleX(0);
    transform-origin: right;
    max-width: 0;
    overflow: hidden;
    transition: transform var(--trans-base);
}

.index li.active,
.index li.adj {
    transform: scaleX(1);
    transform-origin: left;
    width: 100%;
    width: calc(100% - var(--btn_));
    flex-shrink: 1;
    max-width: fit-content;
    max-width: none;
}
.index li:first-of-type {
    flex-shrink: 1;
    transform: scaleX(1);
    order: 9999;
    width: var(--btn);
    height: var(--btn);
    max-width: none;
}

@media (max-width: 767px) {