updates.

assets/gulp/tasks/styl.js

@@ -10,6 +10,7 @@ var browserSync  = require('browser-sync');
 gulp.task('styl', function() {
     return gulp.src('styl/src/screen.scss')
         .pipe(sass({
+            errLogToConsole: true,
             includePaths: [
                 './styl/lib/__vendors/harp-susy/scss',
                 './styl/lib/__vendors/harp-compass/scss'

assets/js/src/app.coffee

@@ -1,44 +1 @@
-jQuery ($) ->
-
-	#*--------------------------------------------------------#
-	   # Sidr
-	#*--------------------------------------------------------#
-
-	$('#press').sidr
-		name: 'sidr'
-		side: 'right'
-
-	$('.close-sidr').click ->
-		$.sidr 'close', 'sidr'
-
-	$('a#press').bind "click touchstart", ->
-		$(@).toggleClass 'open'
-
-	#*--------------------------------------------------------#
-	   # bxslider
-	#*--------------------------------------------------------#
-
-	$('ul.sldr').bxSlider
-		speed: 1000
-		pause: 10000
-		auto: false
-		touchEnabled: false
-		pagerCustom: '.feature-pager'
-		controls: true
-		nextText: 'Previous'
-		prevText: 'Next'
-
-	#*--------------------------------------------------------#
-	   # Services
-	#*--------------------------------------------------------#
-
-	serviceTitle = $('.service-title-hldr')
-	serviceContent = $('.service-content')
-
-	serviceTitle.hoverIntent ->
-		$(@).parent().find(serviceContent).slideToggle()
-
-	hello = $('.hello')
-
-	$('.this-is-an-element').each ->
-		$(@).hide()
+jQuery ($) ->

assets/js/src/lib/menu.coffee

@@ -0,0 +1,34 @@
+#*--------------------------------------------------------#
+	# Mobile Menu
+#*--------------------------------------------------------#
+
+module.exports = ->
+
+	bodyEl = document.body
+	content = document.querySelector( '.content-wrap' )
+	openbtn = document.getElementById( 'open-button' )
+	closebtn = document.getElementById( 'close-button' )
+	isOpen = false
+
+	init = ->
+		initEvents()
+
+	initEvents = ->
+		openbtn.addEventListener( 'click', toggleMenu )
+		if closebtn
+			closebtn.addEventListener( 'click', toggleMenu )
+
+		# content.addEventListener 'click', (event) ->
+		# 	target = event.target
+		# 	if isOpen and target isnt openbtn
+		# 		toggleMenu()
+
+
+	toggleMenu = ->
+		if isOpen
+			classie.remove( bodyEl, 'show-menu' )
+		else
+			classie.add( bodyEl, 'show-menu' )
+		isOpen = !isOpen
+
+	init: init

assets/js/src/lib/modal.coffee

@@ -0,0 +1,51 @@
+#*--------------------------------------------------------#
+   # jQuery Modal Plugin
+#*--------------------------------------------------------#
+
+$ = jQuery
+
+settings = 
+	overlay: $('.md-overlay')
+	trigger: null
+	modal: null
+	close: null
+
+methods =
+
+	init: (options) ->
+		if options
+			$.extend settings, options
+
+		settings.trigger.click (event) ->
+			event.preventDefault()
+			modal = $(@).attr('data-modal')
+			modalID = '#' + modal
+			$(modalID).addClass('md-show')
+			settings.overlay.addClass 'overlay-it'
+
+		mdClose = (event) ->
+			event.preventDefault()
+			settings.overlay.removeClass 'overlay-it'
+			settings.modal.removeClass 'md-show'
+
+		autoPlay = (id, w, h) ->
+			src = id.find('iframe').attr 'src'
+			id.html '<iframe width="' + w + '" height="' + h + '" src="' + src + '?&autoplay=1" frameborder="0"></iframe>'
+
+		settings.close.on 'click', mdClose
+		settings.overlay.on 'click', mdClose
+
+
+	log: (message) ->
+		try
+			console.log message
+		catch e
+
+
+$.fn.modal = (method) ->
+	if methods[method]
+		methods[method].apply( @, Array.prototype.slice.call( arguments, 1 ))
+	else if typeof method == 'object' || !method
+		methods.init.apply( @, arguments )
+	else
+		$.error( 'Method ' +  method + ' does not exist on jQuery.plugin_name' )

assets/styl/src/mains/_base.scss

@@ -2,53 +2,27 @@
    Susy // Breakpoint
 \*--------------------------------------------------------*/
 
-// $susy: (
-// 	columns: 24,
-// 	gutters: 0.25,
-// 	gutter-position: after,
-// 	// debug: (
-// 	// 	image: show,
-// 	// 	color: rgba(#336699, .25),
-// 	// 	output: background,
-// 	// 	toggle: top right,
-// 	// ),
-// );
-
-// $at-1200: max-width 75em;
-// $at-1168: max-width 73em;
-// $at-1072: max-width 67em;
-// $at-1056: max-width 66em;
-// $at-1024: max-width 64em;
-// $at-976:  max-width 61em;
-// $at-960:  max-width 60em;
-// $at-896:  max-width 56em;
-// $at-848:  max-width 53em;
-// $at-768:  max-width 48em;
-// $at-720:  max-width 45em;
-// $at-684:  max-width 43em;
-// $at-640:  max-width 40em;
-// $at-608:  max-width 38em;
-// $at-560:  max-width 35em;
-// $at-540:  max-width 34em;
-// $at-480:  max-width 30em;
-// $at-400:  max-width 25em;
-// $at-320:  max-width 20em;
-
 $total-columns  : 24;
 $column-width   : 4em;
 $gutter-width   : 1em;
 $grid-padding   : 0;
 
 $container-style: fluid;
 
+$at-1216: 24 76em;
 $at-1200: 24 75em;
 $at-1168: 24 73em;
+$at-1120: 24 70em;
+$at-1072: 24 67em;
 $at-1056: 24 66em;
 $at-1024: 24 64em;
 $at-976:  24 61em;
 $at-960:  24 60em;
 $at-896:  24 56em;
+$at-864:  24 54em;
 $at-848:  24 53em;
+$at-816:  24 51em;
+$at-800:  24 50em;
 $at-768:  24 48em;
 $at-720:  24 45em;
 $at-684:  24 43em;
@@ -57,5 +31,6 @@ $at-608:  24 38em;
 $at-560:  24 35em;
 $at-540:  24 34em;
 $at-480:  24 30em;
+$at-440:  24 27.5em;
 $at-400:  24 25em;
 $at-320:  24 20em;

assets/styl/src/mains/_mixins.scss

@@ -76,4 +76,63 @@ $timing: cubic-bezier(0.190, 1.000, 0.220, 1.000);
 			right: 1rem;
 		}
 	}
-}
+}
+
+/*--------------------------------------------------------*\
+	Positioning and Triangles
+\*--------------------------------------------------------*/
+
+@mixin position($position, $args) {
+	position: $position;
+	$offsets: top right bottom left;
+	@each $o in $offsets {
+		$i: index($args, $o);
+
+		@if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number {
+			#{$o}: nth($args, $i + 1);
+		}
+	}
+}
+
+@mixin absolute($args) {
+	@include position(absolute, $args);
+}
+
+@mixin fixed($args) {
+	@include position(fixed, $args);
+}
+
+// @mixin triangle($dir, $left, $right, $height, $position, $args, $color) {
+
+// 	@include position($position, $args);
+// 	display: block;
+// 	width: 0;
+// 	height: 0;
+// 	content: '';
+// 	border-color: transparent;
+// 	border-style: solid;
+
+// 	@if $dir == top or $dir == bottom {
+// 		border-left-width:   $left;
+// 		border-right-width:  $right;
+// 	} 
+// 	@else if $dir == right or $dir == left {
+// 		border-bottom-width: $left;
+// 		border-top-width:    $right;
+// 	}
+
+// 	@if $dir == top {
+// 		border-bottom-width: $height;
+// 		border-bottom-color: $color;
+// 	} @elseif $dir == bottom {
+// 		border-top-width: $height;
+// 		border-top-color: $color;
+// 	} @elseif $dir == left {
+// 		border-right-width: $height;
+// 		border-right-color: $color;
+// 	} @elseif $dir == right {
+// 		border-left-width: $height;
+// 		border-left-color: $color;
+// 	}
+
+// }

assets/styl/src/mains/_universals.scss

@@ -2,27 +2,33 @@
    Universals
 \*--------------------------------------------------------*/
 
-*, *::before, *::after {
+html {
+	font-size: 16px;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 }
 
-html {
-	font-size: 16px;
+html, body, .wrapper { 
+	height: 100%; 
+}
+
+*, *::before, *::after {
+	box-sizing: inherit;
+	-webkit-font-smoothing: inherit;
 }
 
 a {
-	transition: all 0.25s ease-in;
+	transition: all 0.75s $timing;
 	text-decoration: none;
 }
 
 .wrapper {
 	@include container;
-	// opacity: 0;
-	// transition: opacity 0.5s ease-in-out;
-	// &.clean-load {
-	// 	opacity: 1;
-	// }
+	opacity: 0;
+	transition: opacity 1s ease;
+	&.clean-load {
+		opacity: 1;
+	}
 }
 
 img {
@@ -32,7 +38,6 @@ img {
 }
 
 .ctn {
-	//@include container(center);
 	@include container;
 	@include set-container-width(24, fluid);
 	display: block;
@@ -61,13 +66,8 @@ img {
    Mains
 \*--------------------------------------------------------*/
 
-section.each-section {
-	@include full;
-	padding: 5rem 0;
-}
-
 .section-title {
-	@include full;
+	@include span-columns(24,24);;
 	@include lt(2rem, 1.25);
 	margin-bottom: 1.5rem;
 }