Initial commit

scss/utilities/_color_utilities.scss

@@ -0,0 +1,49 @@
+@function dynamic-color($color, $lightness: 50, $dark-color: $text-color, $light-color: $brand-white) {
+     @if (lightness($color) > $lightness){
+        @return $dark-color; // Lighter background, return dark color
+    }
+    @else {
+         @return $light-color; // Darker background, return light color
+    }
+}
+@function paired-color($brand-color) {
+		$return-color: dynamic-color($brand-color) !default;
+
+    @if ($brand-color == $brand-color-d){
+        $return-color: $brand-color-a;
+    }
+    @if ($brand-color == $brand-color-e){
+        $return-color: $brand-color-b;
+    }
+    @if ($brand-color == $brand-color-f){
+        $return-color: $brand-color-c;
+    }
+
+		@return $return-color;
+}
+
+@function tint($color, $percentage) {
+  @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(#000, $color, $percentage);
+}
+
+@mixin placeholder($color) {
+	&:-moz-placeholder {
+		color: $color; // Firefox 4-18
+	}
+
+	&::-moz-placeholder {
+		color: $color; // Firefox 19+
+	}
+
+	&:-ms-input-placeholder {
+		color: $color; // Internet Explorer 10+
+	}
+
+	&::-webkit-input-placeholder {
+		color: $color; // Safari and Chrome
+	}
+}

scss/utilities/_global.scss

@@ -0,0 +1,59 @@
+* {
+	-webkit-tap-highlight-color: transparent;
+	word-wrap: break-word;
+	box-sizing: border-box;
+}
+
+html {
+	-webkit-overflow-scrolling: touch;
+
+    min-height: 100%;
+	margin-top: 0 !important;
+
+	background: $background-color;
+
+	overflow-x: hidden;
+
+    font-size: 100%;
+
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	// Disable iOS/WinMobile font size changes
+	@include breakpoint(max-width $breakpoint-xs-width-max) {
+		-webkit-text-size-adjust: 100%;
+		-ms-text-size-adjust: 100%;
+	}
+}
+
+.rtl {
+	text-align: right;
+
+	svg {
+        transform: scaleX(-1);
+	}
+}
+
+
+body {
+	color: $text-color;
+
+	font-family: $font-family-base;
+	font-size: $font-size-base;
+	font-weight: $font-weight-regular;
+	line-height: $line-height-base;
+}
+
+.content {
+	font-weight: $font-weight-light;
+}
+
+img {
+	max-width: 100%;
+}
+
+.container {
+	@include container;
+	width: $max-width;
+	padding: 0 40px;
+}

scss/utilities/_hex.scss

@@ -0,0 +1,61 @@
+.hex-grid {
+	@include breakpoint($sm) {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 auto;
+		overflow: hidden;
+		padding-bottom: 6.6%
+	}
+}
+
+@mixin hex__outer {
+	position: relative;
+	visibility: hidden;
+	outline: 1px solid transparent;
+
+	&::after {
+		content:'';
+		display: block;
+		padding-bottom: 86.602%; // =  100 / tan(60) * 1.5
+	}
+}
+
+@mixin hex__middle {
+	position: absolute;
+	width: 92%;
+	padding-bottom: 106.232%; // width / sin(60)
+	margin: 0 1%;
+	overflow: hidden;
+	outline: 1px solid transparent;
+	transform: rotate3d(0,0,1,-60deg) skewY(30deg);
+
+	> * {
+		position: absolute;
+		visibility: visible;
+		outline: 1px solid transparent;
+	}
+}
+@mixin hex__inner {
+	display: block;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	overflow: hidden;
+	transform: skewY(-30deg) rotate3d(0,0,1,60deg);
+
+	img {
+		left: -100%;
+		right: -100%;
+		min-width: 100%;
+		height: 100%;
+		max-width: 200%;
+		margin: 0 auto;
+		transform: rotate3d(0,0,0,0deg);
+	}
+
+	> * {
+		position: absolute;
+		visibility: visible;
+		outline: 1px solid transparent;
+	}
+}

scss/utilities/_icons.scss

@@ -0,0 +1,104 @@
+$icons: (
+	flickr: "\eaa3",
+	flickr2: "\eaa4",
+	github: "\eab0",
+	lastfm: "\eacb",
+	envelope-o: "\f003",
+	twitter: "\f099",
+	facebook: "\f09a",
+	facebook-f: "\f09a",
+	pinterest: "\f0d2",
+	google-plus: "\f0d5",
+	envelope: "\f0e0",
+	linkedin: "\f0e1",
+	rss-square: "\f143",
+	youtube: "\f167",
+	xing: "\f168",
+	youtube-play: "\f16a",
+	dropbox: "\f16b",
+	instagram: "\f16d",
+	tumblr: "\f173",
+	foursquare: "\f180",
+	vk: "\f189",
+	weibo: "\f18a",
+	renren: "\f18b",
+	google: "\f1a0",
+	stumbleupon: "\f1a4",
+	delicious: "\f1a5",
+	digg: "\f1a6",
+	file-pdf-o: "\f1c1",
+	file-word-o: "\f1c2",
+	file-excel-o: "\f1c3",
+	file-powerpoint-o: "\f1c4",
+	vine: "\f1ca",
+	tencent-weibo: "\f1d5",
+	qq: "\f1d6",
+	wechat: "\f1d7",
+	weixin: "\f1d7",
+	paper-plane: "\f1d8",
+	send: "\f1d8",
+	paper-plane-o: "\f1d9",
+	send-o: "\f1d9",
+	pinterest-p: "\f231",
+	medium: "\f23a",
+	tripadvisor: "\f262",
+	vimeo: "\f27d",
+	snapchat-ghost: "\f2ac",
+	meetup: "\f2e0"
+);
+
+// For adding font icons to elements using CSS pseudo-elements
+// http://jaydenseric.com/blog/fun-with-sass-and-font-icons
+@mixin icon($position: before, $icon: false, $styles: true) {
+	
+    @if $position == both {
+        $position: 'before, &:after';
+    }
+    // Either a :before or :after pseudo-element, or both, defaulting to :before
+    &:#{$position} {
+        @if $icon {
+            // A particular icon has been specified
+            content: "#{map-get($icons, $icon)}";
+        }
+        @if $styles {
+            // Supportive icon styles required
+            vertical-align: middle;
+			text-transform: none;
+			font-weight: normal;
+			font-style: normal;
+			font-variant: normal;
+			font-family: '#{$icon-font}';
+			line-height: 1;
+
+			speak: none;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+        }
+        // Include any extra rules supplied for the pseudo-element
+        @content;
+    }
+}
+
+@font-face {
+	font-weight: normal;
+	font-style: normal;
+	font-family: '#{$icon-font}';
+	src:url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.eot?-gfwsty');
+	src:url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.eot?#iefix-gfwsty') format('embedded-opentype'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.ttf?-gfwsty') format('truetype'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.woff?-gfwsty') format('woff'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.svg?-gfwsty##{$icon-font}') format('svg');
+}
+
+// Set the required styles on all icons
+[class^="icon--"],
+[class*=" icon--"] {
+    @include icon;
+}
+
+// Setup a class name for each icon
+@each $name, $char in $icons {
+    .icon--#{$name} {
+		@include icon(before, $name, false);
+    }
+}

