Add klein bottle & connect canvases

gulpfile.babel.js

@@ -199,11 +199,19 @@ gulp.task('extras', () => {
   }).pipe(gulp.dest('dist'));
 });
 
+gulp.task('canvas_assets', () => {
+  return gulp.src([
+    './src/canvas/assets/*.*',
+  ], {
+    dot: true
+  }).pipe(gulp.dest('dist/assets'));
+});
+
 gulp.task('clean', () => {
   return del.sync('./dist');
 });
 
-gulp.task('serve', ['clean', 'hbs', 'extras', 'styles', 'lint', 'scripts'], () => {
+gulp.task('serve', ['clean', 'hbs', 'canvas_assets', 'extras', 'styles', 'lint', 'scripts'], () => {
   browserSync({
     notify: false,
     port: 9000,
@@ -248,7 +256,7 @@ gulp.task('test:watch', ['lint:test', 'test'], () => {
   });
 });
 
-gulp.task('build', ['clean', 'lint', 'html', 'fonts', 'extras', 'images'], () => {
+gulp.task('build', ['clean', 'lint', 'html', 'fonts', 'canvas_assets', 'extras', 'images'], () => {
   return gulp.src('dist/**/*').pipe($.size({
     title: 'build',
     gzip: true

src/hbs/partials/components/hero.hbs

@@ -1,5 +1,6 @@
 <section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}>
     <div class="hero__canvas">
+      <canvas class="hero__canvas-klein" id="klein"></canvas>
     </div>
 
     <h1 class="hero__header">

src/hbs/partials/components/team.hbs

@@ -1,6 +1,6 @@
 <section class="section team" {{#if team.id}} id="{{team.id}}" {{/if}}>
   <div class="team__background">
-    <canvas id="glcanvas"></canvas>
+    <canvas id="connect"></canvas>
   </div>
 
   <div class="team__container js-parallax-scene">

src/scripts/main.js

@@ -11,10 +11,17 @@ document.addEventListener('DOMContentLoaded', () => {
   parallax();
   reveal();
 
-  CABLES.patch = new CABLES.Patch(
-    {
-      patchFile: 'klein.json',
-      prefixAssetPath: '',
-      glCanvasId: 'glcanvas'
-    });
+  CABLES.patch = new CABLES.Patch({
+    patchFile: 'assets/connect.json',
+    prefixAssetPath: '',
+    glCanvasId: 'connect',
+    glCanvasResizeToWindow: true
+  });
+
+  CABLES.patch = new CABLES.Patch({
+    patchFile: 'assets/klein.json',
+    prefixAssetPath: '',
+    glCanvasId: 'klein',
+    glCanvasResizeToWindow: true
+  });
 });

src/styles/components/_hero.scss

@@ -18,6 +18,11 @@ body {
     background-color: $color-orange;
   }
 
+  &__canvas-klein {
+    width: 100%;
+    height: 100%;
+  }
+
   &__header {
     @include heading;
 

src/styles/components/_team.scss

@@ -18,19 +18,8 @@
   &__background {
     position: fixed;
     top: 20%;
+    right: 10%;
     z-index: -1;
-
-    &__image {
-      max-width: 100%;
-    }
-
-    @media #{$screen-sm} {
-      left: 20%;
-
-      &__image {
-        max-width: 50%;
-      }
-    }
   }
 
   &__container {