From 02d6aedbfbabaa151a5c88197b35209a45459791 Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 11:02:41 -0400 Subject: [PATCH 1/9] feat(top-nav): stub out new markup --- assets/images/gem-logo--badge.svg | 54 +++++++++++++++++++++++++++++++ default.hbs | 5 +-- partials/navbar.hbs | 17 +++++++--- partials/navigation.hbs | 9 +++--- 4 files changed, 71 insertions(+), 14 deletions(-) create mode 100644 assets/images/gem-logo--badge.svg diff --git a/assets/images/gem-logo--badge.svg b/assets/images/gem-logo--badge.svg new file mode 100644 index 0000000..4cb2179 --- /dev/null +++ b/assets/images/gem-logo--badge.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/default.hbs b/default.hbs index b1f0fd1..8175f20 100644 --- a/default.hbs +++ b/default.hbs @@ -18,10 +18,7 @@ - -
- {{> "navbar" }} -
+ {{> "navbar" }}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} diff --git a/partials/navbar.hbs b/partials/navbar.hbs index f955737..f01e53a 100644 --- a/partials/navbar.hbs +++ b/partials/navbar.hbs @@ -1,5 +1,12 @@ - \ No newline at end of file + diff --git a/partials/navigation.hbs b/partials/navigation.hbs index f6b8792..a6980f0 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,8 +1,7 @@ -{{#if isSecondary}}{{else}}{{/if}} - From 05f389e66d643ed5e09fd2128d0b4cdfebc6ca4a Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 11:04:36 -0400 Subject: [PATCH 2/9] feat(top-nav): stub out mobile styles * Add new open and close icons * Remove navigation.css in favor of header.css --- assets/images/icon__burger.svg | 13 +++ assets/images/icon__close.svg | 12 +++ src/css/app.css | 3 +- src/css/layout/header.css | 60 +++++++++++- src/css/layout/navigation.css | 163 --------------------------------- 5 files changed, 84 insertions(+), 167 deletions(-) create mode 100644 assets/images/icon__burger.svg create mode 100644 assets/images/icon__close.svg delete mode 100644 src/css/layout/navigation.css diff --git a/assets/images/icon__burger.svg b/assets/images/icon__burger.svg new file mode 100644 index 0000000..04f8674 --- /dev/null +++ b/assets/images/icon__burger.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/icon__close.svg b/assets/images/icon__close.svg new file mode 100644 index 0000000..5ead02e --- /dev/null +++ b/assets/images/icon__close.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/css/app.css b/src/css/app.css index 4684b3b..22aef02 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -13,10 +13,9 @@ /* Layout */ @import './layout/reset.css'; -@import './layout/navigation.css'; @import './layout/dropdown.css'; @import './layout/container.css'; -/* @import './layout/header.css'; */ +@import './layout/header.css'; @import './layout/footer.css'; /* Pages */ diff --git a/src/css/layout/header.css b/src/css/layout/header.css index 15b6da6..6d40603 100644 --- a/src/css/layout/header.css +++ b/src/css/layout/header.css @@ -1,3 +1,59 @@ -header { - margin-bottom: 3rem; +.navigation--top { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + .navigation__inner { + align-items: center; + display: grid; + grid-template-areas: 'logo mobile-trigger membership'; + grid-template-columns: 1fr repeat(2, max-content); + margin: auto; + max-width: var(--layout-inner-max-width); + padding: 8px 20px 8px 10px; + position: relative; + } + + .navigation__logo { + box-shadow: none; + grid-area: logo; + + img { + height: 75px; + width: 75px; + } + } + + .navigation__mobile-menu-trigger { + background-color: white; + background-repeat: no-repeat; + background-size: contain; + border: none; + cursor: pointer; + grid-area: mobile-trigger; + height: 24px; + margin-right: 20px; + width: 24px; + } + + .navigation__mobile-menu-trigger.closed { + background-image: url('/assets/images/icon__burger.svg'); + } + + .navigation__mobile-menu-trigger.open { + background-image: url('/assets/images/icon__close.svg'); + } + + .navigation__list { + display: none; + grid-area: list; + } + + .navigation__membership { + grid-area: membership; + } + + @media (min-width: 1440px) { + .navigation__mobile-menu-trigger { + display: none; + } + } } diff --git a/src/css/layout/navigation.css b/src/css/layout/navigation.css deleted file mode 100644 index f125b90..0000000 --- a/src/css/layout/navigation.css +++ /dev/null @@ -1,163 +0,0 @@ -nav { - position: relative; - padding: 1rem 1.5rem; -} - -nav ul { - display: flex; - gap: 2rem; - list-style-type: none; - font-size: var(--small); -} - -nav, -nav ul { - display: flex; - width: 100%; - align-items: center; - max-width: 1024px; - justify-content: space-between; - margin: 0 auto; -} - -nav .logo-circle { - transition: transform 0.25s ease-in-out; - flex-shrink: 0; - width: 30px; - height: 30px; - left: 20px; - top: 20px; - margin: 10px 0 0 0; - border-radius: 30px; - box-shadow: 0 9px 18px rgba(129, 0, 0, 0.3), 0 2px 5px rgba(137, 0, 0, 0.2); - background: no-repeat center 6px / 80% url(/assets/images/gem-logo.svg), - linear-gradient(to top, #df3434 0%, #fb5e55 100%); -} - -nav .logo-circle { - transform: scale(1.05); -} - -nav > ul > li:last-child > a { - background: linear-gradient(to top, #df3434 0%, #fb5e55 100%); - box-shadow: 0 15px 28px rgba(129, 0, 0, 0.2), 0 2px 5px rgba(137, 0, 0, 0.2); - padding: 10px 20px; - border-radius: 10px; - color: #fff; - font-weight: bold; -} - -nav li.subitem { - text-align: center; -} - -nav .menu-icon { - display: none; - width: 30px; - height: 20px; - margin: auto 0; - box-shadow: none; -} - -nav .menu-icon.open { - background: url(/assets/images/open-menu.svg) center no-repeat; -} - -nav .menu-icon.close { - background: url(/assets/images/close-menu.svg) center no-repeat; -} - -@media screen and (max-width: 1100px) and (orientation: portrait), -(max-width: 1005px) and (orientation: landscape) { - nav { - overflow-x: hidden; - } - - nav.closed .menu-icon.close, - nav.open .menu-icon.open { - display: none; - } - - nav.open .menu-icon.close, - nav.closed .menu-icon.open { - display: inline-block; - } - - nav.open { - overflow: visible; - } - - nav.open ul { - right: 0; - } - nav.closed ul { - right: -100%; - } - - nav ul { - position: absolute; - display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: flex-start; - top: 0; - right: 0; - width: 33%; - padding: 1rem 2rem 8rem 1.5rem; - margin: 4.5rem 0px; - z-index: 2; - background: #fff; - border: 2px solid #f4eee6; - border-top: none; - border-radius: 0 0 0 20px; - transition: right 0.4s ease-in-out; - box-shadow: -4px 4px 5px rgba(253, 204, 204, 0.3); - } - - nav ul:before { - content: ''; - position: absolute; - left: -203%; - top: 0; - border: 2px solid #f4eee6; - border-left: none; - border-bottom: none; - border-radius: 0 20px 0 0; - box-shadow: 5px 0px #fff, inset -1px 1px 3px rgba(253, 204, 204, 0.3); - height: 15px; - width: 202.5%; - } - - nav.closed ul:before { - content: none; - } - - nav > ul > li:last-child { - margin-right: 0px; - padding-right: 0px; - } -} - -@media screen and (max-width: 600px) and (orientation: portrait), -(max-width: 548px) and (orientation: landscape) { - nav ul { - width: 50%; - } - - nav ul::before { - left: -102%; - width: 101.5%; - } -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} From 24280e53dbb0c62940cb4e9fdc3e83cfcf06df8d Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 11:09:39 -0400 Subject: [PATCH 3/9] refactor(top-nav): rename partial and stylesheet --- default.hbs | 2 +- partials/{navbar.hbs => navigation-top.hbs} | 0 src/css/app.css | 2 +- src/css/layout/{header.css => navigation-top.css} | 0 4 files changed, 2 insertions(+), 2 deletions(-) rename partials/{navbar.hbs => navigation-top.hbs} (100%) rename src/css/layout/{header.css => navigation-top.css} (100%) diff --git a/default.hbs b/default.hbs index 8175f20..ce4a0c5 100644 --- a/default.hbs +++ b/default.hbs @@ -18,7 +18,7 @@ - {{> "navbar" }} + {{> "navigation-top" }}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} diff --git a/partials/navbar.hbs b/partials/navigation-top.hbs similarity index 100% rename from partials/navbar.hbs rename to partials/navigation-top.hbs diff --git a/src/css/app.css b/src/css/app.css index 22aef02..2ed7771 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -15,7 +15,7 @@ @import './layout/reset.css'; @import './layout/dropdown.css'; @import './layout/container.css'; -@import './layout/header.css'; +@import './layout/navigation-top.css'; @import './layout/footer.css'; /* Pages */ diff --git a/src/css/layout/header.css b/src/css/layout/navigation-top.css similarity index 100% rename from src/css/layout/header.css rename to src/css/layout/navigation-top.css From 2e1367c75c84f4213cd16cf59a0e8ce00e599a91 Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 11:26:43 -0400 Subject: [PATCH 4/9] feat(top-nav): stub out new nav js * Add id to mobile trigger * Remove old js --- partials/navigation-top.hbs | 2 +- src/css/layout/navigation-top.css | 2 +- src/js/app/dropdown.js | 289 ------------------------------ src/js/app/index.js | 3 +- src/js/app/navigation-top.js | 10 ++ src/js/app/responsive-nav.js | 27 --- 6 files changed, 13 insertions(+), 320 deletions(-) delete mode 100644 src/js/app/dropdown.js create mode 100644 src/js/app/navigation-top.js delete mode 100644 src/js/app/responsive-nav.js diff --git a/partials/navigation-top.hbs b/partials/navigation-top.hbs index f01e53a..f864e84 100644 --- a/partials/navigation-top.hbs +++ b/partials/navigation-top.hbs @@ -3,7 +3,7 @@ - + {{navigation}}
Membership diff --git a/src/css/layout/navigation-top.css b/src/css/layout/navigation-top.css index 6d40603..3889955 100644 --- a/src/css/layout/navigation-top.css +++ b/src/css/layout/navigation-top.css @@ -38,7 +38,7 @@ background-image: url('/assets/images/icon__burger.svg'); } - .navigation__mobile-menu-trigger.open { + .navigation__mobile-menu-trigger.opened { background-image: url('/assets/images/icon__close.svg'); } diff --git a/src/js/app/dropdown.js b/src/js/app/dropdown.js deleted file mode 100644 index f2e6fbd..0000000 --- a/src/js/app/dropdown.js +++ /dev/null @@ -1,289 +0,0 @@ -/** - * ghost-dynamic-dropdown 1.1.0 (https://github.com/themeix/ghost-dynamic-dropdown) - * A simple script for dynamic dorpdown & mega menu for Ghost Blogging Platform. - * Copyright 2022 Themeix (https://themeix.com) - * Released under MIT License - * Released on: Jul 25, 2021 - */ - -(function ($) { - "use strict"; - - function multiLevel(targetElement = "ul li", mLhasSubmenu = "mL-has-submenu", mLsubmenu = "mL-submenu") { - let mLparentDetecttext = "[-]"; - let mLchildDetectText = "[--]"; - let mLdomArrayElement = []; - let mLparentIndex = []; - let mLparentLen = 0; - - // Find Dropdown parent element - $(`${targetElement} li`).each(function (index, element) { - if ($(this).text().includes(mLparentDetecttext)) { - mLparentIndex.push(index); // Make dropdown parent array index - mLparentLen++; - - $(this).push(element); - if (!$(this).hasClass('menu-item-has-children')) { - $(this).addClass(mLhasSubmenu); // Add claas in dropdown element - } - $(this).append(`
    `); // Append submenu element - } - }); - - - - let elIndex; - // Code last multilevel - let lastMlElementText = $(`.${mLhasSubmenu}`).last().text(); - // console.log(lastMlElement); - - // Using loop to reach dropdown parent element - for (let i = 0; i < mLparentLen; i++) { - - elIndex = 0 // Initial elemet value - - // Find subitem element - $(`${targetElement} li`).each(function (index, element) { - let mLsubitem = $(this).text().includes(mLchildDetectText); // Find subitem element - - - if (mLsubitem) { - - if (elIndex + 1 >= mLparentIndex[i + 1] + 1) { // Each loop will be break - return false; //Stoped each loop - } - - if (elIndex <= mLparentIndex[i + 1] || elIndex >= mLparentIndex[mLparentIndex.length - 1]) { - - if (!mLparentIndex.includes(index)) { //Check if not index already insert - mLdomArrayElement.push(element); // Incert subitem element in dom array - mLparentIndex.push(index); // incert subitem index in indexPush array - } - } - - } - elIndex++; // increase element index value - }); - - - $(`.${mLhasSubmenu} ul.${mLsubmenu}:eq(${i})`).append(mLdomArrayElement); // Append related subitem dom element into submenu - - mLdomArrayElement = []; // Make dom array element empty. - } - - let lastMlElementIndex = 0; // Find subitem element - let lastChildIndex = 0, lastChildElementText; - - - $(`${targetElement} li`).each(function (index, element) { - let lastMlElement = $(this).text().includes(lastMlElementText); // Find subitem element - - if (lastMlElement) { - if (!$(this).hasClass('mLlastPrentElement')) { - $(this).addClass('mLlastPrentElement'); - lastChildElementText = $(this).parent().children('li').last().text(); - lastMlElementIndex = index; - } - - } - - if ($(this).text().includes(lastChildElementText)) { - lastChildIndex = index; - } - - if (lastMlElementIndex < index && lastMlElementIndex > 0) { - $(this).addClass('mLlastChildElements'); - $(".mLlastPrentElement ul").append($(`.mLlastChildElements`)); - if (lastChildIndex == index) { - return false; - } - } - }); - - remove_text(mLhasSubmenu, mLparentDetecttext); - remove_text('subitem', mLchildDetectText); - - } - - function remove_text(textClass, replacedText) { - - const mLhasSubmenuEL = $(`.${textClass}`); - mLhasSubmenuEL.each(function () { - if ($(this).find("> a:first").text().includes(replacedText)) { - let textFull = $(this).find("> a:first").text(); // Find has child inner text - $(this).find("> a:first").text(textFull.replaceAll(replacedText, "")); - } - }); - } - - - function megamenu(hasMegaMenuClasses = "menu-item-has-megamenu", col = 3, item_slice = 4, hasMegaMenuDetectText = "[has_megamenu]", submenuUlClasses = "ghost-submenu") { - let megaMenuEl = $(`.${hasMegaMenuClasses} li`); - $(`.${hasMegaMenuClasses} .${submenuUlClasses}`).addClass('row'); - let titleText = []; - let titleIndex = 0; - megaMenuEl.each(function (index, element) { - if ($(this).text().includes("[title]")) { - titleIndex++; - $(this).addClass("megamenu-title"); - titleText.push($(this).text()) - $(".megamenu-title").empty(); - } - }); - - for (let i = 0; i < megaMenuEl.length; i += item_slice) { - megaMenuEl.slice(i, i + item_slice).wrapAll(`
    `); - // console.log(titleText[i]); - // console.log(titleText); - } - - for (let i = 0; i < titleText.length; i++) { - $(`.${submenuUlClasses} > div:eq(${i})`).prepend(`
    ${titleText[i]}
    `); - $(".megamenu-title-text").text(titleText[i].replaceAll("[title]", "")); - } - remove_text(hasMegaMenuClasses, hasMegaMenuDetectText); - } - - function ghost_dropdown(options) { - - // Default options - let defultOptions = { - targetElement: "nav.ul li", - hasChildrenClasses: "menu-item-has-children", - hasChildDetectText: "[has_child]", - hasChildrenIcon: "", - hasMegaMenuDetectText: "[has_megamenu]", - hasMegaMenuClasses: "menu-item-has-megamenu", - submenuUlClasses: "ghost-submenu", - subitemDetectText: "[subitem]", - subitemLiClasses: "subitem" - } - - //Marge defaultOptions - options = { - ...defultOptions, - ...options - } - - - // Target Element - let targetElement = options.targetElement; - - //Default value - let hasChildrenClasses = options.hasChildrenClasses; - let hasChildDetectText = options.hasChildDetectText; - let hasMegaMenuClasses = options.hasMegaMenuClasses; - let hasMegaMenuDetectText = options.hasMegaMenuDetectText; - let hasChildrenIcon = options.hasChildrenIcon; - let submenuUlClasses = options.submenuUlClasses; - let subitemDetectText = options.subitemDetectText; - let subitemLiClasses = options.subitemLiClasses; - - - // Declare neccesary variable - let parentEl = $(targetElement); - let childEL = $(targetElement); - let parentLen = 0; - let domArrayElement = []; - let indexPush = []; - let elIndex = 0; - let parentIndex = []; - - $(`${targetElement}`).parent().addClass('ghost-dropdown-menu'); - - let that; - // Find Dropdown parent element - parentEl.each(function (index, element) { - if ($(this).text().indexOf(hasChildDetectText) >= 0) { - parentIndex.push(index); // Make dropdown parent array index - parentLen++; - - $(this).push(element); - $(this).addClass(hasChildrenClasses); // Add claas in dropdown element - - $(this).append(`
      `); // Append submenu element - - $(targetElement).css("opacity", "1"); - } - - if ($(this).text().includes(hasMegaMenuDetectText)) { - $(this).addClass(hasMegaMenuClasses); - that = $(this); - } - }); - - $(targetElement).css("opacity", "1"); - - $(`.${hasChildrenClasses}`).append(hasChildrenIcon); - - if(!$(hasChildrenClasses).length){ - $(targetElement).css("opacity", "1"); - } - - // Using loop to reach dropdown parent element - for (let i = 0; i < parentLen; i++) { - - elIndex = 0 // Initial elemet value - - // Find subitem element - childEL.each(function (index, element) { - let subitem = $(this).text().includes(subitemDetectText); // Find subitem element - - if (subitem) { - - if (elIndex >= parentIndex[i + 1]) { // Each loop will be break - return false; //Stoped each loop - } - - if (elIndex <= parentIndex[i + 1] || elIndex >= parentIndex[parentIndex.length - 1]) { - - if (!indexPush.includes(index)) { //Check if not index already insert - $(this).addClass(subitemLiClasses); // Add class in subitem element - let st = $(this).children().text(); // Find subitem inner text - $(this).children().text(st.replaceAll(subitemDetectText, "")); // Replace subitem inner text - - domArrayElement.push(element); // Incert subitem element in dom array - indexPush.push(index); // incert subitem index in indexPush array - - } - } - - } - elIndex++; // increase element index value - }); - - - $(`.${hasChildrenClasses} ul.${submenuUlClasses}:eq(${i})`).append(domArrayElement); // Append related subitem dom element into submenu - - domArrayElement = []; // Make dom array element empty. - - } - remove_text(hasChildrenClasses, hasChildDetectText); - - - if (options.multi_level) { - multiLevel(); - } - if (options.mega_menu) { - megamenu(hasMegaMenuClasses, 3, 4, hasMegaMenuDetectText, submenuUlClasses); - } - - - } - - $(document).ready(function () { - ghost_dropdown({ - targetElement: "ul.nav li", - hasChildrenClasses: "menu-item-has-children", - hasChildrenIcon: null, - hasChildDetectText: "[has_child]", - submenuUlClasses: "ghost-submenu", - subitemDetectText: "[subitem]", - subitemLiClasses: "subitem", - multi_level: true, - mega_menu: true - }); - }); - - -}(jQuery)); diff --git a/src/js/app/index.js b/src/js/app/index.js index 893ce9e..f3cec64 100644 --- a/src/js/app/index.js +++ b/src/js/app/index.js @@ -1,6 +1,5 @@ import "../../css/app.css" -import './dropdown.js' -import './responsive-nav.js' +import './navigation-top'; // LiveReload server if (ENV === 'development') { diff --git a/src/js/app/navigation-top.js b/src/js/app/navigation-top.js new file mode 100644 index 0000000..8ce71e1 --- /dev/null +++ b/src/js/app/navigation-top.js @@ -0,0 +1,10 @@ +const mobileTrigger = document.getElementById( + 'navigation__mobile-menu-trigger', +); + +function toggleMobileMenu() { + this.classList.toggle('closed'); + this.classList.toggle('opened'); +} + +mobileTrigger.addEventListener('click', toggleMobileMenu); diff --git a/src/js/app/responsive-nav.js b/src/js/app/responsive-nav.js deleted file mode 100644 index d3579e6..0000000 --- a/src/js/app/responsive-nav.js +++ /dev/null @@ -1,27 +0,0 @@ -(function () { - "use strict"; - - const menuIconOpen = document.getElementById('menu-icon-open'); - const menuIconClose = document.getElementById('menu-icon-close'); - const topNav = document.querySelector('nav'); - - function openNav() { - topNav.classList.add('open'); - topNav.classList.remove('closed') - } - - function closeNav() { - topNav.classList.remove('open'); - topNav.classList.add('closed') - } - - menuIconOpen.addEventListener('click', (e)=> { - e.preventDefault(); - openNav(); - }) - - menuIconClose.addEventListener('click', (e) => { - e.preventDefault(); - closeNav(); - }) -}()); From 17280d45bb9215aeebf99bfd6bf93df0185343f4 Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 13:25:02 -0400 Subject: [PATCH 5/9] feat(top-nav): add mobile dropdown and styles --- partials/navigation-top.hbs | 12 ++++- src/css/layout/navigation-top.css | 80 +++++++++++++++++++++++++++++-- src/js/app/navigation-top.js | 9 ++++ 3 files changed, 95 insertions(+), 6 deletions(-) diff --git a/partials/navigation-top.hbs b/partials/navigation-top.hbs index f864e84..a169522 100644 --- a/partials/navigation-top.hbs +++ b/partials/navigation-top.hbs @@ -3,8 +3,16 @@ - - {{navigation}} +
      + + {{navigation}} +
      Membership
      diff --git a/src/css/layout/navigation-top.css b/src/css/layout/navigation-top.css index 3889955..1afde52 100644 --- a/src/css/layout/navigation-top.css +++ b/src/css/layout/navigation-top.css @@ -4,12 +4,11 @@ .navigation__inner { align-items: center; display: grid; - grid-template-areas: 'logo mobile-trigger membership'; + grid-template-areas: 'logo trigger membership'; grid-template-columns: 1fr repeat(2, max-content); margin: auto; max-width: var(--layout-inner-max-width); padding: 8px 20px 8px 10px; - position: relative; } .navigation__logo { @@ -28,7 +27,6 @@ background-size: contain; border: none; cursor: pointer; - grid-area: mobile-trigger; height: 24px; margin-right: 20px; width: 24px; @@ -42,9 +40,78 @@ background-image: url('/assets/images/icon__close.svg'); } + .navigation__list__wrapper { + grid-area: trigger; + position: relative; + } + .navigation__list { + background-color: white; display: none; - grid-area: list; + flex-direction: column; + gap: 20px; + list-style: none; + padding: 16px 30px; + z-index: 1; + } + + .navigation__list--mobile-closed { + display: none; + } + + .navigation__list--mobile-opened { + background-color: white; + border-color: rgba(0, 0, 0, 0.1); + border-radius: 0 0 8px 8px; + border-style: solid; + border-width: 0 1px 1px 1px; + box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.04); + display: flex; + flex-direction: column; + left: 25%; + margin-top: 0; + min-width: 275px; + position: absolute; + top: 65px; + transform: translateX(-50%); + } + + .navigation__list--mobile-opened::before { + border-top: 4px solid var(--color-yellow); + content: ''; + display: block; + position: absolute; + right: calc(50% - 37.5px); + top: -3px; + width: 75px; + } + + .navigation__item { + a { + align-items: center; + box-shadow: none; + color: var(--color-navy); + display: flex; + font-family: 'Rubik', sans-serif; + font-size: 1rem; + line-height: 1.125rem; + min-height: 30px; + padding: 12px; + } + + a:hover { + background-color: var(--color-lightblue); + } + } + + .navigation__item.current { + a { + background-color: var(--color-yellow); + } + + a:hover { + background-color: var(--color-lightblue); + } } .navigation__membership { @@ -55,5 +122,10 @@ .navigation__mobile-menu-trigger { display: none; } + + .navigation__list--mobile-closed, + .navigation__list--mobile-opened { + display: none; + } } } diff --git a/src/js/app/navigation-top.js b/src/js/app/navigation-top.js index 8ce71e1..1ef2b16 100644 --- a/src/js/app/navigation-top.js +++ b/src/js/app/navigation-top.js @@ -1,10 +1,19 @@ const mobileTrigger = document.getElementById( 'navigation__mobile-menu-trigger', ); +const list = document.querySelector('.navigation--top .navigation__list'); function toggleMobileMenu() { this.classList.toggle('closed'); this.classList.toggle('opened'); + + if (this.classList.contains('closed')) { + list.classList.add('navigation__list--mobile-closed'); + list.classList.remove('navigation__list--mobile-opened'); + } else { + list.classList.remove('navigation__list--mobile-closed'); + list.classList.add('navigation__list--mobile-opened'); + } } mobileTrigger.addEventListener('click', toggleMobileMenu); From 4772831d8c96fcb115285c20ca01b3dea64e2641 Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:44:04 -0400 Subject: [PATCH 6/9] feat(.navigation-top.css): add desktop styles * Tweak mobile styles for smooth layout transition --- src/css/layout/navigation-top.css | 67 +++++++++++++++++++------------ 1 file changed, 42 insertions(+), 25 deletions(-) diff --git a/src/css/layout/navigation-top.css b/src/css/layout/navigation-top.css index 1afde52..eb9afc2 100644 --- a/src/css/layout/navigation-top.css +++ b/src/css/layout/navigation-top.css @@ -13,7 +13,9 @@ .navigation__logo { box-shadow: none; + display: flex; grid-area: logo; + max-width: fit-content; img { height: 75px; @@ -47,11 +49,22 @@ .navigation__list { background-color: white; + border-color: rgba(0, 0, 0, 0.1); + border-radius: 0 0 8px 8px; + border-style: solid; + border-width: 0 1px 1px 1px; + box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.04); display: none; flex-direction: column; gap: 20px; + left: 25%; list-style: none; + margin: 0; + min-width: 275px; padding: 16px 30px; + position: absolute; + top: 61.5px; + transform: translateX(-50%); z-index: 1; } @@ -60,20 +73,7 @@ } .navigation__list--mobile-opened { - background-color: white; - border-color: rgba(0, 0, 0, 0.1); - border-radius: 0 0 8px 8px; - border-style: solid; - border-width: 0 1px 1px 1px; - box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.04); display: flex; - flex-direction: column; - left: 25%; - margin-top: 0; - min-width: 275px; - position: absolute; - top: 65px; - transform: translateX(-50%); } .navigation__list--mobile-opened::before { @@ -104,16 +104,6 @@ } } - .navigation__item.current { - a { - background-color: var(--color-yellow); - } - - a:hover { - background-color: var(--color-lightblue); - } - } - .navigation__membership { grid-area: membership; } @@ -123,8 +113,35 @@ display: none; } - .navigation__list--mobile-closed, - .navigation__list--mobile-opened { + .navigation__inner { + grid-template-columns: max-content 1fr max-content; + padding: 0; + } + + .navigation__logo { + margin-left: -8px; + } + + .navigation__mobile-menu-trigger { + display: none; + } + + .navigation__list { + border: none; + box-shadow: none; + display: flex; + flex-direction: row; + gap: 0; + justify-self: center; + left: auto; + min-width: unset; + padding: 0; + position: relative; + top: auto; + transform: unset; + } + + .navigation__list::before { display: none; } } From c389c4edb264adf5290c7559188528ff83faddd5 Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:45:29 -0400 Subject: [PATCH 7/9] fix(buton.css): reduce padding on tablet and up --- src/css/components/button.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/css/components/button.css b/src/css/components/button.css index b5d8eb2..3a72194 100644 --- a/src/css/components/button.css +++ b/src/css/components/button.css @@ -52,7 +52,6 @@ .kg-button-card .kg-btn, .kg-button-card .kg-btn-accent { font-size: 1rem; - padding: 20px; width: fit-content; } From cda01d254e5e34410e57f3b2a962f4615b142cbe Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:45:59 -0400 Subject: [PATCH 8/9] fix(static-content.css): adjust max width and pagination styles --- src/css/components/static-content.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/css/components/static-content.css b/src/css/components/static-content.css index 340e5b3..37bd1d8 100644 --- a/src/css/components/static-content.css +++ b/src/css/components/static-content.css @@ -1,6 +1,7 @@ .static-content { width: 50%; margin: 0 auto; + max-width: var(--layout-inner-max-width); } .static-content.upcoming-conference-container { @@ -24,6 +25,11 @@ list-style-type: none; } +.pagination { + display: flex; + justify-content: space-between; +} + @media screen and (max-width: 900px) and (orientation: portrait), (max-width: 823px) and (orientation: landscape) { .static-content { From d896464c8c1e8982e31dea78c12019a822b6216c Mon Sep 17 00:00:00 2001 From: Sunjay Armstead <65554107+sarmstead@users.noreply.github.com> Date: Tue, 24 Jun 2025 08:08:55 -0400 Subject: [PATCH 9/9] refactor(navigation): remove current class * Run prettier --- partials/navigation.hbs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/partials/navigation.hbs b/partials/navigation.hbs index a6980f0..82e0ae1 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,7 +1,7 @@ -
        - {{#foreach navigation}} -
      • - {{label}} -
        • - {{/foreach}} +
          + {{#foreach navigation}} +
        • + {{label}} +
          • + {{/foreach}}