Revert "sack off particles for now"

This reverts commit 959fab1581.

src/assets/js/main.js

@@ -5,7 +5,6 @@
 */
 
 (function($) {
-
   skel
     .breakpoints({
       xlarge: '(max-width: 1680px)',
@@ -101,6 +100,119 @@
         }
       });
 
+    // Particles
+    if ($( window ).width() > 980) {
+      particlesJS('banner', {
+        "particles": {
+          "number": {
+          "value": 65,
+          "density": {
+            "enable": false,
+            "value_area": 800
+          }
+          },
+          "color": {
+          "value": "#29335C"
+          },
+          "shape": {
+          "type": "circle",
+          "stroke": {
+            "width": 0,
+            "color": "#000000"
+          },
+          "polygon": {
+            "nb_sides": 5
+          },
+          "image": {
+            "src": "img/github.svg",
+            "width": 100,
+            "height": 100
+          }
+          },
+          "opacity": {
+          "value": 0.6,
+          "random": true,
+          "anim": {
+            "enable": false,
+            "speed": 1,
+            "opacity_min": 0.4,
+            "sync": false
+          }
+          },
+          "size": {
+          "value": 16,
+          "random": true,
+          "anim": {
+            "enable": true,
+            "speed": 3,
+            "size_min": 10,
+            "sync": false
+          }
+          },
+          "line_linked": {
+          "enable": true,
+          "distance": 250,
+          "color": "#29335C",
+          "opacity": 0.8,
+          "width": 2
+          },
+          "move": {
+          "enable": true,
+          "speed": 0.4,
+          "direction": "none",
+          "random": true,
+          "straight": false,
+          "out_mode": "out",
+          "bounce": false,
+          "attract": {
+            "enable": false,
+            "rotateX": 600,
+            "rotateY": 1200
+          }
+          }
+        },
+        "interactivity": {
+          "detect_on": "canvas",
+          "events": {
+          "onhover": {
+            "enable": true,
+            "mode": "grab"
+          },
+          "onclick": {
+            "enable": true,
+            "mode": "push"
+          },
+          "resize": true
+          },
+          "modes": {
+          "grab": {
+            "distance": 200,
+            "line_linked": {
+            "opacity": 0.8
+            }
+          },
+          "bubble": {
+            "distance": 400,
+            "size": 40,
+            "duration": 2,
+            "opacity": 8,
+            "speed": 3
+          },
+          "repulse": {
+            "distance": 200,
+            "duration": 0.4
+          },
+          "push": {
+            "particles_nb": 2
+          },
+          "remove": {
+            "particles_nb": 2
+          }
+          }
+        },
+        "retina_detect": true
+        });
+      }
     }
   });
-})(jQuery);
+})(jQuery);

src/assets/styles/components/_banner.scss

@@ -60,6 +60,16 @@
     height: auto;
     min-height: 0;
 
+    .particles-js-canvas-el {
+      @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
+      @include vendor('transition-delay', '1s');
+      opacity: 1;
+
+      @include breakpoint(medium) {
+        display: none;
+      }
+    }
+
     h2 {
       font-size: 1.25em;
     }
@@ -84,5 +94,34 @@ body.is-loading {
         width: 0;
       }
     }
+
+    .particles-js-canvas-el {
+      opacity: 0;
+    }
   }
-}
+}
+
+.particle {
+  position: relative;
+  user-select: none;
+  background: _palette(accent3, bg);
+
+  @include breakpoint(medium) {
+    background: none;
+  }
+
+  .particles-js-canvas-el {
+    width: 100%;
+    height: 100%;
+  }
+
+  .content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      z-index: 1;
+      user-select: auto;
+    }
+}