From fcd6e159ee09cc4bbe99bbbadc61a6e83b24b5bf Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 20 Oct 2025 18:01:49 +0000
Subject: [PATCH] =Update Styles from northeh
---
nav.css | 503 ++++++++++++++++++++++++++++---------------------------
1 files changed, 254 insertions(+), 249 deletions(-)
diff --git a/nav.css b/nav.css
index c001d87..ca9ebb7 100644
--- a/nav.css
+++ b/nav.css
@@ -100,21 +100,21 @@
transition: all var(--timing) var(--function);
box-shadow: var(--shadow-none);
}
- .submenu li {
- background-color: var(--overlay-heavy);
- border: 1px solid var(--base-50);
- }
- .submenu li:hover {
- --c: var(--action-rgb);
- background-color: var(--overlay-heavy);
- }
- .submenu a:hover {
- background-color: transparent;
- }
- .wp-site-blocks > header ul.submenu {
- right: 0;
- left: auto;
- }
+.submenu li {
+ background-color: var(--overlay-heavy);
+ border: 1px solid var(--base-50);
+}
+.submenu li:hover {
+ --c: var(--action-rgb);
+ background-color: var(--overlay-heavy);
+}
+.submenu a:hover {
+ background-color: transparent;
+}
+.wp-site-blocks > header ul.submenu {
+ right: 0;
+ left: auto;
+}
/**
Opening Submenus
@@ -129,7 +129,7 @@
BREADCRUMBS
**************************************************************/
nav#breadcrumbs {
- --height: fit-content;
+ --height: 1.5em;
--w: 20px;
width: fit-content;
max-width: var(--full);
@@ -140,37 +140,37 @@
overflow:visible;
--gap: 0;
}
- nav#breadcrumbs li + li::before {
- content: '/';
- color: var(--contrast-200);
- }
- nav#breadcrumbs li:last-of-type {
- margin-right: .5em;
- }
- nav#breadcrumbs span,
- nav#breadcrumbs a {
- padding: 0 .125rem;
- white-space: nowrap;
- height: 2em;
- color: var(--contrast);
- text-transform: none;
- width: max-content;
- }
- nav#breadcrumbs span {
- display: flex;
- align-items: center;
- padding-left: .5em;
- }
- nav#breadcrumbs a:focus:visited,
- nav#breadcrumbs a:hover:visited,
- nav#breadcrumbs a:focus,
- nav#breadcrumbs a:hover {
- background-color: transparent;
- color: var(--action-0);
- }
- nav#breadcrumbs a:has(.icon) {
- width: 2rem;
- }
+nav#breadcrumbs li + li::before {
+ content: '/';
+ color: var(--contrast-200);
+}
+nav#breadcrumbs li:last-of-type {
+ margin-right: .5em;
+}
+nav#breadcrumbs span,
+nav#breadcrumbs a {
+ padding: 0 .125rem;
+ white-space: nowrap;
+ height: 2em;
+ color: var(--contrast);
+ text-transform: none;
+ width: max-content;
+}
+nav#breadcrumbs span {
+ display: flex;
+ align-items: center;
+ padding-left: .5em;
+}
+nav#breadcrumbs a:focus:visited,
+nav#breadcrumbs a:hover:visited,
+nav#breadcrumbs a:focus,
+nav#breadcrumbs a:hover {
+ background-color: transparent;
+ color: var(--action-0);
+}
+nav#breadcrumbs a:has(.icon) {
+ width: 2rem;
+}
/**************************************************************
MOBILE
**************************************************************/
@@ -181,106 +181,106 @@
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(--height);*/
+/* background-color: var(--overlay-heavy);*/
+/* backdrop-filter: blur(5px);*/
+/* z-index: 999999;*/
+/*}*/
+nav.always > ul {
+ --dir: column;
+ --wrap: nowrap;
+ --justify: flex-end;
+ --align: center;
+ position: fixed;
+ background-color: var(--overlay-heavy);
+ backdrop-filter: blur(5px);
+ z-index: var(--zz-top);
+ top: 0;
+ right: -300vw;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: hidden auto;
+ transition: right var(--timing) var(--function);
+}
+@media (min-width: 768px) {
nav.always > ul {
- --dir: column;
- --wrap: nowrap;
- --justify: flex-end;
- --align: center;
- position: fixed;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- z-index: var(--zz-top);
- top: 0;
- right: -300vw;
- padding: 0;
- width: 100%;
- height: 100vh;
- overflow: hidden auto;
- transition: right var(--timing) var(--function);
+ --justify: flex-start;
}
- @media (min-width: 768px) {
- nav.always > ul {
- --justify: flex-start;
- }
- }
- nav.always.open > ul {
- width: 100%;
- right: 0;
- gap: 0;
- }
- nav.always > ul li:hover,
- nav.always > ul li:focus-within,
- nav.always > ul li.active {
- background-color: var(--overlay-heavy);
- }
- nav.always li {
- width: 100%;
- height: fit-content;
- }
- nav.always a {
- --py: 1rem;
- width: 100%;
- }
+}
+nav.always.open > ul {
+ width: 100%;
+ right: 0;
+ gap: 0;
+}
+nav.always > ul li:hover,
+nav.always > ul li:focus-within,
+nav.always > ul li.active {
+ background-color: var(--overlay-heavy);
+}
+nav.always li {
+ width: 100%;
+ height: fit-content;
+}
+nav.always a {
+ --py: 1rem;
+ width: 100%;
+}
- nav.always > button {
- position: fixed;
- bottom: 0;
- right: 0;
- width: var(--height);
- height: var(--height);
- border-radius: 0;
- background-color: var(--base);
- color: var(--contrast);
- transition: width var(--timing) var(--function);
- transition-property: width, background-color;
- box-shadow: var(--shadow);
+nav.always > button {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ width: var(--height);
+ height: var(--height);
+ border-radius: 0;
+ background-color: var(--base);
+ color: var(--contrast);
+ transition: width var(--timing) var(--function);
+ transition-property: width, background-color;
+ box-shadow: var(--shadow);
+}
+nav.always > button:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+nav.always.open > button {
+ --c: var(--action-rgb);
+ z-index: 1000000;
+ width: 100%;
+ background-color: var(--overlay-heavy);
+ color: var(--contrast);
+ backdrop-filter: blur(5px);
+}
+nav.always.open > button:hover,
+nav.always.open > button:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+nav.always.open > button .list,
+nav.always >button .x {
+ transform: scale(0);
+ height: 0;
+ width: 0;
+ position: absolute;
+}
+nav.always > button .list,
+nav.always.open > button .x {
+ transform: scale(1);
+ height: 32px;
+ width: 32px;
+}
+@media (min-width: 768px) {
+ nav.always a {
+ padding: 2rem 0;
}
- nav.always > button:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
- }
- nav.always.open > button {
- --c: var(--action-rgb);
- z-index: 1000000;
- width: 100%;
- background-color: var(--overlay-heavy);
- color: var(--contrast);
- backdrop-filter: blur(5px);
- }
- nav.always.open > button:hover,
- nav.always.open > button:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
- }
- nav.always.open > button .list,
- nav.always >button .x {
- transform: scale(0);
- height: 0;
- width: 0;
- position: absolute;
- }
- nav.always > button .list,
- nav.always.open > button .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 > ul {
+ padding: var(--height) 0;
+ }
+}
/**************************************************************
FIXED
**************************************************************/
@@ -312,12 +312,12 @@
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 {
- color: var(--action-contrast);
- }
+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;
}
@@ -377,25 +377,25 @@
--px: 0;
background-color: var(--overlay-heavy);
}
- .index ul {
- --justify: flex-start;
- width: fit-content;
- }
- .index li {
- flex-shrink: 0;
- transform: scaleX(0);
- transform-origin: right;
- max-width: 0;
- overflow: hidden;
- transition: transform var(--timing) var(--function);
- }
- .index li.active {
- transform: scaleX(1);
- transform-origin: left;
- width: 100%;
- flex-shrink: 1;
- max-width: fit-content;
- }
+.index ul {
+ --justify: flex-start;
+ width: fit-content;
+}
+.index li {
+ flex-shrink: 0;
+ transform: scaleX(0);
+ transform-origin: right;
+ max-width: 0;
+ overflow: hidden;
+ transition: transform var(--timing) var(--function);
+}
+.index li.active {
+ transform: scaleX(1);
+ transform-origin: left;
+ width: 100%;
+ flex-shrink: 1;
+ max-width: fit-content;
+}
@media (min-width: 768px ){
.index li.adj {
transform: scaleX(1);
@@ -412,95 +412,95 @@
border-color: var(--action-0);
color: var(--contrast);
}
- .index a:hover,
- .index .active a:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
- }
- .index label {
- display: flex;
- color: var(--contrast);
- align-items: center;
- margin: 0;
- }
- .index label button {
- margin-left: 1em;
- }
+.index a:hover,
+.index .active a:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.index label {
+ display: flex;
+ color: var(--contrast);
+ align-items: center;
+ margin: 0;
+}
+.index label button {
+ margin-left: 1em;
+}
- .index.open {
- --dir: column-reverse;
- height: calc(100% - 8rem);
- z-index: 99999999;
- width: 100%;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- align-items: flex-end;
- }
- .index.open label {
- max-width: 90%;
- margin-top: 1rem;
- margin-right: 2rem;
- }
- .index.open .toggle svg {
- transform: rotate(45deg);
- }
- .index.open ul {
- --dir: column;
- --justify: flex-end;
- height: 100%;
- max-width: 100%;
- width: 100%;
- }
- .index.open li {
- background-color: transparent;
- max-width: 100%!important;
- width: 100%;
- height: var(--height);
- transform: scaleX(1);
- flex-shrink: 1;
- overflow: visible;
- }
- .index.open a {
- --justify: flex-end;
- background-color: transparent;
- padding: 0 2rem 0 0;
- }
+.index.open {
+ --dir: column-reverse;
+ height: calc(100% - 8rem);
+ z-index: 99999999;
+ width: 100%;
+ background-color: var(--overlay-heavy);
+ backdrop-filter: blur(5px);
+ align-items: flex-end;
+}
+.index.open label {
+ max-width: 90%;
+ margin-top: 1rem;
+ margin-right: 2rem;
+}
+.index.open .toggle svg {
+ transform: rotate(45deg);
+}
+.index.open ul {
+ --dir: column;
+ --justify: flex-end;
+ height: 100%;
+ max-width: 100%;
+ width: 100%;
+}
+.index.open li {
+ background-color: transparent;
+ max-width: 100%!important;
+ width: 100%;
+ height: var(--height);
+ transform: scaleX(1);
+ flex-shrink: 1;
+ overflow: visible;
+}
+.index.open a {
+ --justify: flex-end;
+ background-color: transparent;
+ padding: 0 2rem 0 0;
+}
/**************************************************************
CONDENSED
**************************************************************/
.is-style-condensed {
--dir: row;
--wrap: wrap;
- --height: fit-content;
+ --height: 1.2em;
--py: .2rem;
--px: 1rem;
}
- .is-style-condensed > ul {
- --wrap: wrap;
- }
- .is-style-condensed ul {
- --justify: center;
- --gap: 0;
- }
- .is-style-condensed li {
- width: fit-content;
- }
- .is-style-condensed li + li::before {
- content: '·';
- display: block;
- padding: 0 .5em;
- }
- .is-style-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 {
+.is-style-condensed > ul {
+ --wrap: wrap;
+}
+.is-style-condensed ul {
+ --justify: center;
+ --gap: 0;
+}
+.is-style-condensed li {
+ width: fit-content;
+}
+.is-style-condensed li + li::before {
+ content: '·';
+ display: block;
+ padding: 0 .5em;
+}
+.is-style-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 {
- }
+}
/**************************************************************
ADDITIONAL HEADER STUFF
**************************************************************/
@@ -529,7 +529,7 @@
}
body > header {
- justify-content: flex-end;
+ justify-content: space-between;
}
header .title {
--w: 5em;
@@ -540,10 +540,13 @@
display: flex;
justify-content: center;
align-items: flex-start;
+ max-inline-size: none;
}
.current-hours {
position: sticky;
top: var(--height);
+ bottom: unset;
+ width: unset;
z-index: 100;
background-color: var(--action-0);
color: var(--action-contrast);
@@ -591,7 +594,6 @@
}
nav.menu {
--justify: flex-start;
- --height: fit-content;
}
nav.menu a {
padding: .5rem .66rem;
@@ -602,10 +604,13 @@
*************/
nav.tabs {
--gap: 0;
- --height: fit-content;
--wrap: nowrap;
padding-bottom: 2px;
z-index: var(--z-6);
+ position: fixed;
+ bottom: var(--height);
+ left: var(--doubleHeight);
+ right: var(--doubleHeight);
}
/*@media (min-width: 768px) {*/
/* nav.tabs {*/
--
Gitblit v1.10.0