particle banner

src/_includes/banner.html

@@ -1,11 +1,9 @@
 <!-- Banner -->
-<section id="banner">
+<div class="particle">
-	<div class="inner">
+	<section id="banner">
-		<h2>Spectral</h2>
+		<div class="inner content">
-		<p>Another fine responsive<br /> site template freebie<br /> crafted by <a href="http://html5up.net">HTML5 UP</a>.</p>
+			<h1>Autonomic</h1>
-		<ul class="actions">
+			<h2>Think outside the boss</h2>
-			<li><a href="#" class="button special">Activate</a></li>
+		</div>
-		</ul>
+	</section>
-	</div>
+</div>
-	<a href="#one" class="more scrolly">Learn More</a>
-</section>

src/_includes/footer.html

@@ -39,6 +39,7 @@
 <script src="{{ "/assets/js/jquery.scrolly.min.js" | absolute_url }}"></script>
 <script src="{{ "/assets/js/skel.min.js" | absolute_url }}"></script>
 <script src="{{ "/assets/js/util.js" | absolute_url }}"></script>
+<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 <!--[if lte IE 8]><script src="{{ "/assets/js/ie/respond.min.js" | absolute_url }}"></script><![endif]-->
 <script src="{{ "/assets/js/main.js" | absolute_url }}"></script>
 

src/assets/js/main.js

@@ -95,6 +95,118 @@
 
 			}
 
+	/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+	particlesJS('banner', {
+		"particles": {
+		  "number": {
+			"value": 250,
+			"density": {
+			  "enable": false,
+			  "value_area": 1122.388442605866
+			}
+		  },
+		  "color": {
+			"value": "#ffffff"
+		  },
+		  "shape": {
+			"type": "circle",
+			"stroke": {
+			  "width": 0,
+			  "color": "#000000"
+			},
+			"polygon": {
+			  "nb_sides": 5
+			},
+			"image": {
+			  "src": "img/github.svg",
+			  "width": 100,
+			  "height": 100
+			}
+		  },
+		  "opacity": {
+			"value": 0.5,
+			"random": true,
+			"anim": {
+			  "enable": true,
+			  "speed": 1,
+			  "opacity_min": 0.1,
+			  "sync": false
+			}
+		  },
+		  "size": {
+			"value": 4.6,
+			"random": true,
+			"anim": {
+			  "enable": false,
+			  "speed": 6,
+			  "size_min": 0.1,
+			  "sync": false
+			}
+		  },
+		  "line_linked": {
+			"enable": true,
+			"distance": 150,
+			"color": "#ffffff",
+			"opacity": 0.4,
+			"width": 1
+		  },
+		  "move": {
+			"enable": true,
+			"speed": 2,
+			"direction": "none",
+			"random": true,
+			"straight": false,
+			"out_mode": "out",
+			"bounce": false,
+			"attract": {
+			  "enable": true,
+			  "rotateX": 600,
+			  "rotateY": 1200
+			}
+		  }
+		},
+		"interactivity": {
+		  "detect_on": "canvas",
+		  "events": {
+			"onhover": {
+			  "enable": true,
+			  "mode": "grab"
+			},
+			"onclick": {
+			  "enable": true,
+			  "mode": "push"
+			},
+			"resize": true
+		  },
+		  "modes": {
+			"grab": {
+			  "distance": 133.99274002972194,
+			  "line_linked": {
+				"opacity": 1
+			  }
+			},
+			"bubble": {
+			  "distance": 400,
+			  "size": 40,
+			  "duration": 2,
+			  "opacity": 8,
+			  "speed": 3
+			},
+			"repulse": {
+			  "distance": 200,
+			  "duration": 0.4
+			},
+			"push": {
+			  "particles_nb": 4
+			},
+			"remove": {
+			  "particles_nb": 2
+			}
+		  }
+		},
+		"retina_detect": false
+	  });
+	  
 	});
 
 })(jQuery);

src/assets/styles/libs/_vars.scss

@@ -31,7 +31,7 @@
 
 // Palette.
 	$palette: (
-		bg:					#2e3842,
+		bg:					#232B3B,
 		fg:					#fff,
 		fg-bold:			#fff,
 		fg-light:			rgba(255,255,255,0.5),
@@ -108,7 +108,7 @@
 
 		accent7: (
 			bg:				#ffffff,
-			fg-bold:		#2E3842,
+			fg-bold:		_palette(bg),
 			fg:				#4E4852,
 			fg-light:		#8E8892,
 			border:			#dfdfdf,