From a9bc55996f23ceeb6a6e941bcb56db11c385cddf Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 10 Nov 2025 21:05:52 +0000
Subject: [PATCH] =update
---
nav.css | 297 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 192 insertions(+), 105 deletions(-)
diff --git a/nav.css b/nav.css
index ca9ebb7..2e29555 100644
--- a/nav.css
+++ b/nav.css
@@ -5,6 +5,7 @@
--py: .25rem;
--px: 1rem;
max-width: 100%;
+ font-family: var(--heading);
}
nav,
nav ol,
@@ -20,6 +21,19 @@
flex-direction: var(--dir);
}
+ul.socials {
+ --w: 1.2em;
+ --height: fit-content;
+ gap: .5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ overflow: auto hidden;
+ touch-action: pan-x;
+ list-style: none;
+}
nav:not(:has(> ul)),
nav > ul {
--justify: flex-start;
@@ -68,18 +82,19 @@
height: var(--height);
width: var(--height);
padding: 0;
- background-color: var(--base);
+ /*background-color: var(--base);*/
+ border: 2px solid var(--base);
color: var(--contrast);
border-radius: 0;
}
-.toggle svg {
+.toggle .icon {
transform: rotate(0deg);
transition: transform var(--timing) var(--function);
transition-property: transform, background-color, color;
}
-.has-submenu.open > button:not(.notifications, .quick-help) svg,
-.has-submenu:hover > button:not(.notifications, .quick-help) svg {
+.has-submenu.open > button:not(.notifications, .quick-help) .icon,
+.has-submenu:hover > button:not(.notifications, .quick-help) .icon {
transform: rotate(900deg);
}
@@ -100,6 +115,13 @@
transition: all var(--timing) var(--function);
box-shadow: var(--shadow-none);
}
+
+.always ul.submenu {
+ position: relative;
+ top: 0;
+ left: 0;
+}
+
.submenu li {
background-color: var(--overlay-heavy);
border: 1px solid var(--base-50);
@@ -126,6 +148,88 @@
box-shadow: var(--shadow);
}
/**************************************************************
+FIXED
+**************************************************************/
+nav.on-this-page,
+nav.fixed.bottom {
+ --dir: row;
+ --gap: 0;
+ width: calc(100% - var(--height));
+ left: 0;
+ bottom: 0;
+ position: fixed;
+ box-shadow: var(--shadow);
+ z-index: var(--zz-top);
+}
+nav.fixed.bottom ul {
+ width: 100%;
+ --justify: space-between;
+ background-color: var(--base);
+ padding: 0 .25rem;
+}
+nav.fixed li,
+nav.fixed a {
+ --justify: center;
+ width: 100%;
+}
+
+nav.fixed.bottom a:visited,
+nav.fixed.bottom a {
+ color: var(--contrast);
+ font-size: var(--small);
+ padding: 0;
+}
+@media (min-width:768px) {
+ nav.fixed.bottom a:visited,
+ nav.fixed.bottom a {
+ font-size: var(--medium);
+ }
+}
+nav.fixed.bottom a:hover,
+nav.fixed.bottom a:hover:visited,
+nav.fixed.bottom a:focus,
+nav.fixed.bottom a:focus:visited {
+ color: var(--action-contrast);
+}
+.fixed.bottom li {
+ flex: 1;
+}
+
+nav.always a {
+ padding: 0;
+ --justify: center;
+}
+nav.always .socials {
+ width: 100%;
+}
+ nav.always .socials li {
+ width: 100%;
+ }
+nav.always li {
+ gap: 0;
+ --justify:flex-start;
+}
+ nav.always > ul > li > a {
+ width: 80%;
+ }
+nav.always .submenu {
+ width: 80%;
+ min-width: 80%;
+ box-shadow: none!important;
+ border: 2px solid var(--action-0);
+ background-color: rgba(var(--contrast-rgb), var(--rgb-subtle));
+}
+ nav.always .submenu li {
+ background-color: var(--overlay-light);
+ }
+nav.fixed .has-submenu > a,
+nav.always .has-submenu > a {
+ width: 80%;
+}
+.has-submenu > button {
+ width: 20%;
+}
+/**************************************************************
BREADCRUMBS
**************************************************************/
nav#breadcrumbs {
@@ -175,59 +279,57 @@
MOBILE
**************************************************************/
nav.always {
- z-index: 9999;
+ z-index: var(--z-above);
position: fixed;
width: var(--height);
bottom: 0;
right: 0;
}
-/*nav.always.open {*/
-/* width: 100vw;*/
-/* height: 100vh;*/
-/* padding-bottom:var(--height);*/
-/* background-color: var(--overlay-heavy);*/
-/* backdrop-filter: blur(5px);*/
-/* z-index: 999999;*/
-/*}*/
+nav.always.open {
+ width: 100vw;
+ height: 100vh;
+ padding-bottom:var(--offHeight);
+ background-color: var(--overlay-heavy);
+ backdrop-filter: blur(5px);
+ justify-content: flex-end;
+ flex-direction: column;
+ z-index: var(--z-above);
+}
nav.always > ul {
--dir: column;
--wrap: nowrap;
- --justify: flex-end;
+ --justify: flex-start;
--align: center;
- position: fixed;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- z-index: var(--zz-top);
- top: 0;
+ --gap: 0;
+ position: relative;
right: -300vw;
- padding: 0;
- width: 100%;
- height: 100vh;
- overflow: hidden auto;
- transition: right var(--timing) var(--function);
-}
-@media (min-width: 768px) {
- nav.always > ul {
- --justify: flex-start;
- }
+ padding: 1rem 0 0;
+ width: 100vw;
+ height: fit-content;
+ max-height: 100%;
+ overflow:hidden auto;
+ transition: right var(--transition-base);
}
nav.always.open > ul {
- width: 100%;
right: 0;
- gap: 0;
+ transition: right var(--transition-base);
}
-nav.always > ul li:hover,
-nav.always > ul li:focus-within,
-nav.always > ul li.active {
- background-color: var(--overlay-heavy);
-}
+/*nav.always > ul li:hover,*/
+/*nav.always > ul li:focus-within,*/
+/*nav.always > ul li.active {*/
+/* background-color: var(--overlay-heavy);*/
+/*}*/
nav.always li {
+ max-inline-size: none;
width: 100%;
height: fit-content;
+ --dir: row;
+ --wrap: wrap;
}
nav.always a {
--py: 1rem;
width: 100%;
+ min-height: var(--height);
}
nav.always > button {
@@ -260,70 +362,36 @@
background-color: var(--action-0);
color: var(--action-contrast);
}
-nav.always.open > button .list,
-nav.always >button .x {
+nav.always.open > button .icon-list,
+nav.always >button .icon-x {
transform: scale(0);
height: 0;
width: 0;
position: absolute;
}
-nav.always > button .list,
-nav.always.open > button .x {
+nav.always > button .icon-list,
+nav.always.open > button .icon-x {
transform: scale(1);
height: 32px;
width: 32px;
}
-@media (min-width: 768px) {
- nav.always a {
- padding: 2rem 0;
- }
- nav.always > ul {
- padding: var(--height) 0;
- }
+nav.always .has-submenu:hover > .submenu,
+nav.always .has-submenu.open > .submenu {
+ height: max-content;
}
-/**************************************************************
-FIXED
-**************************************************************/
-nav.on-this-page,
-nav.fixed.bottom {
- --dir: row;
- --gap: 0;
- width: calc(100% - var(--height));
- left: 0;
- bottom: 0;
- position: fixed;
- box-shadow: var(--shadow);
- z-index: 999;
-}
-nav.fixed.bottom ul {
- width: 100%;
- --justify: space-between;
- background-color: var(--base);
- padding: 0 .25rem;
-}
-nav.fixed li,
-nav.fixed a {
- --justify: center;
- width: 100%;
-}
-nav.fixed.bottom a:visited,
-nav.fixed.bottom a {
- color: var(--contrast);
- font-size: var(--small);
- padding: 0;
-}
-nav.fixed.bottom a:hover,
-nav.fixed.bottom a:hover:visited,
-nav.fixed.bottom a:focus,
-nav.fixed.bottom a:focus:visited {
+
+nav.always .has-submenu:hover > a,
+nav.always .submenu > li > a:hover,
+nav.always .submenu > li > a:focus {
+ background-color: var(--action-0);
color: var(--action-contrast);
}
-.fixed.bottom li {
- flex: 1;
-}
@media (min-width: 768px) {
- nav.fixed.bottom a {
- font-size: var(--large);
+ /*nav.always a {*/
+ /* padding: 2rem 0;*/
+ /*}*/
+ nav.always > ul {
+ padding: var(--height) 0 0;
}
}
/**************************************************************
@@ -332,7 +400,7 @@
nav.on-this-page {
--justify: space-between;
max-width: none;
- z-index: 99;
+ z-index: var(--z-6);
margin: 0;
padding: 0 .5rem;
background-color: var(--overlay-medium);
@@ -430,7 +498,7 @@
.index.open {
--dir: column-reverse;
height: calc(100% - 8rem);
- z-index: 99999999;
+ z-index: var(--z-above);
width: 100%;
background-color: var(--overlay-heavy);
backdrop-filter: blur(5px);
@@ -441,7 +509,7 @@
margin-top: 1rem;
margin-right: 2rem;
}
-.index.open .toggle svg {
+.index.open .toggle .icon {
transform: rotate(45deg);
}
.index.open ul {
@@ -468,38 +536,40 @@
/**************************************************************
CONDENSED
**************************************************************/
-.is-style-condensed {
+.condensed {
--dir: row;
--wrap: wrap;
--height: 1.2em;
- --py: .2rem;
- --px: 1rem;
+ --py: .25rem;
+ --px:.25rem;
+ height: fit-content;
}
-.is-style-condensed > ul {
+.condensed > ul {
--wrap: wrap;
+ height: fit-content
}
-.is-style-condensed ul {
+.condensed ul {
--justify: center;
--gap: 0;
}
-.is-style-condensed li {
+.condensed li {
width: fit-content;
}
-.is-style-condensed li + li::before {
+.condensed li + li::before {
content: 'ยท';
display: block;
- padding: 0 .5em;
+ padding: 0 .25em;
}
-.is-style-condensed a {
+nav.condensed a {
text-transform: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
}
-.is-style-condensed a:hover,
-.is-style-condensed a:focus,
-.is-style-condensed a:hover:visited,
-.is-style-condensed a:focus:visited {
-
+.condensed a:hover,
+.condensed a:focus,
+.condensed a:hover:visited,
+.condensed a:focus:visited {
+ border-color: var(--action-0);
}
/**************************************************************
ADDITIONAL HEADER STUFF
@@ -518,19 +588,30 @@
left: 0;
right: 0;
height: var(--height);
+ width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .5rem;
background-color: var(--base);
- z-index: 9999;
+ z-index: var(--zz-top);
box-shadow: var(--shadow);
border-bottom: 1px solid var(--action-0);
}
+ .wp-site-blocks > header img {
+ width: var(--height);
+ }
body > header {
justify-content: space-between;
}
+/** MOVE TO NORTHEH **/
+/*header a[rel=home],*/
+/*header > img {*/
+/* position: absolute;*/
+/* width: var(--offHeight);*/
+/* left: calc(50% - (var(--offHeight) / 2));*/
+/*}*/
header .title {
--w: 5em;
margin: 0;
@@ -621,4 +702,10 @@
nav.term-navigation:has(*[hidden]) {
display: none;
+}
+ul.socials a {
+ padding: .5rem;
+}
+ul.socials a .icon {
+ margin: 0;
}
\ No newline at end of file
--
Gitblit v1.10.0