Add smooth scroll and link hooks

package-lock.json

@@ -13494,6 +13494,11 @@
       "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
       "dev": true
     },
+    "smooth-scroll": {
+      "version": "12.1.5",
+      "resolved": "https://registry.npmjs.org/smooth-scroll/-/smooth-scroll-12.1.5.tgz",
+      "integrity": "sha1-ttjeyjcant1eo60pHvD7fnQe1B4="
+    },
     "snapdragon": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.1.tgz",

package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "sanitize.css": "^4.1.0",
+    "smooth-scroll": "^12.1.5",
     "vanilla-tilt": "^1.4.1"
   }
 }

src/hbs/index.hbs

@@ -2,6 +2,7 @@
 title: 'Home'
 
 hero:
+  id: 'hero'
   header:
     upper: '#Art'
     lower: 'Project.'
@@ -14,10 +15,13 @@ hero:
   button:
     label: 'Telegram Community'
     icon: 'images/telegram-logo.svg'
-  nextSectionLink: 'Scroll Down'
+  nextSectionLink:
+    text: 'Scroll Down'
+    link: '#introduction'
   counterText: '01 - 06'
 
 introduction:
+  id: 'introduction'
   header: 'Introduction —'
   subheader: '<a class="underline" href="https://truebit.io" rel="noopener" target="_blank">TrueBit</a>, in collaboration with artist <a class="underline" href="http://www.jessicaangelarts.com" rel="noopener" target="_blank">Jessica Angel</a>, are creating an open source, massive public art installation connected to the blockchain in real time.'
   content:
@@ -29,6 +33,7 @@ introduction:
   counterText: '02 - 06'
 
 project:
+  id: 'project'
   header: 'Project —'
   subheader: 'This first art project proposes the visualization and experience of immersion inside the “dogetherium bridge”, an endeavour that TrueBit is undertaking to create a “bridge" between the Dogecoin and Ethereum blockchains.'
   content:
@@ -48,6 +53,7 @@ project:
   nextSectionLink: 'Learn more about the structure ↓'
 
 structure:
+  id: 'structure'
   header: 'Structure —'
   button:
     label: 'Floor / Elevation Plans'
@@ -62,6 +68,7 @@ structure:
   counterText: '04 - 06'
 
 team:
+  id: 'team'
   header: 'Team -'
   quote:
     text: '"Everything I do is some kind of modified borrowing from others who have been close to me either actually or virtually, and the virtual influences are amongst the most profound"'
@@ -92,6 +99,7 @@ team:
   counter: '05 - 06'
 
 getInvolved:
+  id: 'get-involved'
   header: 'Get Involved —'
   description:
   - 'We are looking to hear about your ideas, skills and passions. This project is about fostering collaborations with creators, thinkers, burners, makers, and people excited about technology and art. Get involved by communicating with the team (<a href="mailto:artproject@truebit.com">artproject@truebit.io</a>), sharing your vision and affiliation to these ideas. Anything counts as long as there is passion, rigor and commitment!'

src/hbs/partials/components/get-involved.hbs

@@ -1,4 +1,4 @@
-<section class="section get-involved">
+<section class="section get-involved" {{#if getInvolved.id}} id="{{getInvolved.id}}" {{/if}}>
   <div class="get-involved__container">
 
     {{> components/heading

src/hbs/partials/components/hero.hbs

@@ -1,4 +1,4 @@
-<section class="section hero">
+<section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}>
   <div class="hero__canvas"></div>
   <h1 class="hero__header">
     <div class="hero__header--upper">{{ hero.header.upper }}</div>
@@ -25,9 +25,9 @@
       icon=(svg hero.button.icon width="24px" height="24px")
     }}
 
-    <a href="#" class="hero__scroll">
+    <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
       {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
-      <div class="hero__scroll__text">{{ hero.nextSectionLink }}</div>
+      <div class="hero__scroll__text">{{ hero.nextSectionLink.text }}</div>
     </a>
 
   </div>

src/hbs/partials/components/introduction.hbs

@@ -1,4 +1,4 @@
-<section class="section introduction">
+<section class="section introduction" {{#if introduction.id}} id="{{introduction.id}}" {{/if}}>
   <div class="introduction__container">
 
     {{> components/heading

src/hbs/partials/components/project.hbs

@@ -1,4 +1,4 @@
-<section class="section project">
+<section class="section project" {{#if project.id}} id="{{project.id}}" {{/if}}>
 
   <div class="project__container">
 

src/hbs/partials/components/structure.hbs

@@ -1,4 +1,4 @@
-<section class="section structure">
+<section class="section structure" {{#if structure.id}} id="{{structure.id}}" {{/if}}>
   <div class="structure__container">
     <div class="structure__content">
       {{> components/heading

src/hbs/partials/components/team.hbs

@@ -1,4 +1,4 @@
-<section class="section team">
+<section class="section team" {{#if team.id}} id="{{team.id}}" {{/if}}>
   <div class="team__container">
 
     {{> components/heading

src/scripts/main.js

@@ -1,7 +1,9 @@
 import 'babel-polyfill';
 import 'vanilla-tilt';
 import nav from './nav';
+import scroll from './scroll';
 
 document.addEventListener('DOMContentLoaded', () => {
   nav();
+  scroll();
 });

src/scripts/scroll.js

@@ -0,0 +1,9 @@
+import SmoothScroll from 'smooth-scroll';
+
+export default function init() {
+  return new SmoothScroll('a[href^="#"]', {
+    speed: 700,
+    offset: 95,
+    easing: 'easeOut'
+  });
+}

src/styles/base/_settings.scss

@@ -42,5 +42,5 @@ $title-font-family: 'Rubik Mono One', sans-serif;
 //=======================
 
 $duration: .2s;
-$header-height--mobile: 80px;
+$header-height--mobile: 95px;
 $header-height--desktop: 95px;

src/styles/components/_nav.scss

@@ -68,7 +68,7 @@
     z-index: -1;
     content: attr(data-title);
     transform: translate(-50%, -50%);
-    transition: transform .7s cubic-bezier(0, 1.54, .4, 1.35);
+    transition: transform .7s cubic-bezier(0, 1.54, .4, 1.7);
   }
 
   &__link::before {