changement de template html5up + retouche du logo

README.txt

@@ -1,19 +1,4 @@
-Identity by HTML5 UP
+Site web du groupe charienko basé sur un template de https://html5up.net
-html5up.net | @ajlkn
-Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-
-
-Just a fun little profile/card-style template I whipped up during a break between major
-projects. Minimal, responsive, and powered by Skel + Sass. Enjoy :)
-
-Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
-you can use for pretty much whatever.
-
-(* = not included)
-
-AJ
-aj@lkn.io | @ajlkn
-
 
 Credits:
 

assets/css/noscript.css

@@ -1,19 +1,37 @@
 /*
-	Overflow by HTML5 UP
+	Dimension by HTML5 UP
 	html5up.net | @ajlkn
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
+/* BG */
+
+	body.is-preload #bg:before {
+		background-color: transparent;
+	}
+
 /* Header */
 
 	body.is-preload #header {
+		-moz-filter: none;
+		-webkit-filter: none;
+		-ms-filter: none;
+		filter: none;
+	}
+
+		body.is-preload #header > * {
 			opacity: 1;
 		}
 
-		body.is-preload #header footer {
+		body.is-preload #header .content .inner {
-			-moz-transform: none;
+			max-height: none;
-			-webkit-transform: none;
+			padding: 3rem 2rem;
-			-ms-transform: none;
-			transform: none;
 			opacity: 1;
 		}
+
+/* Main */
+
+	#main article {
+		opacity: 1;
+		margin: 4rem 0 0 0;
+	}

assets/js/main.js

@@ -1,5 +1,5 @@
 /*
-	Overflow by HTML5 UP
+	Dimension by HTML5 UP
 	html5up.net | @ajlkn
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
@@ -8,28 +8,22 @@
 
 	var	$window = $(window),
 		$body = $('body'),
-		settings = {
+		$wrapper = $('#wrapper'),
-
+		$header = $('#header'),
-			// Parallax background effect?
+		$footer = $('#footer'),
-				parallax: true,
+		$main = $('#main'),
-
+		$main_articles = $main.children('article');
-			// Parallax factor (lower = more intense, higher = less intense).
-				parallaxFactor: 10
-
-		};
 
 	// Breakpoints.
 		breakpoints({
-			wide:    [ '1081px',  '1680px' ],
+			xlarge:   [ '1281px',  '1680px' ],
-			normal:  [ '841px',   '1080px' ],
+			large:    [ '981px',   '1280px' ],
-			narrow:  [ '737px',   '840px'  ],
+			medium:   [ '737px',   '980px'  ],
-			mobile:  [ null,      '736px'  ]
+			small:    [ '481px',   '736px'  ],
+			xsmall:   [ '361px',   '480px'  ],
+			xxsmall:  [ null,      '360px'  ]
 		});
 
-	// Mobile?
-		if (browser.mobile)
-			$body.addClass('is-scroll');
-
 	// Play initial animations on page load.
 		$window.on('load', function() {
 			window.setTimeout(function() {
@@ -37,69 +31,371 @@
 			}, 100);
 		});
 
-	// Scrolly.
+	// Fix: Flexbox min-height bug on IE.
-		$('.scrolly-middle').scrolly({
+		if (browser.name == 'ie') {
-			speed: 1000,
+
-			anchor: 'middle'
+			var flexboxFixTimeoutId;
+
+			$window.on('resize.flexbox-fix', function() {
+
+				clearTimeout(flexboxFixTimeoutId);
+
+				flexboxFixTimeoutId = setTimeout(function() {
+
+					if ($wrapper.prop('scrollHeight') > $window.height())
+						$wrapper.css('height', 'auto');
+					else
+						$wrapper.css('height', '100vh');
+
+				}, 250);
+
+			}).triggerHandler('resize.flexbox-fix');
+
+		}
+
+	// Nav.
+		var $nav = $header.children('nav'),
+			$nav_li = $nav.find('li');
+
+		// Add "middle" alignment classes if we're dealing with an even number of items.
+			if ($nav_li.length % 2 == 0) {
+
+				$nav.addClass('use-middle');
+				$nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle');
+
+			}
+
+	// Main.
+		var	delay = 325,
+			locked = false;
+
+		// Methods.
+			$main._show = function(id, initial) {
+
+				var $article = $main_articles.filter('#' + id);
+
+				// No such article? Bail.
+					if ($article.length == 0)
+						return;
+
+				// Handle lock.
+
+					// Already locked? Speed through "show" steps w/o delays.
+						if (locked || (typeof initial != 'undefined' && initial === true)) {
+
+							// Mark as switching.
+								$body.addClass('is-switching');
+
+							// Mark as visible.
+								$body.addClass('is-article-visible');
+
+							// Deactivate all articles (just in case one's already active).
+								$main_articles.removeClass('active');
+
+							// Hide header, footer.
+								$header.hide();
+								$footer.hide();
+
+							// Show main, article.
+								$main.show();
+								$article.show();
+
+							// Activate article.
+								$article.addClass('active');
+
+							// Unlock.
+								locked = false;
+
+							// Unmark as switching.
+								setTimeout(function() {
+									$body.removeClass('is-switching');
+								}, (initial ? 1000 : 0));
+
+							return;
+
+						}
+
+					// Lock.
+						locked = true;
+
+				// Article already visible? Just swap articles.
+					if ($body.hasClass('is-article-visible')) {
+
+						// Deactivate current article.
+							var $currentArticle = $main_articles.filter('.active');
+
+							$currentArticle.removeClass('active');
+
+						// Show article.
+							setTimeout(function() {
+
+								// Hide current article.
+									$currentArticle.hide();
+
+								// Show article.
+									$article.show();
+
+								// Activate article.
+									setTimeout(function() {
+
+										$article.addClass('active');
+
+										// Window stuff.
+											$window
+												.scrollTop(0)
+												.triggerHandler('resize.flexbox-fix');
+
+										// Unlock.
+											setTimeout(function() {
+												locked = false;
+											}, delay);
+
+									}, 25);
+
+							}, delay);
+
+					}
+
+				// Otherwise, handle as normal.
+					else {
+
+						// Mark as visible.
+							$body
+								.addClass('is-article-visible');
+
+						// Show article.
+							setTimeout(function() {
+
+								// Hide header, footer.
+									$header.hide();
+									$footer.hide();
+
+								// Show main, article.
+									$main.show();
+									$article.show();
+
+								// Activate article.
+									setTimeout(function() {
+
+										$article.addClass('active');
+
+										// Window stuff.
+											$window
+												.scrollTop(0)
+												.triggerHandler('resize.flexbox-fix');
+
+										// Unlock.
+											setTimeout(function() {
+												locked = false;
+											}, delay);
+
+									}, 25);
+
+							}, delay);
+
+					}
+
+			};
+
+			$main._hide = function(addState) {
+
+				var $article = $main_articles.filter('.active');
+
+				// Article not visible? Bail.
+					if (!$body.hasClass('is-article-visible'))
+						return;
+
+				// Add state?
+					if (typeof addState != 'undefined'
+					&&	addState === true)
+						history.pushState(null, null, '#');
+
+				// Handle lock.
+
+					// Already locked? Speed through "hide" steps w/o delays.
+						if (locked) {
+
+							// Mark as switching.
+								$body.addClass('is-switching');
+
+							// Deactivate article.
+								$article.removeClass('active');
+
+							// Hide article, main.
+								$article.hide();
+								$main.hide();
+
+							// Show footer, header.
+								$footer.show();
+								$header.show();
+
+							// Unmark as visible.
+								$body.removeClass('is-article-visible');
+
+							// Unlock.
+								locked = false;
+
+							// Unmark as switching.
+								$body.removeClass('is-switching');
+
+							// Window stuff.
+								$window
+									.scrollTop(0)
+									.triggerHandler('resize.flexbox-fix');
+
+							return;
+
+						}
+
+					// Lock.
+						locked = true;
+
+				// Deactivate article.
+					$article.removeClass('active');
+
+				// Hide article.
+					setTimeout(function() {
+
+						// Hide article, main.
+							$article.hide();
+							$main.hide();
+
+						// Show footer, header.
+							$footer.show();
+							$header.show();
+
+						// Unmark as visible.
+							setTimeout(function() {
+
+								$body.removeClass('is-article-visible');
+
+								// Window stuff.
+									$window
+										.scrollTop(0)
+										.triggerHandler('resize.flexbox-fix');
+
+								// Unlock.
+									setTimeout(function() {
+										locked = false;
+									}, delay);
+
+							}, 25);
+
+					}, delay);
+
+
+			};
+
+		// Articles.
+			$main_articles.each(function() {
+
+				var $this = $(this);
+
+				// Close.
+					$('<div class="close">Close</div>')
+						.appendTo($this)
+						.on('click', function() {
+							location.hash = '';
 						});
 
-		$('.scrolly').scrolly({
+				// Prevent clicks from inside article from bubbling.
-			speed: 1000,
+					$this.on('click', function(event) {
-			offset: function() { return (breakpoints.active('<=mobile') ? 70 : 190); }
+						event.stopPropagation();
 					});
 
-	// Parallax background.
+			});
 
-		// Disable parallax on IE/Edge (smooth scrolling is jerky), and on mobile platforms (= better performance).
+		// Events.
-			if (browser.name == 'ie'
+			$body.on('click', function(event) {
-			||	browser.name == 'edge'
-			||	browser.mobile)
-				settings.parallax = false;
 
-		if (settings.parallax) {
+				// Article visible? Hide.
+					if ($body.hasClass('is-article-visible'))
+						$main._hide(true);
 
-			var $dummy = $(), $bg;
+			});
+
+			$window.on('keyup', function(event) {
+
+				switch (event.keyCode) {
+
+					case 27:
+
+						// Article visible? Hide.
+							if ($body.hasClass('is-article-visible'))
+								$main._hide(true);
+
+						break;
+
+					default:
+						break;
+
+				}
+
+			});
+
+			$window.on('hashchange', function(event) {
+
+				// Empty hash?
+					if (location.hash == ''
+					||	location.hash == '#') {
+
+						// Prevent default.
+							event.preventDefault();
+							event.stopPropagation();
+
+						// Hide.
+							$main._hide();
+
+					}
+
+				// Otherwise, check for a matching article.
+					else if ($main_articles.filter(location.hash).length > 0) {
+
+						// Prevent default.
+							event.preventDefault();
+							event.stopPropagation();
+
+						// Show article.
+							$main._show(location.hash.substr(1));
+
+					}
+
+			});
+
+		// Scroll restoration.
+		// This prevents the page from scrolling back to the top on a hashchange.
+			if ('scrollRestoration' in history)
+				history.scrollRestoration = 'manual';
+			else {
+
+				var	oldScrollPos = 0,
+					scrollPos = 0,
+					$htmlbody = $('html,body');
 
 				$window
-				.on('scroll.overflow_parallax', function() {
+					.on('scroll', function() {
 
-					// Adjust background position.
+						oldScrollPos = scrollPos;
-						$bg.css('background-position', 'center ' + (-1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px');
+						scrollPos = $htmlbody.scrollTop();
 
 					})
-				.on('resize.overflow_parallax', function() {
+					.on('hashchange', function() {
-
+						$window.scrollTop(oldScrollPos);
-					// If we're in a situation where we need to temporarily disable parallax, do so.
+					});
-						if (breakpoints.active('<=narrow')) {
-
-							$body.css('background-position', '');
-							$bg = $dummy;
 
 			}
 
-					// Otherwise, continue as normal.
+		// Initialize.
-						else
-							$bg = $body;
 
-					// Trigger scroll handler.
+			// Hide main, articles.
-						$window.triggerHandler('scroll.overflow_parallax');
+				$main.hide();
+				$main_articles.hide();
 
-				})
+			// Initial article.
-				.trigger('resize.overflow_parallax');
+				if (location.hash != ''
-
+				&&	location.hash != '#')
-		}
+					$window.on('load', function() {
-
+						$main._show(location.hash.substr(1), true);
-	// Poptrox.
-		$('.gallery').poptrox({
-			useBodyOverflow: false,
-			usePopupEasyClose: false,
-			overlayColor: '#0a1919',
-			overlayOpacity: 0.75,
-			usePopupDefaultStyling: false,
-			usePopupCaption: true,
-			popupLoaderText: '',
-			windowMargin: 10,
-			usePopupNav: true
 					});
 
 })(jQuery);

assets/sass/base/_page.scss

@@ -1,27 +1,38 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
 
 /* Basic */
 
