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 | 74 ++++++++++++++++++++++++++++++++----
1 files changed, 65 insertions(+), 9 deletions(-)
diff --git a/nav.css b/nav.css
index 5446527..189fa99 100644
--- a/nav.css
+++ b/nav.css
@@ -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
*******************************************************/
@@ -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 {
@@ -516,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;
@@ -533,7 +583,7 @@
--wrap: nowrap;
}
nav.letters li {
- max-width: none;
+ width: inherit;
}
nav.letters a {
padding: .25rem .66rem;
@@ -681,6 +731,7 @@
.always ul.socials {
width: 100vw;
--justify: stretch;
+ --gap: 0;
}
.always ul.socials li {
flex: 1;
@@ -690,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;
--
Gitblit v1.10.0