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>
-		</ul>
 		</div>
-	<a href="#one" class="more scrolly">Learn More</a>
+	</section>
-</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

@@ -12,29 +12,29 @@
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
-	@import 'libs/skel';
+@import 'libs/skel';
 
-	@include skel-breakpoints((
+@include skel-breakpoints((
 	xlarge: '(max-width: 1680px)',
 	large: '(max-width: 1280px)',
 	medium: '(max-width: 980px)',
 	small: '(max-width: 736px)',
 	xsmall: '(max-width: 480px)'
-	));
+));
 
-	@include skel-layout((
+@include skel-layout((
 	reset: 'full',
 	boxModel: 'border',
 	grid: ( gutters: 1.5em )
-	));
+));
 
 /* Basic */
 
-	@-ms-viewport {
+@-ms-viewport {
 	width: device-width;
-	}
+}
 
-	body {
+body {
 	background: _palette(bg);
 
 	&.is-loading {
@@ -43,9 +43,9 @@
 			@include vendor('transition', 'none !important');
 		}
 	}
-	}
+}
 
-	body, input, select, textarea {
+body, input, select, textarea {
 	color: _palette(fg);
 	font-family: _font(family);
 	font-size: 15pt;
@@ -65,9 +65,9 @@
 		font-size: 11pt;
 		letter-spacing: _size(letter-spacing) * 0.5;
 	}
-	}
+}
 
-	a {
+a {
 	@include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
 	border-bottom: dotted 1px;
 	color: inherit;
@@ -76,22 +76,22 @@
 	&:hover {
 		border-bottom-color: transparent;
 	}
-	}
+}
 
-	strong, b {
+strong, b {
 	color: _palette(fg-bold);
 	font-weight: _font(weight-bold);
-	}
+}
 
-	em, i {
+em, i {
 	font-style: italic;
-	}
+}
 
-	p {
+p {
 	margin: 0 0 _size(element-margin) 0;
-	}
+}
 
-	h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 {
 	color: _palette(fg-bold);
 	font-weight: _font(weight-extrabold);
 	letter-spacing: _size(letter-spacing-alt);
@@ -103,56 +103,54 @@
 		color: inherit;
 		text-decoration: none;
 	}
-	}
+}
 
-	h2 {
+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 {
+h3 {
 	font-size: 1.15em;
-		line-height: 1.75em;
+	line-height: 1.4;
 
 	@include breakpoint(small) {
 		font-size: 1em;
-			line-height: 1.65em;
-		}
 	}
+}
 
-	h4 {
+h4 {
 	font-size: 1em;
 	line-height: 1.5em;
-	}
+}
 
-	h5 {
+h5 {
 	font-size: 0.8em;
 	line-height: 1.5em;
-	}
+}
 
-	h6 {
+h6 {
 	font-size: 0.7em;
 	line-height: 1.5em;
-	}
+}
 
-	sub {
+sub {
 	font-size: 0.8em;
 	position: relative;
 	top: 0.5em;
-	}
+}
 
-	sup {
+sup {
 	font-size: 0.8em;
 	position: relative;
 	top: -0.5em;
-	}
+}
 
-	hr {
+hr {
 	border: 0;
 	border-bottom: solid 2px _palette(border);
 	margin: (_size(element-margin) * 1.5) 0;
@@ -160,16 +158,16 @@
 	&.major {
 		margin: (_size(element-margin) * 2.25) 0;
 	}
-	}
+}
 
-	blockquote {
+blockquote {
 	border-left: solid 4px _palette(border);
 	font-style: italic;
 	margin: 0 0 _size(element-margin) 0;
 	padding: 0.5em 0 0.5em 2em;
-	}
+}
 
-	code {
+code {
 	background: _palette(border-bg);
 	border-radius: 3px;
 	font-family: _font(family-fixed);
@@ -177,9 +175,9 @@
 	letter-spacing: 0;
 	margin: 0 0.25em;
 	padding: 0.25em 0.65em;
-	}
+}
 
-	pre {
+pre {
 	-webkit-overflow-scrolling: touch;
 	font-family: _font(family-fixed);
 	font-size: 0.9em;
@@ -191,29 +189,29 @@
 		padding: 1em 1.5em;
 		overflow-x: auto;
 	}
-	}
+}
 
-	.align-left {
+.align-left {
 	text-align: left;
-	}
+}
 
-	.align-center {
+.align-center {
 	text-align: center;
-	}
+}
 
-	.align-right {
+.align-right {
 	text-align: right;
-	}
+}
 
 /* Section/Article */
 
-	section, article {
+section, article {
 	&.special {
 		text-align: center;
 	}
-	}
+}
 
-	header {
+header {
 	p {
 		color: _palette(fg-light);
 		position: relative;
@@ -264,27 +262,27 @@
 			display: none;
 		}
 	}
-	}
+}
 
 /* Form */
 
