=mergin conflict?

Jake Vanderwerf

2026-05-03 42c23cc62d812c29c431977934af7b0f2a24b04b

 nav.css

@@ -26,6 +26,7 @@
    height: max(var(--btn), max-content);
    width: 100%;
    max-inline-size: none;
    padding: 0;
}

/* Links fill parent */
@@ -40,6 +41,8 @@
    white-space: nowrap;
    text-transform: uppercase;
    transition: var(--trans-color);
    border-radius: 0;
    background-color: transparent;
}
nav a {
    height: var(--btn);
@@ -60,7 +63,7 @@
**************************************************************/

/* Active/Focus states */
    nav a:hover,
/*    nav a:hover,*/
    nav .current a,
    nav a.current,
    nav a:focus,
@@ -72,12 +75,12 @@


/* Icon rotation */
.toggle .icon {
.toggle .icon-caret-down {
    transform: rotate(0deg);
    transition: transform var(--trans-base);
}

.has-submenu.open > button .icon {
.has-submenu.open > button .icon-caret-down {
    transform: rotate(900deg);
}

@@ -93,11 +96,12 @@
    height: max-content;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    transform: scaleY(0);
    transform-origin: top;
    width: max(100%, max-content);
    width: 100%;
    min-width: max-content;
    background-color: rgba(var(--base-rgb),var(--op-3));
    border: 2px solid rgba(var(--base-rgb),var(--op-3));
    transition: all var(--trans-t) var(--trans-fn);
@@ -109,6 +113,9 @@
    background-color: rgba(var(--base-rgb),var(--op-6));
    border: 1px solid var(--base-50);
}
.submenu a {
    height: var(--chipchip);
}

/* Open state */
.open > ul.submenu {
@@ -268,7 +275,6 @@

/**************************************************************
VARIANT: BREADCRUMBS (#breadcrumbs)
Only define what makes it different
**************************************************************/
nav#breadcrumbs {
    /* Different sizing */
@@ -285,6 +291,8 @@
}
#breadcrumbs ol {
    height: max-content;
    --wrap: wrap!important;
    --justify: flex-start!important;
}
#breadcrumbs li {
    width: max-content;
@@ -340,6 +348,8 @@
}

nav.fixed.bottom a {
    gap: 1rem;
    --w: var(--chip_);
    color: var(--contrast);
    font-size: var(--txt-x-small);
}
@@ -366,33 +376,76 @@
    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 {
    bottom: var(--btn_);
    bottom: var(--btn);
}

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;
}

.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 {
    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)
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;
    }

@@ -406,31 +459,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) {