scss/utilities/_layout_utilities.scss

@@ -0,0 +1,53 @@
+.visually-hidden {
+	position: absolute; 
+	overflow: hidden; 
+	clip: rect(0 0 0 0); 
+	height: 1px; 
+	width: 1px; 
+	margin: -1px; 
+	padding: 0; 
+	border: 0; 
+}
+
+@mixin hidden-xs { 
+	@include breakpoint(max-width $breakpoint-sm-width) {
+		display: none;
+	}
+}
+
+@mixin hidden-sm {
+	@include breakpoint($breakpoint-sm-width $breakpoint-sm-width-max) {
+		display: none;
+	}	
+}
+
+
+@mixin hidden-md {
+	@include breakpoint($breakpoint-md-width $breakpoint-md-width-max) {
+		display: none;
+	}	
+}
+
+@mixin hidden-lg {
+	@include breakpoint($breakpoint-lg-width) {
+		display: none;
+	}
+}
+
+@mixin with-rtl($padding-end: null) {
+	@content;
+
+	@if $padding-end != null {
+		padding-right: $padding-end;
+	}
+
+	.rtl & {
+		@include with-layout(rtl) {
+			@content;
+
+			@if $padding-end != null {
+				padding-left: $padding-end;
+			}
+		}
+	}
+}

scss/utilities/_monitor_mq.scss

@@ -0,0 +1,27 @@
+// for monitor-mq.js
+.monitor-mq {
+	display: block;
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	top: -9999em;
+	left: -9999em;
+	// smallest
+	width: $sm;
+
+	@include breakpoint($md) {
+		width: $md;
+	}
+
+	@include breakpoint($lg) {
+		width: $lg;
+	}
+
+	@include breakpoint($xl) {
+		width: $xl;
+	}
+
+	@include breakpoint($xxl) {
+		width: $xxl;
+	}
+}

