Merge branch 'landing' into stop-canvas-offscreen

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}}>

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)

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>

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")
     }}

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"
         }}

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>

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)
       }}

src/hbs/partials/components/team.hbs

@@ -7,6 +7,7 @@
 
     {{> components/heading
       text=team.header
+      orangeReveal=true
       class="team__header"
       rellax-speed="-0.5"
     }}

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;
   }

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;
     }
   }
 }

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;
 

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 {