From e76a40c2270908529a1a4a75809aef13ebc34c88 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 23 Dec 2025 20:11:59 +0000
Subject: [PATCH] =Legacy rebrand finished
---
navTemp.css | 858 +++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 741 insertions(+), 117 deletions(-)
diff --git a/navTemp.css b/navTemp.css
index db57cac..58233f0 100644
--- a/navTemp.css
+++ b/navTemp.css
@@ -1,128 +1,752 @@
-@media (max-width:768px){
- .mobile .nav.toggle {
- display: block;
- position: fixed;
- right: 0;
- bottom: 2rem;
- z-index: 50;
- height: 3rem;
- width: 3rem;
- border-radius: 3rem;
- background-color: var(--gray);
- padding: 0.25rem;
- transition: all var(--timing) var(--duration);
+/**********************************************************
+BASE NAV STYLES
+**********************************************************/
+nav {
+ --py: .25rem;
+ --px: 1rem;
+ max-width: 100%;
+ font-family: var(--heading);
+}
+nav,
+nav ol,
+nav ul,
+nav li,
+nav a {
+ height: var(--btn);
+ display: flex;
+ justify-content: var(--justify);
+ align-items: var(--align);
+ gap: var(--gap);
+ flex-wrap: var(--wrap);
+ 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;
+ --align: center;
+ --wrap: nowrap;
+ --w: 1em;
+ --dir: row;
+ position: relative;
+ overflow: auto hidden;
+ touch-action: pan-x;
+}
+
+nav a {
+ padding: 0 var(--px);
+ white-space: nowrap;
+ text-transform: uppercase;
+}
+nav .current a,
+nav a.current,
+nav a:hover,
+nav a:focus,
+nav a:hover:visited,
+nav a:focus:visited {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ transition: background-color var(--trans-base),
+ color var(--trans-base);
+}
+
+nav ol,
+nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/**************************************************************
+SUBMENU
+**************************************************************/
+.has-submenu button:hover,
+nav a:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.has-submenu button {
+ height: var(--btn);
+ width: var(--btn);
+ padding: 0;
+ /*background-color: var(--base);*/
+ border: 2px solid var(--base);
+ color: var(--contrast);
+ border-radius: 0;
+}
+
+.toggle .icon {
+ transform: rotate(0deg);
+ transition: transform var(--trans-t) var(--trans-fn);
+ transition-property: transform, background-color, color;
+}
+.has-submenu.open > button:not(.notifications, .quick-help) .icon,
+.has-submenu:hover > button:not(.notifications, .quick-help) .icon {
+ transform: rotate(900deg);
+}
+
+ul.submenu {
+ --dir: column;
+ --wrap: nowrap;
+ --gap: 0;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ max-height: 0;
+ transform: scaleY(0);
+ transform-origin: top;
+ width: max-content;
+ min-width: 100%;
+ 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);
+ box-shadow: var(--shdw-none);
+}
+
+.always ul.submenu {
+ position: relative;
+ top: 0;
+ left: 0;
+}
+
+.submenu li {
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ border: 1px solid var(--base-50);
+}
+.submenu li:hover {
+ --c: var(--action-rgb);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+}
+.submenu a:hover {
+ background-color: transparent;
+}
+.wp-site-blocks > header ul.submenu {
+ right: 0;
+ left: auto;
+}
+
+/**
+Opening Submenus
+ */
+.has-submenu.open > ul.submenu,
+.has-submenu:hover > ul.submenu {
+ transform: scaleY(1);
+ max-height: 1000%;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+/**************************************************************
+FIXED
+**************************************************************/
+nav.on-this-page,
+nav.fixed.bottom {
+ --dir: row;
+ --gap: 0;
+ width: calc(100% - var(--btn));
+ left: 0;
+ bottom: 0;
+ position: fixed;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ z-index: var(--z-9);
+}
+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(--txt-small);
+ padding: 0;
+}
+@media (min-width:768px) {
+ nav.fixed.bottom a:visited,
+ nav.fixed.bottom a {
+ font-size: var(--txt-medium);
}
- .mobile .nav.toggle:hover {
- box-shadow: var(--legacy-shadow-inset);
+}
+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;
+ background-color: rgba(var(--base-rgb), var(--op-6));
+}
+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(--op-1));
+}
+nav.always .submenu li {
+ background-color: rgba(var(--base-rgb),var(--op-3));
+}
+nav.fixed .has-submenu > a,
+nav.always .has-submenu > a {
+ width: 80%;
+}
+.has-submenu > button {
+ width: 20%;
+}
+/**************************************************************
+BREADCRUMBS
+**************************************************************/
+nav#breadcrumbs {
+ --height: 1.5em;
+ --w: 20px;
+ width: fit-content;
+ min-height: var(--btn);
+ max-width: var(--full);
+ position: absolute;
+ background-color: rgba(var(--base-rgb),var(--op-4));
+ font-size: var(--txt-small);
+ padding: .125em;
+ overflow:visible;
+ --gap: 0;
+ height: max-content;
+ z-index: var(--z-7);
+}
+#breadcrumbs ol {
+ --wrap: wrap;
+}
+#breadcrumbs ol,
+#breadcrumbs li,
+#breadcrumbs a,
+#breadcrumbs span {
+ height: max-content!important;
+}
+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
+**************************************************************/
+nav.always {
+ z-index: var(--z-10);
+ position: fixed;
+ width: var(--btn);
+ bottom: 0;
+ right: 0;
+}
+nav.always.open {
+ width: 100vw;
+ height: 100vh;
+ padding-bottom:var(--btn_);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ backdrop-filter: blur(5px);
+ justify-content: flex-end;
+ flex-direction: column;
+ z-index: var(--z-10);
+}
+nav.always > ul {
+ --dir: column;
+ --wrap: nowrap;
+ --justify: flex-start;
+ --align: center;
+ --gap: 0;
+ position: relative;
+ right: -300vw;
+ padding: 1rem 0 0;
+ width: 100vw;
+ height: fit-content;
+ max-height: 100%;
+ overflow:hidden auto;
+ transition: right var(--trans-base);
+}
+nav.always.open > ul {
+ right: 0;
+ transition: right var(--trans-base);
+}
+/*nav.always > ul li:hover,*/
+/*nav.always > ul li:focus-within,*/
+/*nav.always > ul li.active {*/
+/* background-color: rgba(var(--base-rgb),var(--op-6));*/
+/*}*/
+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(--btn);
+}
+
+nav.always > button {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ width: var(--btn);
+ height: var(--btn);
+ border-radius: 0;
+ background-color: var(--base);
+ color: var(--contrast);
+ transition: width var(--trans-t) var(--trans-fn);
+ transition-property: width, background-color;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+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: rgba(var(--base-rgb),var(--op-6));
+ 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 .icon-list,
+nav.always >button .icon-x {
+ transform: scale(0);
+ height: 0;
+ width: 0;
+ position: absolute;
+}
+nav.always > button .icon-list,
+nav.always.open > button .icon-x {
+ transform: scale(1);
+ height: 32px;
+ width: 32px;
+}
+nav.always .has-submenu:hover > .submenu,
+nav.always .has-submenu.open > .submenu {
+ height: max-content;
+}
+
+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);
+}
+@media (min-width: 768px) {
+ /*nav.always a {*/
+ /* padding: 2rem 0;*/
+ /*}*/
+ nav.always > ul {
+ padding: var(--btn) 0 0;
}
- nav.mobile li:hover > a {
- color: var(--white);
+}
+/**************************************************************
+ON THIS PAGE
+**************************************************************/
+nav.on-this-page {
+ --justify: space-between;
+ max-width: none;
+ z-index: var(--z-6);
+ margin: 0;
+ padding: 0 .5rem;
+ background-color: rgba(var(--base-rgb),var(--op-4));
+ color: var(--base-200);
+}
+body:has(nav.fixed) nav.on-this-page {
+ bottom: var(--btn_);
+}
+.on-this-page ul {
+ --justify: flex-start;
+ gap: 0;
+ width: 100%;
+}
+.on-this-page li:not(.has) {
+ padding: 0;
+}
+nav.letters li {
+ width: 100%;
+ max-width: calc(7.69% - 2px);
+}
+.on-this-page .active a {
+ --c: var(--action-rgb);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ color: var(--action-contrast);
+}
+
+@media (min-width: 768px) {
+ nav.letters li {
+ max-width: none;
+ width: fit-content;
}
- nav.mobile .opened > a,
- nav.mobile li.opened:hover > a,
- nav.mobile a:hover,
- nav.mobile li:hover a:hover {
- background-color: var(--pink);
- color: var(--black);
+ nav.letters a,
+ nav.letters li:not(.has) {
+ padding: .25rem .66rem;
}
- nav.mobile a {
- width: 75%;
- padding: 2rem;
- font-size: 1.1rem;
- text-align: center;
- border-radius: 0;
- }
- nav.mobile .submenu a {
- padding: 1.75rem;
- width: 100%;
- }
- nav.mobile > ul {
- position: fixed;
- background: rgb(10,10,10);
- width: 100vw;
- height: 100vh;
- transform-origin: right;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- flex-wrap: nowrap;
- transform: scaleX(0);
- visibility: hidden;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow-y: scroll;
- transition: transform var(--timing) var(--duration);
- }
- nav.mobile.open > ul {
+}
+/**************************************************************
+Table of Contents TOC
+**************************************************************/
+nav.index {
+ --justify: flex-start;
+ --px: 0;
+ background-color: rgba(var(--base-rgb),var(--op-6));
+}
+.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(--trans-t) var(--trans-fn);
+}
+.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);
- visibility: visible;
- transition: transform var(--timing) var(--duration);
- }
- nav.mobile > ul > li {
+ transform-origin: left;
width: 100%;
- flex-wrap: wrap;
+ flex-shrink: 1;
+ max-width: fit-content;
}
- nav.mobile > ul > li:hover {
- background-color: transparent;
- }
- nav.mobile > ul > li + li {
- margin: 0;
- }
+}
+.index a {
+ border-bottom: 4px solid transparent;
+}
+.index .active a {
+ 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;
+}
- nav.mobile > ul > li:hover .submenu-toggle svg {
- transform: rotate(180deg);
- color: var(--white);
- }
- nav.mobile > ul > li.opened:hover .submenu-toggle svg {
- transform: rotate(0);
- }
- nav.mobile > ul > li .submenu-toggle:hover {
- color: var(--white);
- background-color: var(--pink);
- }
- nav.mobile .submenu-toggle {
- width: 25%;
- display: flex;
- align-items: center;
- justify-content: center;
- border: 8px solid rgb(10,10,10);
- background-color: var(--black);
- padding-right: 16px;
- }
- nav.mobile .has-submenu:not(.opened):hover .submenu {
- transform: scaleY(0);
- height: 0;
- }
- nav.mobile .opened .submenu-toggle {
- background-color: var(--pink);
- color: var(--blacker);
- }
- nav.mobile .opened {
- background: var(--blacker);
- }
+.index.open {
+ --dir: column-reverse;
+ height: calc(100% - 8rem);
+ z-index: var(--z-10);
+ width: 100%;
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ backdrop-filter: blur(5px);
+ align-items: flex-end;
+}
+.index.open label {
+ max-width: 90%;
+ margin-top: 1rem;
+ margin-right: 2rem;
+}
+.index.open .toggle .icon {
+ 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(--btn);
+ transform: scaleX(1);
+ flex-shrink: 1;
+ overflow: visible;
+}
+.index.open a {
+ --justify: flex-end;
+ background-color: transparent;
+ padding: 0 2rem 0 0;
+}
+/**************************************************************
+CONDENSED
+**************************************************************/
+.condensed {
+ --dir: row;
+ --wrap: wrap;
+ --height: 1.2em;
+ --py: .25rem;
+ --px:.25rem;
+ height: fit-content;
+}
+.condensed > ul {
+ --wrap: wrap;
+ height: fit-content
+}
+.condensed ul {
+ --justify: center;
+ --gap: 0;
+}
+.condensed li {
+ width: fit-content;
+}
+.condensed li + li::before {
+ content: 'ยท';
+ display: block;
+ padding: 0 .25em;
+}
+nav.condensed a {
+ text-transform: none;
+ white-space: nowrap;
+ border-bottom: 2px solid transparent;
+}
+.condensed a:hover,
+.condensed a:focus,
+.condensed a:hover:visited,
+.condensed a:focus:visited {
+ border-color: var(--action-0);
+}
+/**************************************************************
+ADDITIONAL HEADER STUFF
+**************************************************************/
+.dashboard-nav {
+ width: 100%;
+ --dir: row;
+ --justify: flex-start;
+ --wrap: nowrap;
+}
+body > header,
+.wp-site-blocks > header {
+ --dir: row;
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: var(--btn);
+ width: 100vw;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 .5rem;
+ background-color: var(--base);
+ z-index: var(--z-9);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ border-bottom: 1px solid var(--action-0);
+}
+.wp-site-blocks > header img {
+ width: var(--btn);
+}
- nav.mobile .submenu {
- position: relative;
- height: 0;
- transform: scaleY(0);
- top: 0;
- width: 75%;
- z-index: 1;
- }
- nav.mobile .has-submenu.opened:hover .submenu,
- nav.mobile .has-submenu.opened .submenu {
- margin-bottom: 8px;
- border: 1px solid var(--pink);
- transform: scaleY(1);
- height: min-content;
- }
- nav.mobile .submenu > li {
- border: 2px solid var(--pitch);
- }
- nav.mobile .submenu > li + li {
- border-top: 4px solid var(--pitch);
- }
+body > header {
+ justify-content: space-between;
+}
+/** MOVE TO NORTHEH **/
+/*header a[rel=home],*/
+/*header > img {*/
+/* position: absolute;*/
+/* width: var(--btn_);*/
+/* left: calc(50% - (var(--btn_) / 2));*/
+/*}*/
+header .title {
+ --w: 5em;
+ margin: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ max-inline-size: none;
+}
+.current-hours {
+ position: sticky;
+ top: var(--btn);
+ bottom: unset;
+ width: unset;
+ z-index: 100;
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ padding: .25rem 1rem;
+ display: flex;
+ justify-content: space-between;
+}
+.current-hours p {
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ flex: 1;
+}
+.current-hours p + p {
+ justify-content: flex-end;
+}
+.current-hours a {
+ color: var(--action-contrast);
+}
+.current-hours a:hover {
+ color: var(--action-200);
+}
+.current-hours b {
+ margin-right: .25rem;
+}
+.find-us {
+ display: flex;
+ align-items: center;
+ gap: 0 .5rem;
+}
+.find-us p {
+}
+.find-us a {
+ display: flex;
+ padding: .25rem 1rem;
+ border: 1px solid var(--action-contrast);
+ border-radius: var(--radius);
+}
+.find-us a:hover {
+ background-color: var(--base);
+ color: var(--contrast);
+ border-color: var(--contrast);
+}
+nav.menu {
+ --justify: flex-start;
+}
+nav.menu a {
+ padding: .5rem .66rem;
+}
+
+/*************
+TABS
+*************/
+nav.tabs {
+ --gap: 0;
+ --wrap: nowrap;
+ padding-bottom: 2px;
+ z-index: var(--z-6);
+ position: fixed;
+ bottom: var(--btn);
+ left: var(--btnbtn);
+ right: var(--btnbtn);
+}
+/*@media (min-width: 768px) {*/
+/* nav.tabs {*/
+/* --wrap: wrap;*/
+/* overflow: hidden;*/
+/* }*/
+/*}*/
+
+nav.term-navigation:has(*[hidden]) {
+ display: none;
+}
+ul.socials a {
+ padding: .5rem;
+}
+ul.socials a .icon {
+ margin: 0;
+}
+
+nav.share {
+ height: max-content;
+ margin: 1rem 0;
+ --align: center;
+}
+nav.share ul {
+ overflow: visible;
+}
+nav.share h4 {
+ display: inline-block;
+ width: max-content;
+ margin: .25rem .5rem .25rem 0;
+ font-size: var(--txt-small);
+}
+nav.share .icon {
+ margin-right: 0;
+}
+nav.share .button {
+ position: relative;
+ transition: top var(--trans-base), box-shadow var(--trans-base);
+ top: 0;
+ box-shadow: var(--shdw-none);
+}
+nav.share .button:hover {
+ top: -4px;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
}
\ No newline at end of file
--
Gitblit v1.10.0