From 7914529aa38bb56d3d214ee46523c45a274ff65a Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Wed, 17 Jan 2018 23:26:55 +0100
Subject: [PATCH 1/4] Add reveal for headers, buttons and profiles

---
 src/hbs/partials/components/button.hbs       | 21 ++++++----
 src/hbs/partials/components/get-involved.hbs |  2 +
 src/hbs/partials/components/heading.hbs      |  9 +++-
 src/hbs/partials/components/hero.hbs         |  1 +
 src/hbs/partials/components/introduction.hbs |  2 +
 src/hbs/partials/components/profile.hbs      | 13 ++++--
 src/hbs/partials/components/structure.hbs    |  2 +
 src/hbs/partials/components/team.hbs         |  1 +
 src/scripts/canvas.js                        | 44 ++++++++++----------
 src/styles/base/_common.scss                 | 12 ++++++
 src/styles/components/_profile.scss          |  2 +-
 11 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/src/hbs/partials/components/button.hbs b/src/hbs/partials/components/button.hbs
index 92169bd..ef0fa9c 100644
--- a/src/hbs/partials/components/button.hbs
+++ b/src/hbs/partials/components/button.hbs
@@ -1,16 +1,19 @@
 <{{#if href}}a href={{href}} rel="noopener" target="_blank"{{else}}button{{/if}}
   class="button {{ class }}"
 >
-  <div
-    class="button__wrapper js-parallax {{ternary blackBgHover "button__wrapper--black" ""}}"
+  <div class="js-reveal-block {{ternary orangeReveal "js-reveal-orange" ""}} js-parallax"
     data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
-    style="{{#if backgroundColor }} background-color: {{ backgroundColor }}; {{/if}}"
   >
-    {{#if icon}}
-      <div class="button__icon">
-        {{icon}}
-      </div>
-    {{/if}}
-    <span class="button__text">{{label}}</span>
+    <div
+      class="button__wrapper {{ternary blackBgHover "button__wrapper--black" ""}}"
+      style="{{#if backgroundColor }} background-color: {{ backgroundColor }}; {{/if}}"
+    >
+      {{#if icon}}
+        <div class="button__icon">
+          {{icon}}
+        </div>
+      {{/if}}
+      <span class="button__text">{{label}}</span>
+    </div>
   </div>
 </{{#if href}}a{{else}}button{{/if}}>
diff --git a/src/hbs/partials/components/get-involved.hbs b/src/hbs/partials/components/get-involved.hbs
index 917f4ec..a66dc28 100644
--- a/src/hbs/partials/components/get-involved.hbs
+++ b/src/hbs/partials/components/get-involved.hbs
@@ -3,6 +3,7 @@
 
     {{> components/heading
       text=getInvolved.header
+      orangeReveal=true
       class="get-involved__header"
     }}
 
@@ -15,6 +16,7 @@
         <div class="get-involved__buttons">
           {{#each getInvolved.buttons as |button|}}
             {{> components/button
+              orangeReveal=true
               class="get-involved__button"
               label=button.label
               icon=(svg button.icon)
diff --git a/src/hbs/partials/components/heading.hbs b/src/hbs/partials/components/heading.hbs
index bef3917..14356ef 100644
--- a/src/hbs/partials/components/heading.hbs
+++ b/src/hbs/partials/components/heading.hbs
@@ -1,5 +1,10 @@
 <h2 class="heading {{class}}">
-  <div class="js-parallax" data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}">
-    {{text}}
+  <div
+    class="js-parallax"
+    data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
+  >
+    <span class="js-reveal-block {{ternary orangeReveal "js-reveal-orange" ""}}">
+      <span>{{text}}</span>
+    </span>
   </div>
 </h2>
diff --git a/src/hbs/partials/components/hero.hbs b/src/hbs/partials/components/hero.hbs
index db5a138..22320f8 100644
--- a/src/hbs/partials/components/hero.hbs
+++ b/src/hbs/partials/components/hero.hbs
@@ -30,6 +30,7 @@
 
     {{> components/button
       label=hero.button.label
+      orangeReveal=true
       class="hero__button"
       icon=(svg hero.button.icon width="24px" height="24px")
     }}
diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs
index 9bd11a0..ab804ac 100644
--- a/src/hbs/partials/components/introduction.hbs
+++ b/src/hbs/partials/components/introduction.hbs
@@ -3,6 +3,7 @@
 
     {{> components/heading
       text=introduction.header
+      orangeReveal=true
       class="introduction__header"
       rellax-speed="0.7"
     }}
@@ -33,6 +34,7 @@
       <div class="introduction__button">
         {{> components/button
           label=introduction.button.label
+          orangeReveal=true
           backgroundColor="#000"
           rellax-speed="0.5"
         }}
diff --git a/src/hbs/partials/components/profile.hbs b/src/hbs/partials/components/profile.hbs
index 50b72f5..f2e9c1f 100644
--- a/src/hbs/partials/components/profile.hbs
+++ b/src/hbs/partials/components/profile.hbs
@@ -1,21 +1,26 @@
 <div class="profile {{ class }}">
   <div class="profile__container">
     <figure
-      class="profile__image-wrapper js-parallax js-profile"
+      class="profile__image-wrapper js-parallax js-profile js-reveal-block"
       data-rellax-speed="{{ternary profile.parallax.image profile.parallax.image 0}}"
     >
       <div class="profile__image" style="background-image: url('{{ profile.image }}')">
-        <div class="profile__cover"></div>
       </div>
     </figure>
 
     <div class="profile__detail profile__detail--index-{{ index }}">
       <div class="js-parallax" data-rellax-speed="{{ternary profile.parallax.description profile.parallax.description 0}}">
         <h6 class="profile__location">
-          {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}
+          <span class="js-reveal-block js-reveal-orange">
+            <span>{{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}</span>
+          </span>
         </h6>
 
-        <h3 class="profile__name">{{new-line profile.name }}</h3>
+        <h3 class="profile__name">
+          <span class="inline-block js-reveal-block js-reveal-orange">
+            <span>{{new-line profile.name }}</span>
+          </span>
+        </h3>
       </div>
     </div>
   </div>
diff --git a/src/hbs/partials/components/structure.hbs b/src/hbs/partials/components/structure.hbs
index f8da903..3179e6e 100644
--- a/src/hbs/partials/components/structure.hbs
+++ b/src/hbs/partials/components/structure.hbs
@@ -4,6 +4,7 @@
       {{> components/heading
         rellax-speed="-1.2"
         text=structure.header
+        orangeReveal=true
         class="structure__header"
       }}
 
@@ -13,6 +14,7 @@
         label=structure.button.label
         class="structure__button"
         backgroundColor="#000"
+        orangeReveal=true
         rellax-speed="-0.4"
         icon=(svg structure.button.icon)
       }}
diff --git a/src/hbs/partials/components/team.hbs b/src/hbs/partials/components/team.hbs
index b93565b..000823d 100644
--- a/src/hbs/partials/components/team.hbs
+++ b/src/hbs/partials/components/team.hbs
@@ -7,6 +7,7 @@
 
     {{> components/heading
       text=team.header
+      orangeReveal=true
       class="team__header"
       rellax-speed="-0.5"
     }}
diff --git a/src/scripts/canvas.js b/src/scripts/canvas.js
index b610c4e..6da9f47 100644
--- a/src/scripts/canvas.js
+++ b/src/scripts/canvas.js
@@ -1,24 +1,24 @@
-class Canvas {
-  constructor() {
-    this.connect = new CABLES.Patch({
-      patchFile: 'assets/connect.json',
-      prefixAssetPath: '',
-      glCanvasId: 'connect',
-      glCanvasResizeToWindow: true,
-      silent: true
-    });
+// class Canvas {
+//   constructor() {
+//     this.connect = new CABLES.Patch({
+//       patchFile: 'assets/connect.json',
+//       prefixAssetPath: '',
+//       glCanvasId: 'connect',
+//       glCanvasResizeToWindow: true,
+//       silent: true
+//     });
 
-    CABLES.EMBED.addPatch(
-      'klein',
-      {
-        patchFile: 'assets/klein.json',
-        prefixAssetPath: '',
-        silent: true
-      }
-    )
-  }
-}
+//     CABLES.EMBED.addPatch(
+//       'klein',
+//       {
+//         patchFile: 'assets/klein.json',
+//         prefixAssetPath: '',
+//         silent: true
+//       }
+//     )
+//   }
+// }
 
-export default function init() {
-  new Canvas();
-};
+// export default function init() {
+//   new Canvas();
+// };
diff --git a/src/styles/base/_common.scss b/src/styles/base/_common.scss
index 3f2bf17..6784792 100644
--- a/src/styles/base/_common.scss
+++ b/src/styles/base/_common.scss
@@ -28,6 +28,10 @@
   text-decoration: underline;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .js-reveal-block {
   position: relative;
 
@@ -36,6 +40,14 @@
     transform-origin: right center;
   }
 
+  &.js-reveal-orange::before {
+    background-color: $color-orange;
+  }
+
+  &.js-reveal-light::before {
+    background-color: $color-tangerine;
+  }
+
   > * {
     opacity: 0;
   }
diff --git a/src/styles/components/_profile.scss b/src/styles/components/_profile.scss
index f3cd6a7..d05853f 100644
--- a/src/styles/components/_profile.scss
+++ b/src/styles/components/_profile.scss
@@ -32,12 +32,12 @@
     align-items: center;
     justify-content: center;
     margin: 0;
-    background-color: $color-white;
   }
 
   &__image {
     position: relative;
     width: 100%;
+    background-color: $color-white;
     background-position: center center;
     background-size: cover;
 

From 0aaa62f2e7b679e138f68b300c043d186a8ab64a Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Wed, 17 Jan 2018 23:32:32 +0100
Subject: [PATCH 2/4] Move team background to left on mobile

---
 src/styles/components/_team.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/styles/components/_team.scss b/src/styles/components/_team.scss
index e733cfc..dd8c082 100644
--- a/src/styles/components/_team.scss
+++ b/src/styles/components/_team.scss
@@ -18,8 +18,11 @@
   &__background {
     position: fixed;
     top: 20%;
-    right: 10%;
     z-index: -1;
+
+    @media #{$screen-md} {
+      right: 10%;
+    }
   }
 
   &__container {

From 18ffcccbd02fbde8c6551889a1777e8f0eec75bb Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Wed, 17 Jan 2018 23:38:00 +0100
Subject: [PATCH 3/4] Align 'designed by' text to left on mobile

---
 src/styles/components/_footer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss
index 96d2284..8962ea9 100644
--- a/src/styles/components/_footer.scss
+++ b/src/styles/components/_footer.scss
@@ -46,7 +46,6 @@
   &__attribution {
     margin-top: 10px;
     padding: 10px;
-    text-align: center;
   }
 }
 
@@ -67,6 +66,7 @@
 
     &__attribution {
       margin: 0;
+      text-align: center;
     }
   }
 }

From 081a7c7a9c986a4ac8295a4d5c6688bc0bf6e993 Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Wed, 17 Jan 2018 23:42:38 +0100
Subject: [PATCH 4/4] Uncomment canvas code

---
 src/scripts/canvas.js | 45 ++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/scripts/canvas.js b/src/scripts/canvas.js
index 6da9f47..0527163 100644
--- a/src/scripts/canvas.js
+++ b/src/scripts/canvas.js
@@ -1,24 +1,25 @@
-// class Canvas {
-//   constructor() {
-//     this.connect = new CABLES.Patch({
-//       patchFile: 'assets/connect.json',
-//       prefixAssetPath: '',
-//       glCanvasId: 'connect',
-//       glCanvasResizeToWindow: true,
-//       silent: true
-//     });
+/* eslint-disable */
+class Canvas {
+  constructor() {
+    this.connect = new CABLES.Patch({
+      patchFile: 'assets/connect.json',
+      prefixAssetPath: '',
+      glCanvasId: 'connect',
+      glCanvasResizeToWindow: true,
+      silent: true
+    });
 
-//     CABLES.EMBED.addPatch(
-//       'klein',
-//       {
-//         patchFile: 'assets/klein.json',
-//         prefixAssetPath: '',
-//         silent: true
-//       }
-//     )
-//   }
-// }
+    CABLES.EMBED.addPatch(
+      'klein',
+      {
+        patchFile: 'assets/klein.json',
+        prefixAssetPath: '',
+        silent: true
+      }
+    )
+  }
+}
 
-// export default function init() {
-//   new Canvas();
-// };
+export default function init() {
+  new Canvas();
+};