From 42c23cc62d812c29c431977934af7b0f2a24b04b Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 03 May 2026 22:12:18 +0000
Subject: [PATCH] =mergin conflict?

---
 nav.css |   94 ++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/nav.css b/nav.css
index 5a48ba2..c0b5410 100644
--- a/nav.css
+++ b/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) {

--
Gitblit v1.10.0