+	// MSIE: Required for IEMobile.
+		@-ms-viewport {
+			width: device-width;
+		}
+
 	// Ensures page width is always >=320px.
-		@include breakpoint(xsmall) {
+		@include breakpoint('<=xsmall') {
 			html, body {
 				min-width: 320px;
 			}
 		}
 
-	body {
+	// Set box model to border-box.
+	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+		html {
+			box-sizing: border-box;
+		}
 
-		// Prevents animation/transition "flicker" on page load.
+		*, *:before, *:after {
-		// Automatically added/removed by js/main.js.
+			box-sizing: inherit;
-			&.is-loading {
+		}
+
+	body {
+		background: _palette(bg);
+
+		// Stops initial animations until page loads.
+			&.is-preload {
 				*, *:before, *:after {
 					@include vendor('animation', 'none !important');
 					@include vendor('transition', 'none !important');
@@ -29,50 +40,3 @@
 			}
 
 	}
-
-	html {
-		height: 100%;
-	}
-
-	body {
-		height: 100%;
-		background-color: _palette(bg);
-		@include vendor('background-image', (
-			'url("images/overlay.png")',
-			'linear-gradient(60deg, #{transparentize(_palette(accent1), 0.5)} 5%, #{transparentize(_palette(accent2), 0.65)})',
-			'url("../../images/bg.jpg")'
-		));
-		background-repeat:		repeat,			no-repeat,			no-repeat;
-		background-size:		100px 100px,	cover,				cover;
-		background-position:	top left,		center center,		bottom center;
-		background-attachment:	fixed,			fixed,				fixed;
-
-		&:after {
-			content: '';
-			display: block;
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: inherit;
-			opacity: 0;
-			z-index: 1;
-
-			background-color: _palette(bg);
-			@include vendor('background-image', (
-				'url("images/overlay.png")',
-				'linear-gradient(60deg, #{transparentize(_palette(accent1), 0.5)} 5%, #{transparentize(_palette(accent2), 0.65)})'
-			));
-			background-repeat:		repeat,			no-repeat;
-			background-size:		100px 100px,	cover;
-			background-position:	top left,		center center;
-
-			@include vendor('transition', 'opacity #{_duration(bg)} ease-out');
-		}
-
-		&.is-loading {
-			&:after {
-				opacity: 1;
-			}
-		}
-	}

assets/sass/base/_reset.scss

@@ -0,0 +1,76 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+	html, body, div, span, applet, object,
+	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+	pre, a, abbr, acronym, address, big, cite,
+	code, del, dfn, em, img, ins, kbd, q, s, samp,
+	small, strike, strong, sub, sup, tt, var, b,
+	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+	form, label, legend, table, caption, tbody,
+	tfoot, thead, tr, th, td, article, aside,
+	canvas, details, embed, figure, figcaption,
+	footer, header, hgroup, menu, nav, output, ruby,
+	section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+
+	article, aside, details, figcaption, figure,
+	footer, header, hgroup, menu, nav, section {
+		display: block;
+	}
+
+	body {
+		line-height: 1;
+	}
+
+	ol, ul {
+		list-style:none;
+	}
+
+	blockquote,	q {
+		quotes: none;
+
+		&:before,
+		&:after {
+			content: '';
+			content: none;
+		}
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	body {
+		-webkit-text-size-adjust: none;
+	}
+
+	mark {
+		background-color: transparent;
+		color: inherit;
+	}
+
+	input::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+
+	input, select, textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+	}

assets/sass/base/_typography.scss

@@ -1,56 +1,53 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
 
 /* Type */
 
-	body, input, select, textarea {
+	html {
-		color: _palette(fg);
+		font-size: 16pt;
-		font-family: _font(family);
-		font-size: 14pt;
-		font-weight: _font(weight);
-		line-height: 2;
-		letter-spacing: _size(letter-spacing);
-		text-transform: uppercase;
 
-		@include breakpoint(xlarge) {
+		@include breakpoint('<=xlarge') {
+			font-size: 12pt;
+		}
+
+		@include breakpoint('<=small') {
 			font-size: 11pt;
 		}
 
-		@include breakpoint(xsmall) {
+		@include breakpoint('<=xxsmall') {
 			font-size: 10pt;
-			line-height: 1.75;
 		}
 	}
 
+	body, input, select, textarea {
+		color: _palette(fg);
+		font-family: _font(family);
+		font-weight: _font(weight);
+		font-size: 1rem;
+		line-height: 1.65;
+	}
+
 	a {
 		@include vendor('transition', (
-			'color #{_duration(transition)} ease',
+			'color #{_duration(transition)} ease-in-out',
-			'border-color #{_duration(transition)} ease'
+			'background-color #{_duration(transition)} ease-in-out',
+			'border-bottom-color #{_duration(transition)} ease-in-out'
 		));
-		color: inherit;
+		border-bottom: dotted 1px _palette(fg-light);
 		text-decoration: none;
-
+		color: inherit;
-		&:before {
-			@include vendor('transition', (
-				'color #{_duration(transition)} ease',
-				'text-shadow #{_duration(transition)} ease'
-			));
-		}
 
 		&:hover {
-			color: _palette(highlight);
+			border-bottom-color: transparent;
 		}
 	}
 
 	strong, b {
 		color: _palette(fg-bold);
+		font-weight: _font(weight-bold);
 	}
 
 	em, i {
@@ -63,61 +60,124 @@
 
 	h1, h2, h3, h4, h5, h6 {
 		color: _palette(fg-bold);
+		font-weight: _font(weight-bold);
 		line-height: 1.5;
 		margin: 0 0 (_size(element-margin) * 0.5) 0;
+		text-transform: uppercase;
+		letter-spacing: _font(letter-spacing);
 
 		a {
 			color: inherit;
 			text-decoration: none;
 		}
+
+		&.major {
+			border-bottom: solid _size(border-width) _palette(border);
+			width: -moz-max-content;
+			width: -webkit-max-content;
+			width: -ms-max-content;
+			width: max-content;
+			padding-bottom: 0.5rem;
+			margin: 0 0 (_size(element-margin) * 1) 0;
+		}
 	}
 
 	h1 {
-		font-size: 1.85em;
+		font-size: 2.25rem;
-		letter-spacing: (_size(letter-spacing) * 1.1);
+		line-height: 1.3;
-		margin: 0 0 (_size(element-margin) * 0.35) 0;
+		letter-spacing: _font(letter-spacing-heading);
+	}
+
+	h2 {
+		font-size: 1.5rem;
+		line-height: 1.4;
+		letter-spacing: _font(letter-spacing-heading);
+	}
+
+	h3 {
+		font-size: 1rem;
+	}
+
+	h4 {
+		font-size: 0.8rem;
+	}
+
+	h5 {
+		font-size: 0.7rem;
+	}
+
+	h6 {
+		font-size: 0.6rem;
+	}
+
+	@include breakpoint('<=small') {
+		h1 {
+			font-size: 1.75rem;
+			line-height: 1.4;
 		}
 
 		h2 {
 			font-size: 1.25em;
-	}
+			line-height: 1.5;
-
-	h3 {
-		font-size: 1em;
-	}
-
-	h4 {
-		font-size: 1em;
-	}
-
-	h5 {
-		font-size: 1em;
-	}
-
-	h6 {
-		font-size: 1em;
-	}
-
-	@include breakpoint(xsmall) {
-		h1 {
-			font-size: 1.65em;
 		}
 	}
 
 	sub {
-		font-size: 0.8em;
+		font-size: 0.8rem;
 		position: relative;
-		top: 0.5em;
+		top: 0.5rem;
 	}
 
 	sup {
-		font-size: 0.8em;
+		font-size: 0.8rem;
 		position: relative;
-		top: -0.5em;
+		top: -0.5rem;
+	}
+
+	blockquote {
+		border-left: solid (_size(border-width) * 4) _palette(border);
+		font-style: italic;
+		margin: 0 0 _size(element-margin) 0;
+		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+	}
+
+	code {
+		background: _palette(border-bg);
+		border-radius: _size(border-radius);
+		font-family: _font(family-fixed);
+		font-size: 0.9rem;
+		margin: 0 0.25rem;
+		padding: 0.25rem 0.65rem;
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: _font(family-fixed);
+		font-size: 0.9rem;
+		margin: 0 0 _size(element-margin) 0;
+
+		code {
+			display: block;
+			line-height: 1.75;
+			padding: 1rem 1.5rem;
+			overflow-x: auto;
+		}
 	}
 
 	hr {
 		border: 0;
 		border-bottom: solid _size(border-width) _palette(border);
-		margin: (_size(element-margin) * 2) 0;
+		margin: (_size(element-margin) * 1.375) 0;
+	}
+
+	.align-left {
+		text-align: left;
+	}
+
+	.align-center {
+		text-align: center;
+	}
+
+	.align-right {
+		text-align: right;
 	}

assets/sass/components/_actions.scss

@@ -0,0 +1,101 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Actions */
+
+	ul.actions {
+		@include vendor('display', 'flex');
+		cursor: default;
+		list-style: none;
+		margin-left: (_size(element-margin) * -0.5);
+		padding-left: 0;
+
+		li {
+			padding: 0 0 0 (_size(element-margin) * 0.5);
+			vertical-align: middle;
+		}
+
+		&.special {
+			@include vendor('justify-content', 'center');
+			width: 100%;
+			margin-left: 0;
+
+			li {
+				&:first-child {
+					padding-left: 0;
+				}
+			}
+		}
+
+		&.stacked {
+			@include vendor('flex-direction', 'column');
+			margin-left: 0;
+
+			li {
+				padding: (_size(element-margin) * 0.65) 0 0 0;
+
+				&:first-child {
+					padding-top: 0;
+				}
+			}
+		}
+
+		&.fit {
+			width: calc(100% + #{_size(element-margin) * 0.5});
+
+			li {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+				width: 100%;
+
+				> * {
+					width: 100%;
+				}
+			}
+
+			&.stacked {
+				width: 100%;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			&:not(.fixed) {
+				@include vendor('flex-direction', 'column');
+				margin-left: 0;
+				width: 100% !important;
+
+				li {
+					@include vendor('flex-grow', '1');
+					@include vendor('flex-shrink', '1');
+					padding: (_size(element-margin) * 0.5) 0 0 0;
+					text-align: center;
+					width: 100%;
+
+					> * {
+						width: 100%;
+					}
+
+					&:first-child {
+						padding-top: 0;
+					}
+
+					input[type="submit"],
+					input[type="reset"],
+					input[type="button"],
+					button,
+					.button {
+						width: 100%;
+
+						&.icon {
+							&:before {
+								margin-left: -0.5em;
+							}
+						}
+					}
+				}
+			}
+		}
+	}

assets/sass/components/_box.scss

@@ -0,0 +1,26 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+	.box {
+		border-radius: _size(border-radius);
+		border: solid _size(border-width) _palette(border);
+		margin-bottom: _size(element-margin);
+		padding: 1.5em;
+
+		> :last-child,
+		> :last-child > :last-child,
+		> :last-child > :last-child > :last-child {
+			margin-bottom: 0;
+		}
+
+		&.alt {
+			border: 0;
+			border-radius: 0;
+			padding: 0;
+		}
+	}

assets/sass/components/_button.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -16,54 +12,73 @@
 	button,
 	.button {
 		@include vendor('appearance', 'none');
-		@include vendor('transition', (
+		@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out');
-			'background-color #{_duration(transition)} ease-in-out',
-			'border-color #{_duration(transition)} ease-in-out',
-			'color #{_duration(transition)} ease-in-out'
-		));
-		display: inline-block;
-		height: _size(element-height);
-		line-height: _size(element-height);
-		padding: 0 1.5em;
 		background-color: transparent;
 		border-radius: _size(border-radius);
-		border: solid 1px _palette(border);
+		border: 0;
-		color: _palette(fg) !important;
+		box-shadow: inset 0 0 0 _size(border-width) _palette(border);
+		color: _palette(fg-bold) !important;
 		cursor: pointer;
+		display: inline-block;
+		font-size: 0.8rem;
+		font-weight: _font(weight);
+		height: _size(element-height);
+		letter-spacing: _font(letter-spacing);
+		line-height: _size(element-height);
+		outline: 0;
+		padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5));
 		text-align: center;
 		text-decoration: none;
+		text-transform: uppercase;
 		white-space: nowrap;
 
 		&:hover {
-			border-color: _palette(highlight);
+			background-color: _palette(border-bg);
-			color: _palette(highlight) !important;
+		}
+
+		&:active {
+			background-color: _palette(border-bg-alt);
 		}
 
 		&.icon {
-			padding-left: 1.35em;
-
 			&:before {
 				margin-right: 0.5em;
 			}
 		}
 
 		&.fit {
-			display: block;
 			width: 100%;
-			margin: 0 0 (_size(element-margin) * 0.5) 0;
 		}
 
 		&.small {
-			font-size: 0.8em;
+			font-size: 0.6rem;
+			height: (_size(element-height) * 0.75);
+			line-height: (_size(element-height) * 0.75);
 		}
 
-		&.big {
+		&.primary {
-			font-size: 1.35em;
+			background-color: _palette(fg-bold);
+			color: _palette(bg) !important;
+			font-weight: _font(weight-bold);
+
+			&:hover {
+			}
+
+			&:active {
+			}
 		}
 
 		&.disabled,
 		&:disabled {
 			@include vendor('pointer-events', 'none');
-			opacity: 0.5;
+			cursor: default;
+			opacity: 0.25;
 		}
 	}
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button {
+		line-height: calc(#{_size(element-height)} - 2px);
+	}

assets/sass/components/_form.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -13,20 +9,74 @@
 	form {
 		margin: 0 0 _size(element-margin) 0;
 
-		> .field {
-			margin: 0 0 _size(element-margin) 0;
-
 		> :last-child {
 			margin-bottom: 0;
 		}
+
+		> .fields  {
+			$gutter: (_size(element-margin) * 0.75);
+
+			@include vendor('display', 'flex');
+			@include vendor('flex-wrap', 'wrap');
+			width: calc(100% + #{$gutter * 2});
+			margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+			> .field {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				padding: $gutter 0 0 $gutter;
+				width: calc(100% - #{$gutter * 1});
+
+				&.half {
+					width: calc(50% - #{$gutter * 0.5});
+				}
+
+				&.third {
+					width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
+				}
+
+				&.quarter {
+					width: calc(25% - #{$gutter * 0.25});
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			> .fields {
+				$gutter: (_size(element-margin) * 0.75);
+
+				width: calc(100% + #{$gutter * 2});
+				margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+				> .field {
+					padding: $gutter 0 0 $gutter;
+					width: calc(100% - #{$gutter * 1});
+
+					&.half {
+						width: calc(100% - #{$gutter * 1});
+					}
+
+					&.third {
+						width: calc(100% - #{$gutter * 1});
+					}
+
+					&.quarter {
+						width: calc(100% - #{$gutter * 1});
+					}
+				}
+			}
 		}
 	}
 
 	label {
 		color: _palette(fg-bold);
 		display: block;
-		font-size: 0.9em;
+		font-size: 0.8rem;
+		font-weight: _font(weight);
+		letter-spacing: _font(letter-spacing);
+		line-height: 1.5;
 		margin: 0 0 (_size(element-margin) * 0.5) 0;
+		text-transform: uppercase;
 	}
 
 	input[type="text"],
@@ -36,12 +86,18 @@
 	select,
 	textarea {
 		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'border-color #{_duration(transition)} ease-in-out',
+			'box-shadow #{_duration(transition)} ease-in-out',
+			'background-color #{_duration(transition)} ease-in-out'
+		));
+		background-color: transparent;
 		border-radius: _size(border-radius);
-		border: solid 1px _palette(border);
+		border: solid _size(border-width) _palette(border);
 		color: inherit;
 		display: block;
 		outline: 0;
-		padding: 0 1em;
+		padding: 0 1rem;
 		text-decoration: none;
 		width: 100%;
 
@@ -50,29 +106,33 @@
 		}
 
 		&:focus {
-			border-color: _palette(highlight);
+			background: _palette(border-bg);
+			border-color: _palette(fg-bold);
+			box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
 		}
 	}
 
-	.select-wrapper {
+	select {
-		@include icon('\f078');
+		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
-		display: block;
+		background-size: 1.25rem;
-		position: relative;
+		background-repeat: no-repeat;
-
+		background-position: calc(100% - 1rem) center;
-		&:before {
-			color: _palette(border);
-			display: block;
 		height: _size(element-height);
-			line-height: _size(element-height);
+		padding-right: _size(element-height);
-			pointer-events: none;
+		text-overflow: ellipsis;
-			position: absolute;
+
-			right: 0;
+		option {
-			text-align: center;
+			color: _palette(fg);
-			top: 0;
+			background: _palette(bg);
-			width: _size(element-height);
 		}
 
-		select::-ms-expand {
+		&:focus {
+			&::-ms-value {
+				background-color: transparent;
+			}
+		}
+
+		&::-ms-expand {
 			display: none;
 		}
 	}
@@ -85,7 +145,7 @@
 	}
 
 	textarea {
-		padding: 0.75em 1em;
+		padding: 0.75rem 1rem;
 	}
 
 	input[type="checkbox"],
@@ -93,48 +153,59 @@
 		@include vendor('appearance', 'none');
 		display: block;
 		float: left;
-		margin-right: -2em;
+		margin-right: -2rem;
 		opacity: 0;
-		width: 1em;
+		width: 1rem;
 		z-index: -1;
 
 		& + label {
-			@include icon;
+			@include icon(false, solid);
+			@include vendor('user-select', 'none');
 			color: _palette(fg);
 			cursor: pointer;
 			display: inline-block;
-			font-size: 1em;
+			font-size: 0.8rem;
 			font-weight: _font(weight);
-			padding-left: (_size(element-height) * 0.6) + 0.75em;
+			margin: 0 0 (_size(element-margin) * 0.25) 0;
-			padding-right: 0.75em;
+			padding-left: (_size(element-height) * 0.6) + 1rem;
+			padding-right: 0.75rem;
 			position: relative;
 
 			&:before {
-				background: _palette(border-bg);
+				@include vendor('transition', (
+					'border-color #{_duration(transition)} ease-in-out',
+					'box-shadow #{_duration(transition)} ease-in-out',
+					'background-color #{_duration(transition)} ease-in-out'
+				));
 				border-radius: _size(border-radius);
-				border: solid 1px _palette(border);
+				border: solid _size(border-width) _palette(border);
 				content: '';
 				display: inline-block;
 				height: (_size(element-height) * 0.6);
 				left: 0;
-				line-height: (_size(element-height) * 0.575);
+				line-height: (_size(element-height) * 0.6);
+				//line-height: calc(#{_size(element-height) * 0.6} + 0em);
 				position: absolute;
 				text-align: center;
-				top: 0.15em;
+				top: -0.15rem;
 				width: (_size(element-height) * 0.6);
 			}
 		}
 
 		&:checked + label {
 			&:before {
-				color: _palette(highlight);
+				background: _palette(fg-bold) !important;
+				border-color: _palette(fg-bold) !important;
+				color: _palette(bg);
 				content: '\f00c';
 			}
 		}
 
 		&:focus + label {
 			&:before {
-				border-color: _palette(highlight);
+				background: _palette(border-bg);
+				border-color: _palette(fg-bold);
+				box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
 			}
 		}
 	}

assets/sass/components/_icon.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -12,10 +8,26 @@
 
 	.icon {
 		@include icon;
-		position: relative;
 		border-bottom: none;
+		position: relative;
 
 		> .label {
 			display: none;
 		}
+
+		&:before {
+			line-height: inherit;
+		}
+
+		&.solid {
+			&:before {
+				font-weight: 900;
+			}
+		}
+
+		&.brands {
+			&:before {
+				font-family: 'Font Awesome 5 Brands';
+			}
+		}
 	}

assets/sass/components/_icons.scss

@@ -0,0 +1,40 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+	ul.icons {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+			padding: 0 0.75em 0 0;
+
+			&:last-child {
+				padding-right: 0;
+			}
+
+			a {
+				border-radius: 100%;
+				box-shadow: inset 0 0 0 _size(border-width) _palette(border);
+				display: inline-block;
+				height: 2.25rem;
+				line-height: 2.25rem;
+				text-align: center;
+				width: 2.25rem;
+
+				&:hover {
+					background-color: _palette(border-bg);
+				}
+
+				&:active {
+					background-color: _palette(border-bg-alt);
+				}
+			}
+		}
+	}

assets/sass/components/_image.scss

@@ -0,0 +1,87 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+	.image {
+		border-radius: _size(border-radius);
+		border: 0;
+		display: inline-block;
+		position: relative;
+
+		&:before {
+			@include vendor('pointer-events', 'none');
+			background-image: url('../../images/overlay.png');
+			background-color: _palette(bg-overlay);
+			border-radius: _size(border-radius);
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			opacity: 0.5;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+
+		img {
+			border-radius: _size(border-radius);
+			display: block;
+		}
+
+		&.left,
+		&.right {
+			max-width: 40%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.left {
+			float: left;
+			padding: 0 1.5em 1em 0;
+			top: 0.25em;
+		}
+
+		&.right {
+			float: right;
+			padding: 0 0 1em 1.5em;
+			top: 0.25em;
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.main {
+			display: block;
+			margin: (_size(element-margin) * 1.25) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			&.main {
+				margin: (_size(element-margin) * 1) 0;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			&.main {
+				margin: (_size(element-margin) * 0.75) 0;
+			}
+		}
+	}

assets/sass/components/_list.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -34,7 +30,7 @@
 			padding-left: 0;
 
 			li {
-				border-top: solid 1px _palette(border);
+				border-top: solid _size(border-width) _palette(border);
 				padding: 0.5em 0;
 
 				&:first-child {
@@ -43,75 +39,6 @@
 				}
 			}
 		}
-
-		&.icons {
-			cursor: default;
-			list-style: none;
-			padding-left: 0;
-			margin-top: -0.675em;
-
-			li {
-				display: inline-block;
-				padding: 0.675em 0.5em;
-
-				a {
-					@include icon-alt(false, true);
-					position: relative;
-					display: block;
-					width: 3.75em;
-					height: 3.75em;
-					border-radius: 100%;
-					border: solid _size(border-width) _palette(border);
-					line-height: 3.75em;
-					overflow: hidden;
-					text-align: center;
-					text-indent: 3.75em;
-					white-space: nowrap;
-
-					&:before {
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: inherit;
-						height: inherit;
-						font-size: 1.85rem;
-						line-height: inherit;
-						text-align: center;
-						text-indent: 0;
-					}
-
-					&:hover {
-						border-color: _palette(highlight);
-					}
-				}
-			}
-
-			@include breakpoint(xsmall) {
-				li {
-					a {
-						&:before {
-							font-size: 1.5rem;
-						}
-					}
-				}
-			}
-		}
-
-		&.actions {
-			cursor: default;
-			list-style: none;
-			padding-left: 0;
-
-			li {
-				display: inline-block;
-				padding: 0 (_size(element-margin) * 0.5) 0 0;
-				vertical-align: middle;
-
-				&:last-child {
-					padding-right: 0;
-				}
-			}
-		}
 	}
 
 	dl {

assets/sass/components/_table.scss

@@ -0,0 +1,81 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid _size(border-width) _palette(border);
+				border-left: 0;
+				border-right: 0;
+
+				&:nth-child(2n + 1) {
+					background-color: _palette(border-bg);
+				}
+			}
+		}
+
+		td {
+			padding: 0.75em 0.75em;
+		}
+
+		th {
+			color: _palette(fg-bold);
+			font-size: 0.9em;
+			font-weight: _font(weight-bold);
+			padding: 0 0.75em 0.75em 0.75em;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid (_size(border-width) * 2) _palette(border);
+		}
+
+		tfoot {
+			border-top: solid (_size(border-width) * 2) _palette(border);
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid _size(border-width) _palette(border);
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: _size(border-width);
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: _size(border-width);
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+	}

assets/sass/layout/_bg.scss

@@ -0,0 +1,68 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* BG */
+
+	#bg {
+		@include vendor('transform', 'scale(1.0)');
+		-webkit-backface-visibility: hidden;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100vh;
+		z-index: 1;
+
+		&:before, &:after {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		&:before {
+			@include vendor('transition', 'background-color #{_duration(bg)} ease-in-out');
+			@include vendor('transition-delay', '#{_duration(intro)}');
+			background-image:		linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}),
+									url('../../images/overlay.png');
+			background-size:		auto,
+									256px 256px;
+			background-position:	center,
+									center;
+			background-repeat:		no-repeat,
+									repeat;
+			z-index: 2;
+		}
+
+		&:after {
+			@include vendor('transform', 'scale(1.125)');
+			@include vendor('transition', (
+				'transform #{_duration(article)} ease-in-out',
+				'filter #{_duration(article)} ease-in-out'
+			));
+			background-image:		url('../../images/bg.jpg');
+			background-position:	center;
+			background-size:		cover;
+			background-repeat:		no-repeat;
+			z-index: 1;
+		}
+
+		body.is-article-visible & {
+			&:after {
+				@include vendor('transform', 'scale(1.0825)');
+				@include vendor('filter', 'blur(0.2rem)');
+			}
+		}
+
+		body.is-preload & {
+			&:before {
+				background-color: _palette(bg-alt);
+			}
+		}
+	}

assets/sass/layout/_footer.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -11,29 +7,31 @@
 /* Footer */
 
 	#footer {
-		@include vendor('align-self', 'flex-end');
+		@include vendor('transition', (
+			'transform #{_duration(article)} ease-in-out',
+			'filter #{_duration(article)} ease-in-out',
+			'opacity #{_duration(article)} ease-in-out',
+		));
 		width: 100%;
-		padding: _size(element-margin) 0 0 0;
+		max-width: 100%;
-		color: rgba(255,255,255,0.75);
+		margin-top: 2rem;
-		cursor: default;
 		text-align: center;
 
 		.copyright {
-			margin: 0;
+			letter-spacing: _font(letter-spacing);
-			padding: 0;
+			font-size: 0.6rem;
-			font-size: 0.9em;
+			opacity: 0.75;
-			list-style: none;
+			margin-bottom: 0;
+			text-transform: uppercase;
+		}
 
-			li {
+		body.is-article-visible & {
-				display: inline-block;
+			@include vendor('transform', 'scale(0.95)');
-				margin: 0 0 0 (0.85em - (_size(letter-spacing) * 2));
+			@include vendor('filter', 'blur(0.1rem)');
-				padding: 0 0 0 0.85em;
+			opacity: 0;
-				border-left: solid _size(border-width) rgba(255,255,255,0.5);
+		}
-				line-height: 1;
 
-				&:first-child {
+		body.is-preload & {
-					border-left: 0;
+			opacity: 0;
-				}
-			}
 		}
 	}

assets/sass/layout/_header.scss

@@ -0,0 +1,261 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+	#header {
+		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'column');
+		@include vendor('align-items', 'center');
+		@include vendor('transition', (
+			'transform #{_duration(article)} ease-in-out',
+			'filter #{_duration(article)} ease-in-out',
+			'opacity #{_duration(article)} ease-in-out',
+		));
+		background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+		background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+		background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+		background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+		max-width: 100%;
+		text-align: center;
+
+		> * {
+			@include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
+			position: relative;
+			margin-top: 3.5rem;
+
+			&:before {
+				content: '';
+				display: block;
+				position: absolute;
+				top: calc(-3.5rem - 1px);
+				left: calc(50% - #{_size(border-width) * 1});
+				width: _size(border-width);
+				height: calc(3.5rem + 1px);
+				background: _palette(border);
+			}
+		}
+
+		> :first-child {
+			margin-top: 0;
+
+			&:before {
+				display: none;
+			}
+		}
+
+		.logo {
+			width: 5.5rem;
+			height: 5.5rem;
+			line-height: 5.5rem;
+			border: solid _size(border-width) _palette(border);
+			border-radius: 100%;
+
+			.icon {
+				&:before {
+					font-size: 2rem;
+				}
+			}
+		}
+
+		.content {
+			border-style: solid;
+			border-color: _palette(border);
+			border-top-width: _size(border-width);
+			border-bottom-width: _size(border-width);
+			max-width: 100%;
+
+			.inner {
+				@include vendor('transition', (
+					'max-height #{_duration(intro)} ease',
+					'padding #{_duration(intro)} ease',
+					'opacity #{_duration(article)} ease-in-out'
+				));
+				@include vendor('transition-delay', '0.25s');
+				padding: 3rem 2rem;
+				max-height: 40rem;
+				overflow: hidden;
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			p {
+				text-transform: uppercase;
+				letter-spacing: _font(letter-spacing);
+				font-size: 0.8rem;
+				line-height: 2;
+			}
+		}
+
+		nav {
+			ul {
+				@include vendor('display', 'flex');
+				margin-bottom: 0;
+				list-style: none;
+				padding-left: 0;
+				border: solid _size(border-width) _palette(border);
+				border-radius: _size(border-radius);
+
+				li {
+					padding-left: 0;
+					border-left: solid _size(border-width) _palette(border);
+
+					&:first-child {
+						border-left: 0;
+					}
+
+					a {
+						display: block;
+						min-width: 7.5rem;
+						height: 2.75rem;
+						line-height: 2.75rem;
+						padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
+						text-transform: uppercase;
+						letter-spacing: _font(letter-spacing);
+						font-size: 0.8rem;
+						border-bottom: 0;
+
+						&:hover {
+							background-color: _palette(border-bg);
+						}
+
+						&:active {
+							background-color: _palette(border-bg-alt);
+						}
+					}
+				}
+			}
+
+			&.use-middle {
+				&:after {
+					content: '';
+					display: block;
+					position: absolute;
+					top: 0;
+					left: calc(50% - #{_size(border-width) * 1});
+					width: _size(border-width);
+					height: 100%;
+					background: _palette(border);
+				}
+
+				ul {
+					li {
+						&.is-middle {
+							border-left: 0;
+						}
+					}
+				}
+			}
+		}
+
+		body.is-article-visible & {
+			@include vendor('transform', 'scale(0.95)');
+			@include vendor('filter', 'blur(0.1rem)');
+			opacity: 0;
+		}
+
+		body.is-preload & {
+			> * {
+				opacity: 0;
+			}
+
+			@include vendor('filter', 'blur(0.125rem)');
+
+			.content {
+				.inner {
+					max-height: 0;
+					padding-top: 0;
+					padding-bottom: 0;
+					opacity: 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			.content {
+				p {
+					br {
+						display: none;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> * {
+				margin-top: 2rem;
+
+				&:before {
+					top: calc(-2rem - 1px);
+					height: calc(2rem + 1px);
+				}
+			}
+
+			.logo {
+				width: 4.75rem;
+				height: 4.75rem;
+				line-height: 4.75rem;
+
+				.icon {
+					&:before {
+						font-size: 1.75rem;
+					}
+				}
+			}
+
+			.content {
+				.inner {
+					padding: 2.5rem 1rem;
+				}
+
+				p {
+					line-height: 1.875;
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			padding: 1.5rem 0;
+
+			.content {
+				.inner {
+					padding: 2.5rem 0;
+				}
+			}
+
+			nav {
+				ul {
+					@include vendor('flex-direction', 'column');
+					min-width: 10rem;
+					max-width: 100%;
+
+					li {
+						border-left: 0;
+						border-top: solid _size(border-width) _palette(border);
+
+						&:first-child {
+							border-top: 0;
+						}
+
+						a {
+							height: 3rem;
+							line-height: 3rem;
+							min-width: 0;
+							width: 100%;
+						}
+					}
+				}
+
+				&.use-middle {
+					&:after {
+						display: none;
+					}
+				}
+			}
+		}
+	}

assets/sass/layout/_main.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -11,64 +7,96 @@
 /* Main */
 
 	#main {
+		@include vendor('flex-grow', '1');
+		@include vendor('flex-shrink', '1');
+		@include vendor('display', 'flex');
+		@include vendor('align-items', 'center');
+		@include vendor('justify-content', 'center');
+		@include vendor('flex-direction', 'column');
 		position: relative;
 		max-width: 100%;
-		min-width: 27em;
+		z-index: 3;
-		@include padding(4.5em, 3em);
 
-		background: _palette(bg);
+		article {
-		border-radius: _size(border-radius);
+			@include vendor('transform', 'translateY(0.25rem)');
-		cursor: default;
-		opacity: 0.95;
-		text-align: center;
-
-		@include vendor('transform-origin', '50% 50%');
-		@include vendor('transform', 'rotateX(0deg)');
 			@include vendor('transition', (
-			'opacity #{_duration(main)} ease',
+				'opacity #{_duration(article)} ease-in-out',
-			'transform #{_duration(main)} ease'
+				'transform #{_duration(article)} ease-in-out'
 			));
-
+			@include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0));
-		.avatar {
 			position: relative;
-			display: block;
+			width: 40rem;
-			margin-bottom: _size(element-margin);
+			max-width: 100%;
+			background-color: transparentize(_palette(bg), 0.15);
+			border-radius: _size(border-radius);
+			opacity: 0;
 
-			img {
+			&.active {
-				display: block;
+				@include vendor('transform', 'translateY(0)');
-				margin: 0 auto;
+				opacity: 1;
-				border-radius: 100%;
-				box-shadow: 0 0 0 1.5em _palette(bg);
 			}
 
+			.close {
+				display: block;
+				position: absolute;
+				top: 0;
+				right: 0;
+				width: 4rem;
+				height: 4rem;
+				cursor: pointer;
+				text-indent: 4rem;
+				overflow: hidden;
+				white-space: nowrap;
+
 				&:before {
+					@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
 					content: '';
 					display: block;
 					position: absolute;
-				top: 50%;
+					top: 0.75rem;
-				left: -3em;
+					left: 0.75rem;
-				width: calc(100% + 6em);
+					width: 2.5rem;
-				height: _size(border-width);
+					height: 2.5rem;
-				z-index: -1;
+					border-radius: 100%;
-				background: _palette(border);
+					background-position: center;
-			}
+					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(border)}; stroke-width: 1; }</style><line x1="2" y1="2" x2="18" y2="18" /><line x1="18" y1="2" x2="2" y2="18" /></svg>');
+					background-size: 20px 20px;
+					background-repeat: no-repeat;
 				}
 
-		@include breakpoint(xsmall) {
+				&:hover {
-			min-width: 0;
-			width: 100%;
-			@include padding(4em, 2em);
-
-			.avatar {
 					&:before {
-					left: -2em;
+						background-color: _palette(border-bg);
-					width: calc(100% + 4em);
+					}
+				}
+
+				&:active {
+					&:before {
+						background-color: _palette(border-bg-alt);
+					}
 				}
 			}
 		}
 
-		body.is-loading & {
+		@include breakpoint('<=small') {
-			opacity: 0;
+			article {
-			@include vendor('transform', 'rotateX(15deg)');
+				@include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0));
+
+				.close {
+					&:before {
+						top: 0.875rem;
+						left: 0.875rem;
+						width: 2.25rem;
+						height: 2.25rem;
+						background-size: 14px 14px;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			article {
+				@include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0));
+			}
 		}
 	}

assets/sass/layout/_wrapper.scss

@@ -1,9 +1,5 @@
-@import '../libs/vars';
-@import '../libs/functions';
-@import '../libs/mixins';
-
 ///
-/// Identity by HTML5 UP
+/// Dimension by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -12,29 +8,29 @@
 
 	#wrapper {
 		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'column');
 		@include vendor('align-items', 'center');
 		@include vendor('justify-content', 'space-between');
-		@include vendor('flex-direction', 'column');
-		@include vendor('perspective', '1000px');
 		position: relative;
-		min-height: 100%;
+		min-height: 100vh;
-		padding: _size(element-margin);
+		width: 100%;
-		z-index: 2;
+		padding: 4rem 2rem;
-
+		z-index: 3;
-		> * {
-			z-index: 1;
-		}
 
 		&:before {
 			content: '';
 			display: block;
 		}
 
-		@include breakpoint(xxsmall) {
+		@include breakpoint('<=xlarge') {
-			padding: (_size(element-margin) * 0.5);
+			padding: 3rem 2rem;
 		}
 
-		body.is-ie & {
+		@include breakpoint('<=small') {
-			height: 100%;
+			padding: 2rem 1rem;
+		}
+
+		@include breakpoint('<=xsmall') {
+			padding: 1rem;
 		}
 	}

assets/sass/libs/_vars.scss

@@ -5,18 +5,39 @@
 
 // Duration.
 	$duration: (
-		navPanel: 0.5s
+		transition:					0.2s,
+		bg:							2.5s,
+		intro:						0.75s,
+		article:					0.325s
 	);
 
 // Size.
 	$size: (
-		navPanel: 275px
+		border-radius:				4px,
+		border-width:				1px,
+		element-height:				2.75rem,
+		element-margin:				2rem
 	);
 
 // Font.
 	$font: (
+		family:						('Source Sans Pro', sans-serif),
+		family-fixed:				('Courier New', monospace),
+		weight:						300,
+		weight-bold:				600,
+		letter-spacing:				0.2rem,
+		letter-spacing-heading:		0.5rem
 	);
 
 // Palette.
 	$palette: (
+		bg:							#1b1f22,
+		bg-alt:						#000000,
+		bg-overlay:					rgba(19,21,25,0.5),
+		fg:							#ffffff,
+		fg-bold:					#ffffff,
+		fg-light:					rgba(255,255,255,0.5),
+		border:						#ffffff,
+		border-bg:					rgba(255,255,255,0.075),
+		border-bg-alt:				rgba(255,255,255,0.175)
 	);

assets/sass/noscript.scss

@@ -3,23 +3,48 @@
 @import 'libs/mixins';
 @import 'libs/vendor';
 @import 'libs/breakpoints';
-@import 'libs/html-grid';
 
 /*
-	Overflow by HTML5 UP
+	Dimension by HTML5 UP
 	html5up.net | @ajlkn
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
+/* BG */
+
+	#bg {
+		body.is-preload & {
+			&:before {
+				background-color: transparent;
+			}
+		}
+	}
+
 /* Header */
 
 	#header {
 		body.is-preload & {
+			> * {
 				opacity: 1;
+			}
 
-			footer {
+			@include vendor('filter', 'none');
-				@include vendor('transform', 'none');
+
+			.content {
+				.inner {
+					max-height: none;
+					padding: 3rem 2rem;
 					opacity: 1;
 				}
 			}
 		}
+	}
+
+/* Main */
+
+	#main {
+		article {
+			opacity: 1;
+			margin: (_size(element-margin) * 2) 0 0 0;
+		}
+	}

index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE HTML>
 <!--
-	Overflow by HTML5 UP
+	Dimension by HTML5 UP
 	html5up.net | @ajlkn
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 -->
-<html lang="fr">
+<html>
 	<head>
-		<title>CharienkO</title>
+		<title>CHARIENKO</title>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<link rel="stylesheet" href="assets/css/main.css" />
@@ -14,157 +14,118 @@
 	</head>
 	<body class="is-preload">
 
-		<!-- Header -->
+		<!-- Wrapper -->
-			<section id="header">
+			<div id="wrapper">
-			</section>
 
-		<article class="container box style2">
+				<!-- Header -->
-			<header>
+					<header id="header">
-				<h2>CHARIENKO</h2>
+						<nav>
-				<p>Groupe de musique du monde.<br />
+							<ul>
-				Produit des bonnes ondes de musique tzigane dans la région nantaise.</p>
+								<li><a href="#intro">Intro</a></li>
+								<li><a href="#work">Couplet</a></li>
+								<li><a href="#about">Refrain</a></li>
+								<li><a href="#contact">Solo</a></li>
+							</ul>
+						</nav>
 					</header>
+
+				<!-- Main -->
+					<div id="main">
+
+						<!-- Intro -->
+							<article id="intro">
+								<h2 class="major">CHARIENKO</h2>
+								<p>
+									Groupe de musique du monde</br>
+									Produit des bonnes ondes de musique tzigane dans la région nantaise.
+								</p>
 							</article>
 
-		<article id="first" class="container box style1 left">
+						<!-- Work -->
-			<a href="#" class="image fit"><img src="images/Antoine.jpg" alt="" /></a>
+							<article id="work">
-			<div class="inner">
+								<h2 class="major">Le groupe</h2>
-				<header>
+								<span class="image main"><img src="images/Antoine.jpg" alt="" /></span>
-					<h2>Antoine</h2>
+								<h3>ANTOINE</h3>
-				</header>
 							    <p>
 									Autodidacte et amoureux de la musique, du jazz à l’électronique en passant par le rap et les musiques du monde, 
 									il fait battre le coeur de ses Komarades en tenant la pulsation. Ses outils ? La guitare, le cajon ou la basse, 
 									il n’hésite pas non plus à taper du pied et à faire vibrer les cymbalettes.
 								</p>
-			</div>
+								<span class="image main"><img src="images/Claire.jpg" alt="" /></span>
-		</article>
+								<h3>CLAIRE</h3>
-
-		<article class="container box style1 right">
-			<a href="#" class="image fit"><img src="images/Claire.jpg" alt="" /></a>
-			<div class="inner">
-				<header>
-					<h2>Claire</h2>
-				</header>
 							    <p>
 									Internationaliste de coeur, elle a grandit au son des guitares manouche et flamenca mais a la passion secrète 
 									des musiques extrêmes. Linguiste et poète, elle voyage. Son moyen de transport préféré ? Le train, là où les 
 									langues se confondent. 
 								</p>
-			</div>
+								<span class="image main"><img src="images/Jacques.jpg" alt="" /></span>
-		</article>
+								<h3>JACQUES</h3>
-
-		<article class="container box style1 left">
-			<a href="#" class="image fit"><img src="images/Jacques.jpg" alt="" /></a>
-			<div class="inner">
-				<header>
-					<h2>Jacques</h2>
-				</header>
 							    <p>
 									Un transmetteur du language par lequel il exprime ses émotions depuis plus d’une trentaine d’années déjà. Il a 
 									écouté Ravi Shankar, chanté du Brassens et du Ferré. Il en a bu des coupes pleines de jazz, s’en est tellement 
 									enivré qu’il en a fait son métier. Avide de découvertes, il joue volontiers ce que les autres ont à dire. 
 								</p>
-			</div>
+								<span class="image main"><img src="images/Laurence.jpg" alt="" /></span>
-		</article>
+								<h3>LAURENCE</h3>
-
-		<article class="container box style1 right">
-			<a href="#" class="image fit"><img src="images/Laurence.jpg" alt="" /></a>
-			<div class="inner">
-				<header>
-					<h2>Laurence</h2>
-				</header>
 							    <p>
 									Elle connaît les mystères classico-mélodiques et déchiffre la portée aussi vite que son ombre. Elle a le souci 
 									du détail mais ne s’interdit pas de belles envolées acrobatiques quand le coeur lui en dit. Un petit pécher mignon ? 
 									Les jeux ( on se ferait pas une petite partie de ton Galèrapagos ? )
 								</p>
-			</div>
+								<span class="image main"><img src="images/Pamphile.jpg" alt="" /></span>
-		</article>
+								<h3>PAMPHILE</h3>
-
-		<article class="container box style1 left">
-			<a href="#" class="image fit"><img src="images/Pamphile.jpg" alt="" /></a>
-			<div class="inner">
-				<header>
-					<h2>Pamphile</h2>
-				</header>
 							    <p>
 									On a pour habitude de dire qu’il est tombé dans la soupe musicale étant petit, outre le fait qu’il aime bien manger, 
 									c’est indéniablement un virtuose de l’accordéon. Petite libellule sans cesse en quête de nouvelles inspirations, 
 									il joue pour le théâtre, crée ses propres courts-métrage, s’adonne au rock celtique, rien ne semble l’arrêter !
 								</p>
-			</div>
 							</article>
 
-		<!-- Portfolio -->
+						<!-- About -->
-		<article class="container box style2">
+							<article id="about">
-			<header>
+								<h2 class="major">En concert...</h2>
-				<h2>Photos</h2>
+								<span class="image main"><img src="images/01.jpg" alt="" title="Concert chez l'habitant" /></span>
-			</header>
+								<span class="image main"><img src="images/02.jpg" alt="" title="Concert dans un Pub" /></span>
-			<div class="inner gallery">
+								<span class="image main"><img src="images/03.jpg" alt="" title="Raven" /></span>
-				<div class="row gtr-0">
+								<span class="image main"><img src="images/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/01.jpg" class="image fit"><img src="images/thumbs/01.jpg" alt="" title="Concert chez l'habitant" /></a></div>
+								<span class="image main"><img src="images/05.jpg" alt="" title="Cherish" /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/02.jpg" class="image fit"><img src="images/thumbs/02.jpg" alt="" title="Concert dans un Pub" /></a></div>
+								<span class="image main"><img src="images/06.jpg" alt="" title="Different." /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/03.jpg" class="image fit"><img src="images/thumbs/03.jpg" alt="" title="Raven" /></a></div>
+								<span class="image main"><img src="images/07.jpg" alt="" title="History was made here" /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/04.jpg" class="image fit"><img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></a></div>
+								<span class="image main"><img src="images/08.jpg" alt="" title="People come and go and walk away" /></span>
-				</div>
+								<span class="image main"><img src="images/09.jpg" alt="" title="Cherish" /></span>
-				<div class="row gtr-0">
+								<span class="image main"><img src="images/10.jpg" alt="" title="Different." /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/05.jpg" class="image fit"><img src="images/thumbs/05.jpg" alt="" title="Cherish" /></a></div>
+								<span class="image main"><img src="images/11.jpg" alt="" title="History was made here" /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/06.jpg" class="image fit"><img src="images/thumbs/06.jpg" alt="" title="Different." /></a></div>
+								<span class="image main"><img src="images/12.jpg" alt="" title="People come and go and walk away" /></span>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/07.jpg" class="image fit"><img src="images/thumbs/07.jpg" alt="" title="History was made here" /></a></div>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/08.jpg" class="image fit"><img src="images/thumbs/08.jpg" alt="" title="People come and go and walk away" /></a></div>
-				</div>
-				<div class="row gtr-0">
-					<div class="col-3 col-12-mobile"><a href="images/fulls/09.jpg" class="image fit"><img src="images/thumbs/09.jpg" alt="" title="Cherish" /></a></div>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/10.jpg" class="image fit"><img src="images/thumbs/10.jpg" alt="" title="Different." /></a></div>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/11.jpg" class="image fit"><img src="images/thumbs/11.jpg" alt="" title="History was made here" /></a></div>
-					<div class="col-3 col-12-mobile"><a href="images/fulls/12.jpg" class="image fit"><img src="images/thumbs/12.jpg" alt="" title="People come and go and walk away" /></a></div>
-				</div>
-			</div>
 							</article>
 
-		<!-- Contact 
+						<!-- Contact -->
-		<article class="container box style3">
+							<article id="contact">
-			<header>
+								<h2 class="major">Contact</h2>
-				<h2>Envoyer un message</h2>
+								<form action="https://formspree.io/f/xpzkbdgd" method="POST">
-				<p>Diam dignissim lectus eu ornare volutpat orci.</p>
+									<div class="fields">
-			</header>
+										<div class="field">
-			<form method="post" action="#">
+											<label for="message">Message</label>
-				<div class="row gtr-50">
+											<textarea name="message" id="message" rows="4"></textarea>
-					<div class="col-6 col-12-mobile"><input type="text" class="text" name="name" placeholder="Name" /></div>
+										</div>
-					<div class="col-6 col-12-mobile"><input type="text" class="text" name="email" placeholder="Email" /></div>
-					<div class="col-12">
-						<textarea name="message" placeholder="Message"></textarea>
 									</div>
-					<div class="col-12">
 									<ul class="actions">
-							<li><input type="submit" value="Envoyer un message" /></li>
+										<li><input type="submit" value="Envoyer Message" class="primary" /></li>
+										<li><input type="reset" value="Reset" /></li>
 									</ul>
-					</div>
-				</div>
 								</form>
-		</article>
--->
-		<section id="footer">
 								<ul class="icons">
-				<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
+									<li><a href="https://fr-fr.facebook.com/charienko.band" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
-				<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
+									<li><a href="https://soundcloud.com/charienko" class="icon brands fa-soundcloud"><span class="label">Soundcloud</span></a></li>
-				<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
-				<li><a href="#" class="icon brands fa-pinterest"><span class="label">Pinterest</span></a></li>
-				<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
-				<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
-			</ul>
-			<div class="copyright">
-				<ul class="menu">
-					<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
 								</ul>
+							</article>
 					</div>
-		</section>
+			</div>
+
+		<!-- BG -->
+			<div id="bg"></div>
 
 		<!-- Scripts -->
 			<script src="assets/js/jquery.min.js"></script>
-			<script src="assets/js/jquery.scrolly.min.js"></script>
-			<script src="assets/js/jquery.poptrox.min.js"></script>
 			<script src="assets/js/browser.min.js"></script>
 			<script src="assets/js/breakpoints.min.js"></script>
 			<script src="assets/js/util.js"></script>