From d25ccb070d76eb496e88d16776aea9e27de6e341 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Fri, 05 Jun 2026 16:50:19 +0000
Subject: [PATCH] =Switching to Northeh
---
nav.css | 140 ++++++++++++++++++++++++++++++++++------------
1 files changed, 104 insertions(+), 36 deletions(-)
diff --git a/nav.css b/nav.css
index 43bfe54..189fa99 100644
--- a/nav.css
+++ b/nav.css
@@ -68,7 +68,7 @@
nav a:focus:visited,
nav button:focus {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
.toggle .icon-caret-down {
@@ -225,7 +225,7 @@
/*}*/
/*nav.always > .toggle:hover {*/
/* background-color: rgb(var(--action-0));*/
-/* color: var(--action-contrast);*/
+/* color: rgb(var(--action-contrast));*/
/*}*/
/*nav.always.open > .toggle {*/
/* width: 100%;*/
@@ -236,7 +236,7 @@
/*nav.always.open > .toggle:hover {*/
/* background-color: rgb(var(--action-0));*/
-/* color: var(--action-contrast);*/
+/* color: rgb(var(--action-contrast));*/
/*}*/
/*nav.always button .icon-x,*/
@@ -258,13 +258,17 @@
transition: width var(--trans-base);
width: max-content;
}
+nav.always.fixed {
+ z-index: var(--z-10);
+}
+
nav.always > ul {
--dir: column;
--align: center;
- --justify: flex-end;
+ --justify: flex-start;
--gap: 0;
- height: 100vh;
- max-height: none;
+ height: 100%;
+ max-height: 100vh;
position: fixed;
right: -300vw;
bottom: 0;
@@ -278,7 +282,51 @@
}
nav.always li {
width: 100%;
+ height: max-content;
}
+
+ nav.always.fixed.open {
+ width: 100vw;
+ height: 100vh;
+ inset: 0;
+ z-index: var(--z-10);
+ }
+
+ nav.always a {
+ height: max-content;
+ min-height: var(--chipchip);
+ }
+ nav.always li:not(.has-submenu) > a {
+ padding-right: calc(var(--btn) + 1rem);
+ }
+ nav.always .has-submenu {
+ --dir: row;
+ --wrap: wrap;
+ height: max-content;
+ }
+ nav.always .has-submenu a {
+ max-width: calc(100% - var(--btn));
+ }
+ nav.always .has-submenu .toggle {
+ max-width: var(--btn);
+ }
+ .has-submenu.open > a {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ }
+ .has-submenu.open > ul {
+ border: 1px solid rgb(var(--action-0));
+ background-color: rgb(var(--action-0));
+ --align: flex-start;
+ }
+
+ nav.always ul.submenu {
+ position: relative;
+ top: 0;
+ }
+ nav.always .submenu a {
+ padding-left: var(--btn);
+ }
/*******************************************************
ALWAYS MOBILE FIXED NAV
*******************************************************/
@@ -295,7 +343,7 @@
nav.always.fixed .toggle.main:hover,
nav.always.fixed .toggle.main:focus {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
/*******************************************************
MOBILE NAV
@@ -399,6 +447,7 @@
nav#breadcrumbs ol {
height: max-content;
--wrap: wrap;
+ --justify: flex-start;
}
nav#breadcrumbs li {
width: max-content;
@@ -432,12 +481,12 @@
nav.fixed {
position: fixed;
box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
- z-index: var(--z-9);
+ z-index: var(--z-6);
}
nav.fixed.bottom {
left: 0;
bottom: 0;
- width: calc(100% - var(--btn));
+ width: calc(100vw - var(--btn));
}
nav.fixed:not(.always) ul {
@@ -466,7 +515,7 @@
/************************************************************
ON THIS PAGE
************************************************************/
-nav.on-this-page {
+nav.on-this-page.on-this-page {
--justify: space-between;
position: fixed;
bottom: 0;
@@ -475,6 +524,7 @@
z-index: var(--z-5);
background-color: rgba(var(--base), var(--op-45));
max-width: none;
+ margin: 0!important;
}
body:has(nav.fixed) nav.on-this-page {
@@ -498,14 +548,14 @@
}
nav.on-this-page .active a {
background-color: rgba(var(--base),var(--op-6));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
nav.on-this-page #back-to-top span {
display: none;
}
nav.on-this-page .active a {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
}
/****************************************************
@@ -515,10 +565,11 @@
nav.letters ul,
nav.letters li,
nav.letters a{
- height: var(--chip);
+ min-height: var(--chip);
+ height: max-content;
}
nav.letters li {
- max-width: calc(7.69% - 2px); /* Fit 26 letters over 2 rows */
+ width: calc(7.69% - 2px); /* Fit 26 letters over 2 rows */
}
nav.letters ul {
--wrap: wrap;
@@ -532,7 +583,7 @@
--wrap: nowrap;
}
nav.letters li {
- max-width: none;
+ width: inherit;
}
nav.letters a {
padding: .25rem .66rem;
@@ -547,6 +598,14 @@
--padding: 0;
background-color: rgba(var(--base),var(--op-6));
}
+nav.index,
+nav.index ul,
+nav.index li,
+nav.index button,
+nav.index a {
+ min-height: var(--chipchip);
+ height: var(--chipchip);
+}
nav.index ul {
width: 100%;
}
@@ -559,18 +618,18 @@
nav.index li.active,
nav.index li.adj {
transform: scaleX(1);
- width: calc(100% - var(--btn_));
+ width: 100%;
flex-shrink: 1;
max-width: none;
}
-nav.index li:first-of-type {
- flex-shrink: 1;
- transform: scaleX(1);
- order: 9999;
- width: var(--btn);
- height: var(--btn);
- max-width: none;
-}
+/*nav.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) {
.index li.adj {
@@ -578,13 +637,13 @@
max-width: 0;
}
}
-nav.index a {
- border-bottom: 4px solid transparent;
-}
-nav.index .active a {
- border-color: rgb(var(--action-0));
- color: rgb(var(--contrast));
-}
+/*nav.index a {*/
+/* border-bottom: 4px solid transparent;*/
+/*}*/
+/*nav.index .active a {*/
+/* border-color: rgb(var(--action-0));*/
+/* color: rgb(var(--contrast));*/
+/*}*/
nav.index.open {
--dir: column-reverse;
@@ -595,17 +654,20 @@
backdrop-filter: blur(5px);
z-index: var(--z-10);
}
+ nav.index.open ul {
+ min-height: max-content;
+ --dir: column;
+ }
nav.index.open li {
width: 100%;
- height: var(--btn);
max-width: 100%!important;
transform: scaleX(1);
overflow: visible;
}
nav.index.open a {
- --justify: flex-end;
+ --justify: center;
padding: 0 2rem 0 0;
- background-color: transparent;
+ /*background-color: transparent;*/
}
/***************************************************************
@@ -669,6 +731,7 @@
.always ul.socials {
width: 100vw;
--justify: stretch;
+ --gap: 0;
}
.always ul.socials li {
flex: 1;
@@ -678,11 +741,16 @@
.always ul.socials a {
display: inline-flex;
}
+ul.socials li {
+ flex: 1;
+}
ul.socials a {
- display: inline-block;
+ display: inline-flex;
font-size: var(--txt-x-small);
padding: .25rem .5rem;
max-width: none;
+ justify-content: center;
+ width: 100%;
}
ul.socials .icon {
margin: 0;
@@ -717,7 +785,7 @@
nav.tabs button.active,
nav.tabs button.active:hover {
background-color: rgb(var(--action-0));
- color: var(--action-contrast);
+ color: rgb(var(--action-contrast));
border-color: rgb(var(--base));
}
--
Gitblit v1.10.0