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/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/default.hbs b/default.hbs index b1f0fd1..ce4a0c5 100644 --- a/default.hbs +++ b/default.hbs @@ -18,10 +18,7 @@ - -
- {{> "navbar" }} -
+ {{> "navigation-top" }}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} diff --git a/partials/navbar.hbs b/partials/navbar.hbs deleted file mode 100644 index f955737..0000000 --- a/partials/navbar.hbs +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/partials/navigation-top.hbs b/partials/navigation-top.hbs new file mode 100644 index 0000000..a169522 --- /dev/null +++ b/partials/navigation-top.hbs @@ -0,0 +1,20 @@ + diff --git a/partials/navigation.hbs b/partials/navigation.hbs index f6b8792..82e0ae1 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,8 +1,7 @@ -{{#if isSecondary}}{{else}}{{/if}} - \ No newline at end of file + diff --git a/src/css/app.css b/src/css/app.css index 4684b3b..2ed7771 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/navigation-top.css'; @import './layout/footer.css'; /* Pages */ 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; } 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 { diff --git a/src/css/layout/header.css b/src/css/layout/header.css deleted file mode 100644 index 15b6da6..0000000 --- a/src/css/layout/header.css +++ /dev/null @@ -1,3 +0,0 @@ -header { - margin-bottom: 3rem; -} diff --git a/src/css/layout/navigation-top.css b/src/css/layout/navigation-top.css new file mode 100644 index 0000000..eb9afc2 --- /dev/null +++ b/src/css/layout/navigation-top.css @@ -0,0 +1,148 @@ +.navigation--top { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + .navigation__inner { + align-items: center; + display: grid; + 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; + } + + .navigation__logo { + box-shadow: none; + display: flex; + grid-area: logo; + max-width: fit-content; + + img { + height: 75px; + width: 75px; + } + } + + .navigation__mobile-menu-trigger { + background-color: white; + background-repeat: no-repeat; + background-size: contain; + border: none; + cursor: pointer; + height: 24px; + margin-right: 20px; + width: 24px; + } + + .navigation__mobile-menu-trigger.closed { + background-image: url('/assets/images/icon__burger.svg'); + } + + .navigation__mobile-menu-trigger.opened { + background-image: url('/assets/images/icon__close.svg'); + } + + .navigation__list__wrapper { + grid-area: trigger; + position: relative; + } + + .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; + } + + .navigation__list--mobile-closed { + display: none; + } + + .navigation__list--mobile-opened { + display: flex; + } + + .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__membership { + grid-area: membership; + } + + @media (min-width: 1440px) { + .navigation__mobile-menu-trigger { + display: none; + } + + .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; + } + } +} 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; -} 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..1ef2b16 --- /dev/null +++ b/src/js/app/navigation-top.js @@ -0,0 +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); 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(); - }) -}());