-	form {
+form {
 	margin: 0 0 _size(element-margin) 0;
-	}
+}
 
-	label {
+label {
 	color: _palette(fg-bold);
 	display: block;
 	font-size: 0.9em;
 	font-weight: _font(weight-bold);
 	margin: 0 0 (_size(element-margin) * 0.5) 0;
-	}
+}
 
-	input[type="text"],
+input[type="text"],
-	input[type="password"],
+input[type="password"],
-	input[type="email"],
+input[type="email"],
-	select,
+select,
-	textarea {
+textarea {
 	@include vendor('appearance', 'none');
 	background: _palette(border-bg);
 	border-radius: 3px;
@@ -303,9 +301,9 @@
 	&:focus {
 		box-shadow: 0 0 0 2px _palette(accent1, bg);
 	}
-	}
+}
 
-	.select-wrapper {
+.select-wrapper {
 	@include icon;
 	display: block;
 	position: relative;
@@ -327,21 +325,21 @@
 	select::-ms-expand {
 		display: none;
 	}
-	}
+}
 
-	input[type="text"],
+input[type="text"],
-	input[type="password"],
+input[type="password"],
-	input[type="email"],
+input[type="email"],
-	select {
+select {
 	height: _size(element-height);
-	}
+}
 
-	textarea {
+textarea {
 	padding: 0.75em 1em;
-	}
+}
 
-	input[type="checkbox"],
+input[type="checkbox"],
-	input[type="radio"], {
+input[type="radio"], {
 	@include vendor('appearance', 'none');
 	display: block;
 	float: left;
@@ -389,52 +387,52 @@
 			box-shadow: 0 0 0 2px _palette(accent1, bg);
 		}
 	}
-	}
+}
 
-	input[type="checkbox"] {
+input[type="checkbox"] {
 	& + label {
 		&:before {
 			border-radius: 3px;
 		}
 	}
-	}
+}
 
-	input[type="radio"] {
+input[type="radio"] {
 	& + label {
 		&:before {
 			border-radius: 100%;
 		}
 	}
-	}
+}
 
-	::-webkit-input-placeholder {
+::-webkit-input-placeholder {
 	color: _palette(fg-light) !important;
 	opacity: 1.0;
-	}
+}
 
-	:-moz-placeholder {
+:-moz-placeholder {
 	color: _palette(fg-light) !important;
 	opacity: 1.0;
-	}
+}
 
-	::-moz-placeholder {
+::-moz-placeholder {
 	color: _palette(fg-light) !important;
 	opacity: 1.0;
-	}
+}
 
-	:-ms-input-placeholder {
+:-ms-input-placeholder {
 	color: _palette(fg-light) !important;
 	opacity: 1.0;
-	}
+}
 
-	.formerize-placeholder {
+.formerize-placeholder {
 	color: _palette(fg-light) !important;
 	opacity: 1.0;
-	}
+}
 
 /* Box */
 
-	.box {
+.box {
 	border-radius: 3px;
 	border: solid 2px _palette(border);
 	margin-bottom: _size(element-margin);
@@ -451,11 +449,11 @@
 		border-radius: 0;
 		padding: 0;
 	}
-	}
+}
 
 /* Icon */
 
-	.icon {
+.icon {
 	@include icon;
 	border-bottom: none;
 	position: relative;
@@ -497,11 +495,11 @@
 	&.style3 {
 		color: _palette(accent4, bg);
 	}
-	}
+}
 
 /* Image */
 
-	.image {
+.image {
 	border-radius: 3px;
 	border: 0;
 	display: inline-block;
@@ -542,11 +540,11 @@
 			width: 100%;
 		}
 	}
-	}
+}
 
 /* List */
 
-	ol {
+ol {
 	list-style: decimal;
 	margin: 0 0 _size(element-margin) 0;
 	padding-left: 1.25em;
@@ -554,9 +552,9 @@
 	li {
 		padding-left: 0.25em;
 	}
-	}
+}
 
-	ul {
+ul {
 	list-style: disc;
 	margin: 0 0 _size(element-margin) 0;
 	padding-left: 1em;
@@ -714,20 +712,20 @@
 			}
 		}
 	}
-	}
+}
 
-	dl {
+dl {
 	margin: 0 0 _size(element-margin) 0;
-	}
+}
 
 /* Table */
 
-	.table-wrapper {
+.table-wrapper {
 	-webkit-overflow-scrolling: touch;
 	overflow-x: auto;
-	}
+}
 
-	table {
+table {
 	margin: 0 0 _size(element-margin) 0;
 	width: 100%;
 
@@ -794,15 +792,15 @@
 			border-top: 0;
 		}
 	}
-	}
+}
 
 /* Button */
 