scss/utilities/_reset.scss

@@ -0,0 +1 @@
+/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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;}/* HTML5 display-role reset for older browsers */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;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

scss/utilities/_typography.scss

@@ -0,0 +1,78 @@
+p {
+    margin-bottom: 15px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+
+    &[href^=tel] {
+        direction: ltr;
+        unicode-bidi: embed;
+    }
+}
+
+li {
+    margin-bottom: 5px;
+}
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5 {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: $font-weight-regular;
+    font-family: $font-family-heading;
+    line-height: 1.2;
+}
+
+.h1 {
+    font-size: 30px;
+    font-size: calc(20px + 2vw);
+    
+    @include breakpoint($xl) {
+        font-size: 48px;
+    }
+}
+
+.h2 {
+    font-size: 22px;
+    font-size: calc(18px + 0.7vw);
+
+    @include breakpoint($xl) {
+        font-size: 28px;
+    }
+}
+.h3 {
+    font-size: 18px;
+    font-size: calc(16px + 0.6vw);
+    
+    @include breakpoint($xl) {
+        font-size: 24px;
+    }
+}
+.h4 {
+    font-size: 16px;
+    font-size: calc(16px + 0.5vw);
+    
+    @include breakpoint($lg) {
+        font-size: 22px;
+    }
+}
+.h5 {
+    font-size: 15px;
+    font-size: calc(15px + 0.25vw);
+    
+    @include breakpoint($lg) {
+        font-size: 18px;
+    }
+}
+.h6 {
+    font-size: $font-size-base;
+}

scss/utilities/_variables.scss

@@ -0,0 +1,86 @@
+$susy: (
+  columns: 12,
+  gutters: 1,
+  math: fluid,
+  output: float,
+  gutter-position: after
+  // debug: (image: show)
+);
+
+// break points
+$breakpoint-xs-width: 480px;
+$breakpoint-sm-width: 800px;
+$breakpoint-md-width: 1080px;
+$breakpoint-lg-width: 1200px;
+$breakpoint-xl-width: 1400px;
+$breakpoint-xxl-width: 1920px;
+
+//aliases
+$xs: $breakpoint-xs-width;
+$sm: $breakpoint-sm-width;
+$md: $breakpoint-md-width;
+$lg: $breakpoint-lg-width;
+$xl: $breakpoint-xl-width;
+$xxl: $breakpoint-xxl-width;
+
+$breakpoint-xxs-width-max: $xs - 1;
+$breakpoint-xs-width-max: $sm - 1;
+$breakpoint-sm-width-max: $md - 1;
+$breakpoint-md-width-max: $lg - 1;
+$breakpoint-lg-width-max: $xl - 1;
+$breakpoint-xl-width-max: $xxl - 1;
+
+$retina-query: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
+
+$max-width: $xl;
+
+// Colors
+$brand-color-a: #0da8ad;
+$brand-color-b: #FFC56C;
+$brand-color-c: #003A6F;
+$brand-color-d: #FF5959;
+$brand-color-e: #814374;
+$brand-color-f: #323232;
+$brand-color-g: #777777;
+
+$brand-colors: (
+  a: $brand-color-a,
+  b: $brand-color-b,
+  c: $brand-color-c,
+  d: $brand-color-d,
+  e: $brand-color-e,
+  f: $brand-color-f
+);
+
+$brand-white: #FFF;
+$brand-black: #000;
+
+$text-color: #333 !default;
+$background-color: #f9f9f9;
+
+// Typography
+$font-family-sans-serif: 'Didact Gothic', Helvetica, Arial, sans-serif;
+$font-family-serif: 'Georgia Pro', Georgia, Times, serif;
+$font-family-mono: 'Anonymous Pro', 'Droid Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, 'Lucida Console', Courier, monospace;
+$font-family-base: $font-family-sans-serif;
+$font-family-heading: 'Ubuntu', $font-family-sans-serif;
+$icon-font: 'icomoon';
+$directory-fonts: './fonts';
+
+// Font Sizing
+$font-size-base: 16px;
+$line-height-base: 1.8;
+$font-size-small: 14px;
+
+$font-weight-bold: 700;
+$font-weight-medium: 500;
+$font-weight-regular: 400;
+$font-weight-light: 100;
+
+// z-index
+$z-below: 0;
+$z-base: 1;
+$z-small: 5;
+$z-mid: 10;
+$z-high: 100;
+$z-super: 1000;