particle banner

src/_includes/banner.html

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

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,

src/assets/styles/main.scss

@@ -107,21 +107,19 @@
 
 h2 {
 	font-size: 1.35em;
-		line-height: 1.75em;
+	line-height: 1.4;
 
 	@include breakpoint(small) {
 		font-size: 1.1em;
-			line-height: 1.65em;
 	}
 }
 
 h3 {
 	font-size: 1.15em;
-		line-height: 1.75em;
+	line-height: 1.4;
 
 	@include breakpoint(small) {
 		font-size: 1em;
-			line-height: 1.65em;
 	}
 }
 
@@ -1496,7 +1494,7 @@
 		z-index: 1;
 
 		&:before, &:after {
-				@include vendor('transition', 'width 0.85s ease');
+			@include vendor('transition', 'width 1s ease');
 			@include vendor('transition-delay', '0.25s');
 			background: _palette(fg-bold);
 			content: '';
@@ -1517,65 +1515,21 @@
 		}
 	}
 
-		p {
+	h1 {
-			letter-spacing: _size(letter-spacing-alt);
+		@include vendor('transition', 'opacity 0.5s ease');
-			text-transform: uppercase;
+		@include vendor('transition-delay', '1s');
+		margin-bottom: 25px;
+		opacity: 1;
 
 		a {
 			color: inherit;
 		}
 	}
 
-		.more {
+	.particles-js-canvas-el {
-			@include vendor('transition', ('transform 0.75s ease', 'opacity 0.75s ease'));
-			@include vendor('transition-delay', '3.5s');
-			@include vendor('transform', 'translateY(0)');
-			border: none;
-			bottom: 0;
-			color: inherit;
-			font-size: 0.8em;
-			height: 8.5em;
-			left: 50%;
-			letter-spacing: _size(letter-spacing-alt);
-			margin-left: -8.5em;
-			opacity: 1;
-			outline: 0;
-			padding-left: _size(letter-spacing-alt);
-			position: absolute;
-			text-align: center;
-			text-transform: uppercase;
-			width: 16em;
-			z-index: 1;
-
-			&:after {
-				background-image: url('images/arrow.svg');
-				background-position: center;
-				background-repeat: no-repeat;
-				background-size: contain;
-				bottom: 4em;
-				content: '';
-				display: block;
-				height: 1.5em;
-				left: 50%;
-				margin: 0 0 0 -0.75em;
-				position: absolute;
-				width: 1.5em;
-			}
-		}
-
-		&:after {
-			@include vendor('pointer-events', 'none');
 		@include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
-			@include vendor('transition-delay', '1.25s');
+		@include vendor('transition-delay', '1s');
-			content: '';
+		opacity: 1;
-			background: _palette(bg);
-			display: block;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			left: 0;
-			top: 0;
-			opacity: 0;
 	}
 
 	@include breakpoint(small) {
@@ -1590,15 +1544,15 @@
 		br {
 			display: none;
 		}
-
-			.more {
-				display: none;
-			}
 	}
 }
 
 body.is-loading {
 	#banner {
+		h1 {
+			opacity: 0;
+		}
+
 		h2 {
 			@include vendor('transform', 'scale(0.95)');
 			opacity: 0;
@@ -1608,14 +1562,9 @@
 			}
 		}
   
-			.more {
+		.particles-js-canvas-el {
-				@include vendor('transform', 'translateY(8.5em)');
 			opacity: 0;
 		}
-
-			&:after {
-				opacity: 1;
-			}
 	}
 }
 
@@ -1671,7 +1620,7 @@
 #main {
 	> header {
 		@include padding(12em, 0);
-			@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
+		@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))'));
 		background-attachment: fixed;
 		background-position: center center;
 		background-repeat: no-repeat;
@@ -1796,11 +1745,6 @@
 
 body.landing {
 	#page-wrapper {
-			@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
-			background-attachment: fixed;
-			background-position: center center;
-			background-repeat: no-repeat;
-			background-size: cover;
 		padding-top: 0;
 	}
 
@@ -1828,3 +1772,84 @@
 		}
 	}
 }
+$main: #1a222c;
+$sec: #4B5664;
+$purple: #54516A;
+$cut: 768px;
+
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+body {
+	margin: 0;
+	font-family: 'Montserrat', sans-serif;
+}
+
+@-webkit-keyframes pulse {
+	from {
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+		filter: alpha(opacity=40);
+		opacity: .4;
+		top: 0;
+	}
+	50% {
+		-ms-filter: none;
+		-webkit-filter: none;
+		filter: none;
+		opacity: 1;
+		top: -10px;
+	}
+	to {
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+		filter: alpha(opacity=40);
+		opacity: .4;
+		top: 0;
+	}
+}
+
+@keyframes pulse {
+	from {
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+		filter: alpha(opacity=40);
+		opacity: .4;
+		top: 0
+	}
+	50% {
+		-ms-filter: none;
+		-webkit-filter: none;
+		filter: none;
+		opacity: 1;
+		top: -10px
+	}
+	to {
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+		filter: alpha(opacity=40);
+		opacity: .4;
+		top: 0
+	}
+}
+.particle {
+	position: relative;
+	
+	#particles-js {
+		vertical-align: bottom;
+		width: 100%;
+		min-height: 100vh;
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-attachment: fixed;
+  
+		.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;
+	}
+}