-	input[type="submit"],
+input[type="submit"],
-	input[type="reset"],
+input[type="reset"],
-	input[type="button"],
+input[type="button"],
-	button,
+button,
-	.button {
+.button {
 	@include vendor('appearance', 'none');
 	@include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
 	background-color: transparent;
@@ -877,11 +875,11 @@
 		height: 3.75em;
 		line-height: 3.75em;
 	}
-	}
+}
 
 /* Features */
 
-	.features {
+.features {
 	@include vendor('display', 'flex');
 	@include vendor('flex-wrap', 'wrap');
 	@include vendor('justify-content', 'center');
@@ -952,11 +950,11 @@
 			}
 		}
 	}
-	}
+}
 
 /* Spotlight */
 
-	.spotlight {
+.spotlight {
 	@include vendor('align-items', 'center');
 	@include vendor('display', 'flex');
 
@@ -1024,11 +1022,11 @@
 			@include padding(3em, 2em);
 		}
 	}
-	}
+}
 
 /* Wrapper */
 
-	@mixin wrapper($p) {
+@mixin wrapper($p) {
 	background-color: _palette($p, bg);
 	color: _palette($p, fg);
 
@@ -1213,9 +1211,9 @@
 			}
 		}
 
-	}
+}
 
-	.wrapper {
+.wrapper {
 	@include padding(6em, 0);
 
 	> .inner {
@@ -1262,11 +1260,11 @@
 	@include breakpoint(small) {
 		@include padding(3em, 2em);
 	}
-	}
+}
 
 /* Page Wrapper + Menu */
 
-	#page-wrapper {
+#page-wrapper {
 	@include vendor('transition', 'opacity #{_duration(menu)} ease');
 	opacity: 1;
 	padding-top: 3em;
@@ -1283,9 +1281,9 @@
 		width: 100%;
 		z-index: _misc(z-index-base) + 1;
 	}
-	}
+}
 
-	#menu {
+#menu {
 	@include vendor('transform', 'translateX(20em)');
 	@include vendor('transition', 'transform #{_duration(menu)} ease');
 	-webkit-overflow-scrolling: touch;
@@ -1351,9 +1349,9 @@
 	@include breakpoint(small) {
 		padding: 3em 1.5em;
 	}
-	}
+}
 
-	body.is-menu-visible {
+body.is-menu-visible {
 	#page-wrapper {
 		opacity: 0.35;
 
@@ -1365,11 +1363,11 @@
 	#menu {
 		@include vendor('transform', 'translateX(0)');
 	}
-	}
+}
 
 /* Header */
 
-	#header {
+#header {
 	@include vendor('transition', 'background-color #{_duration(transitions)} ease');
 	background: _palette(bg);
 	height: 3em;
@@ -1470,11 +1468,11 @@
 			opacity: 0;
 		}
 	}
-	}
+}
 
 /* Banner */
 
-	#banner {
+#banner {
 	@include vendor('display', 'flex');
 	@include vendor('flex-direction', 'column');
 	@include vendor('justify-content', 'center');
@@ -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 {
+body.is-loading {
-				display: none;
-			}
-		}
-	}
-
-	body.is-loading {
 	#banner {
+		h1 {
+			opacity: 0;
+		}
+
 		h2 {
 			@include vendor('transform', 'scale(0.95)');
 			opacity: 0;
@@ -1608,20 +1562,15 @@
 			}
 		}
   
-			.more {
+		.particles-js-canvas-el {
-				@include vendor('transform', 'translateY(8.5em)');
 			opacity: 0;
 		}
-
-			&:after {
-				opacity: 1;
-			}
-		}
 	}
+}
 
 /* CTA */
 
-	#cta {
+#cta {
 	.inner {
 		@include vendor('display', 'flex');
 		max-width: 45em;
@@ -1664,14 +1613,14 @@
 			}
 		}
 	}
-	}
+}
 
 /* Main */
 
-	#main {
+#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;
@@ -1715,19 +1664,19 @@
 			}
 		}
 	}
-	}
+}
 
-	body.is-mobile {
+body.is-mobile {
 	#main {
 		> header {
 			background-attachment: scroll;
 		}
 	}
-	}
+}
 
 /* Footer */
 
-	#footer {
+#footer {
 	@include padding(6em, 0);
 	background-color: darken(_palette(bg), 8);
 	text-align: center;
@@ -1790,26 +1739,21 @@
 	@include breakpoint(small) {
 		@include padding(3em, 2em);
 	}
-	}
+}
 
 /* Landing */
 
-	body.landing {
+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;
 	}
 
 	#footer {
 		background-color: darken(transparentize(_palette(bg), 0.1), 8);
 	}
-	}
+}
 
-	body.is-mobile {
+body.is-mobile {
 	&.landing {
 		#page-wrapper {
 			background: none;
@@ -1827,4 +1771,85 @@
 			background-color: darken(_palette(bg), 8);
 		}
 	}
+}
+$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;
+	}
+}