diff --git a/src/hbs/index.hbs b/src/hbs/index.hbs index ab1947e..694e6e1 100644 --- a/src/hbs/index.hbs +++ b/src/hbs/index.hbs @@ -29,7 +29,9 @@ introduction: - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.' button: label: 'Signup for newsletter' - nextSectionLink: 'Learn more about the project ↓' + nextSectionLink: + text: 'Learn more about the project ↓' + link: '#project' counterText: '02 - 06' project: @@ -50,7 +52,9 @@ project: icon: 'images/file.svg' counterText: '03 - 06' - nextSectionLink: 'Learn more about the structure ↓' + nextSectionLink: + text: 'Learn more about the structure ↓' + link: '#structure' structure: id: 'structure' @@ -64,7 +68,9 @@ structure: - 'The Mobius strip leads to the construction of a very interesting solid called the Klein Bottle. Imagine connecting the sides of a paper ring to come up with a donut shape. Similarly, imagine connecting the sides of a Mobius strip, you would end up with a Klein bottle.' lower: - 'The Klein bottle shares the same characteristics as the Mobius strip of having a unified surface. In addition, the Klein bottle provides an enclosed environment perfect for the development of a public programming schedule to take place inside of it. Hence, The public art structure will be a penetrable Klein bottle that symbolizes the bridge between the Dogecoin and Ethereum blockchains, connecting the outer side with the inner surface through the bottleneck pass way.' - nextSectionLink: 'Learn more about the team ↓' + nextSectionLink: + text: 'Learn more about the team ↓' + link: '#team' counterText: '04 - 06' team: @@ -95,7 +101,9 @@ team: name: 'Aqeel Mohammad' image: '' - nextSectionLink: 'Learn more about getting involved ↓' + nextSectionLink: + text: 'Learn more about getting involved ↓' + link: '#get-involved' counter: '05 - 06' getInvolved: @@ -123,7 +131,9 @@ getInvolved: - 'Art DAO' - 'Network Topology' - 'Art and culture in the blockchain space' - nextSectionLink: 'Learn more about our process →' + nextSectionLink: + text: 'Learn more about our process →' + link: '#' counterText: '06 - 06' --- diff --git a/src/hbs/partials/components/get-involved.hbs b/src/hbs/partials/components/get-involved.hbs index f02c8ed..06e1de5 100644 --- a/src/hbs/partials/components/get-involved.hbs +++ b/src/hbs/partials/components/get-involved.hbs @@ -43,7 +43,7 @@ {{> components/next-section-link class="get-involved__link" - name=getInvolved.nextSectionLink + nextSection=getInvolved.nextSectionLink }} diff --git a/src/hbs/partials/components/header.hbs b/src/hbs/partials/components/header.hbs index 918c1d6..0c84d0e 100644 --- a/src/hbs/partials/components/header.hbs +++ b/src/hbs/partials/components/header.hbs @@ -1,11 +1,11 @@ -
+
- {{> components/nav parentRouteName=parentRouteName}} + {{> components/nav}} {{> components/burger-button class="header__btn"}}
diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs index ee5eb56..773025b 100644 --- a/src/hbs/partials/components/introduction.hbs +++ b/src/hbs/partials/components/introduction.hbs @@ -37,7 +37,7 @@ {{> components/next-section-link class="introduction__link" - name=introduction.nextSectionLink + nextSection=introduction.nextSectionLink }} diff --git a/src/hbs/partials/components/next-section-link.hbs b/src/hbs/partials/components/next-section-link.hbs index 0cb4a8a..8e9d3ed 100644 --- a/src/hbs/partials/components/next-section-link.hbs +++ b/src/hbs/partials/components/next-section-link.hbs @@ -1,3 +1,3 @@ - - {{ name }} + + {{ nextSection.text }} diff --git a/src/hbs/partials/components/project.hbs b/src/hbs/partials/components/project.hbs index 43ed3c9..f96333b 100644 --- a/src/hbs/partials/components/project.hbs +++ b/src/hbs/partials/components/project.hbs @@ -36,7 +36,7 @@ {{> components/next-section-link class="project__link" - name=project.nextSectionLink + nextSection=project.nextSectionLink }} diff --git a/src/hbs/partials/components/structure.hbs b/src/hbs/partials/components/structure.hbs index d643fe0..63bade8 100644 --- a/src/hbs/partials/components/structure.hbs +++ b/src/hbs/partials/components/structure.hbs @@ -36,7 +36,7 @@ {{> components/next-section-link class="structure__link" - name=structure.nextSectionLink + nextSection=structure.nextSectionLink }} diff --git a/src/hbs/partials/components/team.hbs b/src/hbs/partials/components/team.hbs index 8e766a5..eaabc99 100644 --- a/src/hbs/partials/components/team.hbs +++ b/src/hbs/partials/components/team.hbs @@ -30,7 +30,7 @@ {{> components/next-section-link class="team__link" - name=team.nextSectionLink + nextSection=team.nextSectionLink }} diff --git a/src/scripts/scroll.js b/src/scripts/scroll.js index a9b175e..8a5499a 100644 --- a/src/scripts/scroll.js +++ b/src/scripts/scroll.js @@ -1,9 +1,47 @@ import SmoothScroll from 'smooth-scroll'; -export default function init() { - return new SmoothScroll('a[href^="#"]', { - speed: 700, - offset: 95, - easing: 'easeOut' +const LINKS_SELECTOR = 'a[href^="#"]'; +const SECTION_SELECTOR = '.section'; +const HEADER_SELECTOR = '.js-scroll-header'; +const ACTIVE_CLASS = 'active'; + +function setActiveClassNames() { + const $links = document.querySelectorAll(LINKS_SELECTOR); + const currentHash = location.hash; + + $links.forEach(($link) => { + if ($link.hash === currentHash) { + $link.classList.add(ACTIVE_CLASS); + } else { + $link.classList.remove(ACTIVE_CLASS); + } + }); +} + +function listenForActiveSection() { + const $sections = document.querySelectorAll(SECTION_SELECTOR); + const $header = document.querySelector(HEADER_SELECTOR); + + document.addEventListener('scroll', () => { + const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; + const $sectionsArray = [...$sections]; + const $activeSections = $sectionsArray.filter(($section) => { + return $section.offsetTop <= scrollPosition + $header.offsetHeight; + }); + + const $activeSection = $activeSections[$activeSections.length - 1]; + + history.pushState(undefined, undefined, `#${$activeSection.id}`); + }); +} + +export default function init() { + listenForActiveSection(); + + return new SmoothScroll(LINKS_SELECTOR, { + header: HEADER_SELECTOR, + speed: 500, + easing: 'easeInOutQuad', + before: setActiveClassNames }); } diff --git a/src/styles/base/_settings.scss b/src/styles/base/_settings.scss index e5b97f2..125aab4 100644 --- a/src/styles/base/_settings.scss +++ b/src/styles/base/_settings.scss @@ -42,5 +42,5 @@ $title-font-family: 'Rubik Mono One', sans-serif; //======================= $duration: .2s; -$header-height--mobile: 95px; +$header-height--mobile: 80px; $header-height--desktop: 95px; diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss index a95cb7e..3a6ba42 100644 --- a/src/styles/components/_nav.scss +++ b/src/styles/components/_nav.scss @@ -79,13 +79,15 @@ color: $color-blue; } - &__link:hover::before { + &__link:hover::before, + &__link.active::before { $transform-val: calc(-50% - #{$anim-size}); transform: translate($transform-val, $transform-val); } - &__link:hover::after { + &__link:hover::after, + &__link.active::after { $transform-val: calc(-50% + #{$anim-size}); transform: translate($transform-val, $transform-val); diff --git a/src/styles/components/_structure.scss b/src/styles/components/_structure.scss index 643247b..8110d8c 100644 --- a/src/styles/components/_structure.scss +++ b/src/styles/components/_structure.scss @@ -1,7 +1,7 @@ .structure { display: flex; align-items: center; - margin-top: 10px; + padding-top: 10px; color: $color-scarlet; background-color: $color-white; @@ -88,6 +88,6 @@ } @media #{$screen-sm} { - margin-top: 30px; + padding-top: 30px; } }