diff --git a/templates/custom/body_inner_pre.tmpl b/templates/custom/body_inner_pre.tmpl index 72a079c..b704f65 100644 --- a/templates/custom/body_inner_pre.tmpl +++ b/templates/custom/body_inner_pre.tmpl @@ -6,42 +6,43 @@ .nav-global { -webkit-font-smoothing: antialiased; - --nav-global-color-bg: hsl(213, 10%, 14%); - --nav-global-color-text: hsl(213, 5%, 64%); - --nav-global-color-text-secondary: hsl(213, 5%, 44%); - --nav-global-color-text-highlight: hsl(213, 5%, 84%); - --nav-global-color-text-hover: white; - --nav-global-color-text-active: white; + /* + *Variables come from, and match partial _variables, and are prefixed with 'bwa-'. + *Sizes must be defined in pixels as default rem-sizing might vary in projects. + */ - --nav-global-color-primary: hsl(204, 98%, 54%); - --nav-global-color-primary-bg: hsla(204, 100%, 46%, .1); + --bwa-color-bg-primary: hsl(213, 10%, 21%); + --bwa-color-bg-tertiary: hsl(213, 10%, 14%); - --nav-global-color-button-bg-hover: hsl(213, 10%, 24%); - --nav-global-color-button-text: var(--nav-global-color-text); + --bwa-color-text: hsl(213, 10%, 80%); + --bwa-color-text-primary: hsl(213, 10%, 98%); - --nav-global-color-menu-bg: var(--nav-global-color-bg); - --nav-global-color-menu-border: hsl(213, 10%, 18%); + /* Colours Components. */ + --bwa-border-color: hsla(213, 10%, 80%, .15); - --nav-global-color-menu-zindex: 1040; + --bwa-btn-color-bg-hover: hsl(213, 10%, 30%); - --nav-global-box-shadow-menu: 0px 5px 15px -2px rgba(0, 0, 0, 0.33), 0px 5px 15px -5px rgba(0, 0, 0, 0.33); - --nav-global-box-shadow-menu-item: 0px 1px 4px 0px rgba(0, 0, 0, 0.05), 0px 15px 20px -1px rgba(0, 0, 0, 0.025); + /* Colours Status. */ + --bwa-color-accent: hsl(204deg, 100%, 50%); + --bwa-color-accent-bg: hsla(204deg, 100%, 50%, .1); + --bwa-color-accent-bg-hover: hsla(204deg, 100%, 50%, .2); - --nav-global-navbar-height: var(--navbar-primary-height, 56px); + --bwa-border-radius: 6px; + --bwa-border-radius-lg: 12px; - --nav-global-spacer: 15px; - --nav-global-spacer-sm: 10px; - --nav-global-spacer-xs: 5px; + --bwa-transition-speed: 150ms; - --nav-global-border-radius: 6px; - --nav-global-border-radius-lg: 10px; + --bwa-zindex-fixed: 1030; + --bwa-zindex-dropdown: 1040; - --nav-global-button-height: 35px; - --nav-global-link-padding-x: var(--nav-global-spacer); - --nav-global-link-padding-y: var(--nav-global-spacer-sm); + /* Grid. */ + --bwa-spacer: 16px; + --bwa-spacer-1: calc(var(--bwa-spacer) * 0.25); + --bwa-spacer-2: calc(var(--bwa-spacer) * 0.5); + --bwa-spacer-3: var(--bwa-spacer); - --nav-global-font-size: 14px; - --nav-global-transition-speed: 150ms; + /* Type. */ + --bwa-fs-base: 14px; } /* Reset. */ @@ -50,8 +51,6 @@ .nav-global :not(svg|*), .nav-global *::before, .nav-global *::after { - -webkit-box-sizing: border-box; - all: unset; display: revert; box-sizing: border-box; @@ -64,14 +63,14 @@ .nav-global * { -webkit-text-size-adjust: 100%; - font-family: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-variation-settings: 'wght' 400; font-weight: normal; } .nav-global { - background-color: var(--nav-global-color-bg); - color: var(--nav-global-color-text); + background-color: var(--bwa-color-bg-tertiary); + color: var(--bwa-color-text); display: flex; position: relative; z-index: var(--zindex-fixed); @@ -102,11 +101,12 @@ .nav-global nav { align-items: center; display: flex; - line-height: var(--nav-global-font-size); - font-size: var(--nav-global-font-size); - height: var(--nav-global-navbar-height); + line-height: var(--bwa-fs-base); + font-size: var(--bwa-fs-base); + justify-content: space-between; + min-height: calc(var(--bwa-spacer) * 4); margin: 0 auto; - padding: 0 var(--nav-global-spacer); + padding: 0 var(--bwa-spacer); position: relative; } @@ -115,23 +115,34 @@ color: inherit; cursor: pointer; text-decoration: none; - transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out; + transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out; + } + + .nav-global-nav-links { + flex-grow: 1; + } + + .nav-global-nav-links a:not(.dropdown-item) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .nav-global a:not(.dropdown-item):hover { - color: var(--nav-global-color-text-hover); + color: var(--bwa-color-text-primary); } /* Navigation items. */ - .nav-global nav > ul { + .nav-global nav>ul { + flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } - .nav-global nav > ul, - .nav-global nav > ul > li, - .nav-global nav > ul > li > a, + .nav-global nav>ul, + .nav-global nav>ul>li, + .nav-global nav>ul>li>a, .nav-global-apps-dropdown-container { align-items: center; display: inline-flex; @@ -142,52 +153,70 @@ position: relative; } - .nav-global nav > ul > li > a { - padding: var(--nav-global-link-padding-y) var(--nav-global-link-padding-x); + .nav-global nav>ul>li>a { + padding: var(--bwa-spacer-2); } - .nav-global nav > a.is-active, - .nav-global nav > a.is-active svg, - .nav-global nav > ul > li > a.is-active, - .nav-global .nav-global-link-active, - .nav-global .nav-global-link-active svg { - color: var(--nav-global-color-text-active) !important; - fill: var(--nav-global-color-text-active); - font-variation-settings: 'wght' 500; + @media (min-width: 1320px) { + .nav-global nav>ul>li>a { + padding-left: var(--bwa-spacer); + padding-right: var(--bwa-spacer); + } + } + + .nav-global nav>a.is-active, + .nav-global nav>a.is-active svg, + .nav-global nav>ul>li>a.is-active { + color: var(--bwa-color-text-primary) !important; + fill: var(--bwa-color-text-primary); + font-variation-settings: 'wght', 500; + font-weight: bold; } .nav-global .nav-global-links-right { - margin-left: auto; + flex-wrap: nowrap; + gap: 0 var(--bwa-spacer-2); } /* Logo. */ .nav-global a.nav-global-logo { - margin-right: var(--nav-global-spacer); + margin-right: var(--bwa-spacer); position: relative; top: 2px; + white-space: nowrap; } .nav-global a.nav-global-logo strong { - margin-inline: var(--nav-global-spacer-sm); + margin-inline: var(--bwa-spacer-2); font-size: 18px; } - .nav-global .nav-global-logo svg { + .nav-global .nav-global-logo svg, + .nav-global .nav-global-logo img { height: 21px; + pointer-events: none; } .nav-global a.nav-global-logo svg { position: relative; - top: -4px; + top: calc(var(--bwa-spacer-1) * -1); } .nav-global svg { - fill: var(--nav-global-color-text); - transition: fill var(--nav-global-transition-speed) ease-out; + fill: var(--bwa-color-text); + transition: fill var(--bwa-transition-speed) ease-out; } .nav-global .nav-global-logo:hover svg { - fill: white; + fill: var(--bwa-color-text-primary); + } + + .nav-global .nav-global-logo.is-active, + .nav-global .nav-global-logo.is-active svg, + // TODO: make classes 'is-active' and 'nav-global-btn-active' consistent + .nav-global button.nav-global-btn-active svg { + color: var(--bwa-color-text-primary); + fill: var(--bwa-color-text-primary); } /* Apps button. */ @@ -197,43 +226,52 @@ align-items: center; background-color: transparent; - border-radius: var(--nav-global-border-radius); + border-radius: var(--bwa-border-radius); border: 0; - color: var(--nav-global-color-button-text); + color: var(--bwa-btn-color-text); cursor: pointer; display: inline-flex; font: inherit; - height: var(--nav-global-button-height); + height: calc(var(--bwa-spacer) * 2.25); margin: 0; outline: 0; overflow: visible; - padding: var(--nav-global-spacer-xs) var(--nav-global-spacer); + padding: var(--bwa-spacer-1) var(--bwa-spacer-2); text-transform: none; - transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out, transform var(--nav-global-transition-speed) ease-out; + transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out, transform var(--bwa-transition-speed) ease-out; white-space: nowrap; } + .nav-global .nav-global-btn.nav-global-btn-primary { + padding-left: var(--bwa-spacer); + padding-right: var(--bwa-spacer); + } + .nav-global button span, .nav-global .nav-global-btn span { white-space: nowrap; } .nav-global button:hover, - .nav-global .nav-global-btn:hover { - background-color: var(--nav-global-color-button-bg-hover); - color: var(--nav-global-color-text-hover); + .nav-global .nav-global-btn:hover, + .nav-global button.nav-global-btn-active, + .nav-global .nav-global-btn.nav-global-btn-active { + background-color: var(--bwa-btn-color-bg-hover); + color: var(--bwa-color-text-primary); cursor: pointer; } - .nav-global button.nav-global-btn-active, - .nav-global .nav-global-btn.nav-global-btn-active { - background-color: var(--nav-global-color-primary-bg); - color: var(--nav-global-color-primary); + .nav-global .nav-global-btn span { + margin-left: var(--bwa-spacer-2); } - .nav-global button.nav-global-btn-active svg, - .nav-global .nav-global-btn.nav-global-btn-active svg { - fill: var(--nav-global-color-primary); + .nav-global .nav-global-btn-primary { + background-color: var(--bwa-color-accent-bg); + color: var(--bwa-color-accent) !important; + } + + .nav-global .nav-global-btn-primary:hover { + background-color: var(--bwa-color-accent-bg-hover); } .nav-global .nav-global-icon { @@ -242,8 +280,12 @@ width: 20px; } - .nav-global-icon-dropdown-toggle { - margin-left: var(--nav-global-spacer-xs); + .nav-global .nav-global-icon-alt { + transform: rotate(90deg); + } + + .nav-global .dropdown-toggle.active { + color: var(--bwa-color-text-primary) } .nav-global button:hover svg, @@ -253,18 +295,18 @@ /* Apps dropdown menu. */ .nav-global .nav-global-apps-menu { - background-color: var(--nav-global-color-menu-bg); - border-radius: var(--nav-global-border-radius-lg); - border: thin solid var(--nav-global-color-menu-border); - box-shadow: var(--nav-global-box-shadow-menu); + background-color: var(--bwa-color-bg-tertiary); + border-radius: var(--bwa-border-radius-lg); + border: thin solid var(--bwa-border-color); + box-shadow: 0 var(--bwa-spacer-1) var(--bwa-spacer) -2px rgba(0, 0, 0, 0.33), 0px var(--bwa-spacer-1) var(--bwa-spacer) calc(var(--bwa-spacer-1) * -1) rgba(0, 0, 0, 0.33); display: none; - padding: var(--nav-global-spacer-sm); + padding: var(--bwa-spacer-2); position: absolute; right: 0; - top: calc(100% + 15px); + top: calc(100% + var(--bwa-spacer)); visibility: hidden; width: 640px; - z-index: var(--nav-global-color-menu-zindex); + z-index: var(--bwa-zindex-dropdown); } .nav-global .nav-global-dropdown.is-visible { @@ -273,10 +315,11 @@ } /* Tiny triangle in the corner. */ + // TODO: consider removing for consistency .nav-global .nav-global-apps-menu::before { - background-color: var(--nav-global-color-menu-bg); + background-color: var(--bwa-color-bg-tertiary); border-radius: 3px; - border: 2px var(--nav-global-color-menu-bg) solid; + border: 2px var(--bwa-color-bg-tertiary) solid; content: ''; display: block; height: .85rem; @@ -291,15 +334,15 @@ .nav-global .nav-global-apps-menu ul { border-bottom: 2px solid rgba(255, 255, 255, .05); display: grid; - gap: var(--nav-global-spacer-sm); + gap: var(--bwa-spacer-2); grid-template-columns: repeat(2, 1fr); list-style: none; - margin: 0 0 var(--nav-global-spacer-xs) 0; - padding: var(--nav-global-spacer-xs) 0 var(--nav-global-spacer-sm) 0; + margin: 0 0 var(--bwa-spacer-1) 0; + padding: var(--bwa-spacer-1) 0 var(--bwa-spacer-2) 0; } .nav-global .nav-global-apps-menu ul>li>a { - border-radius: var(--nav-global-border-radius-lg); + border-radius: var(--bwa-border-radius-lg); display: flex; flex: 1; height: 100%; @@ -307,45 +350,46 @@ .nav-global .nav-global-apps-menu ul>li>a:hover { background-color: rgba(255, 255, 255, .05); - color: var(--nav-global-color-text-active); - box-shadow: var(--nav-global-box-shadow-menu-item); + color: var(--bwa-color-text-primary); + box-shadow: 0px 1px var(--bwa-spacer-1) 0 rgba(0, 0, 0, 0.05), 0 var(--bwa-spacer) 20px -1px rgba(0, 0, 0, 0.025); } .nav-global .nav-global-apps-menu ul>li>a:hover h4, .nav-global .nav-global-apps-menu ul>li>a:hover svg { - color: var(--nav-global-color-primary); - fill: var(--nav-global-color-primary); + color: var(--bwa-color-accent); + fill: var(--bwa-color-accent); } .nav-global .nav-global-apps-menu h3 { color: white; display: inline-block; - font-size: 13px; - line-height: 18px; + font-size: 12px; + line-height: var(--bwa-spacer); margin: 0; + margin-top: 2px; opacity: .3; - padding-left: var(--nav-global-spacer); + padding-left: var(--bwa-spacer); } .nav-global .nav-global-apps-menu h4 { - color: var(--nav-global-color-text-highlight); - font-size: 17px; - line-height: 18px; - margin: var(--nav-global-spacer-xs) 0 0; - padding: var(--nav-global-spacer-sm) var(--nav-global-spacer) 0; - transition: color var(--nav-global-transition-speed) ease-out; + color: var(--bwa-color-text-primary); + font-size: 18px; + line-height: 20px; + margin: var(--bwa-spacer-1) 0 0; + padding: var(--bwa-spacer-2) var(--bwa-spacer) 0; + transition: color var(--bwa-transition-speed) ease-out; } .nav-global .nav-global-apps-menu p { - font-size: 15px; + font-size: var(--bwa-fs-base); line-height: 20px; margin: 0; opacity: .8; - padding: var(--nav-global-spacer-xs) var(--nav-global-spacer) var(--nav-global-spacer-sm); + padding: var(--bwa-spacer-1) var(--bwa-spacer) var(--bwa-spacer-2); } .nav-global .nav-global-apps-menu figure { - margin: var(--nav-global-spacer) 0 0 var(--nav-global-spacer); + margin: var(--bwa-spacer) 0 0 var(--bwa-spacer); } .nav-global .nav-global-apps-menu ul>li>a svg { @@ -362,7 +406,7 @@ .nav-global .nav-global-apps-menu-section-donate a svg { fill: hsl(352, 90%, 62%) !important; - transition: transform var(--nav-global-transition-speed) ease-out; + transition: transform var(--bwa-transition-speed) ease-out; } .nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a { @@ -382,107 +426,77 @@ color: white; } -/* Mobile. */ -.nav-global button.nav-global-logo { - display: none; - visibility: hidden; -} - -@media (max-width: 767px) { - - .nav-global-apps-dropdown-container, - .nav-global a.nav-global-logo { - display: none; - } - + /* Mobile. */ .nav-global button.nav-global-logo { - display: block; - visibility: visible; - } - - .nav-global .nav-global-nav-links { - align-items: flex-start; - background-color: var(--nav-global-color-menu-bg); - border-radius: var(--nav-global-border-radius-lg); display: none; - flex-direction: column; - left: 1rem; - padding: 0 var(--nav-global-spacer-sm); - position: absolute; - top: calc(100% + .5rem); - visibility: visible; - width: 10rem; - z-index: var(--nav-global-color-menu-zindex); + visibility: hidden; } - .nav-global .nav-global-nav-links.is-visible { - display: flex; - } - - .nav-global .nav-global-nav-links::before { - background-color: var(--nav-global-color-menu-bg); - border-radius: 3px; - border: 2px var(--nav-global-color-menu-bg) solid; - content: ''; - display: block; - height: 0.8rem; - position: absolute; - left: 1.5rem; - top: -0.133rem; - transform: rotate(45deg); - width: 1rem; - z-index: -1; - } - - .nav-global nav>ul { - height: initial; - } - - .nav-global .nav-global-nav-links>li { - border-bottom: 2px solid rgba(255, 255, 255, .05); - width: 100%; - } - - .nav-global .nav-global-nav-links>li:last-child { - border: none; - } - - .nav-global .nav-global-nav-links>li>a { - padding-inline: 0; - width: 100%; - } -} - - - @@ -491,23 +505,21 @@