From bac1df746b3ceab518c1c2ae603bdcb600a07aeb Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Mon, 26 Sep 2016 02:37:19 +0200
Subject: [PATCH] (Chore) Sass Variables: Prefix color variables with "$color-"
 / Add typography variables

---
 src/scss/_buttons.scss      | 33 +++++++------
 src/scss/_colors.scss       | 34 +++++++-------
 src/scss/_footer.scss       |  2 +-
 src/scss/_forms.scss        |  2 +-
 src/scss/_header.scss       |  5 +-
 src/scss/_home.scss         | 20 ++++----
 src/scss/_interior.scss     | 24 +++++-----
 src/scss/_junk-drawer.scss  |  2 +-
 src/scss/_layout.scss       |  4 +-
 src/scss/_nav.scss          | 93 +++++++++++++++++++------------------
 src/scss/_overlay-menu.scss | 24 +++++-----
 src/scss/_styleguide.scss   |  4 +-
 src/scss/_typography.scss   | 59 ++++++++++++++---------
 13 files changed, 159 insertions(+), 147 deletions(-)

diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
index 66b0b39..b7d149d 100644
--- a/src/scss/_buttons.scss
+++ b/src/scss/_buttons.scss
@@ -6,10 +6,9 @@
     line-height: 30px;
     height: 40px;
 	display: inline-block;
-	font-family: $font-heading;
 	font-weight: 300;
-	background-color: $blue;
-	color: $white;
+	background-color: $color-blue;
+	color: $color-white;
 	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13);
 	transition: all .2s ease;
 	&:hover {
@@ -25,33 +24,33 @@
 
 .btn-white-solid {
 	@extend .btn;
-	border-color: $white;
-	background-color: darken($white, 3);
+	border-color: $color-white;
+	background-color: darken($color-white, 3);
 	margin-bottom: 10px;
-	color: lighten($black, 5) !important;
+	color: lighten($color-black, 5) !important;
 	text-decoration: none;
 	&:hover {
-		background-color: $white;
+		background-color: $color-white;
 	}
 }
 
 .btn-green {
 	@extend .btn;
-	background-color: $green;
+	background-color: $color-green;
 	padding: 10px 20px 10px 20px;
-	color: $white !important;
+	color: $color-white !important;
 	text-decoration: none;
 	border: none;
 	&:hover {
-		background-color: darken($green, 3);
-		color: $white !important;
+		background-color: darken($color-green, 3);
+		color: $color-white !important;
 	}
 }
 
 .btn-blue {
 	@extend .btn;
-	background-color: $blue;
-	color: $white !important;
+	background-color: $color-blue;
+	color: $color-white !important;
 	text-decoration: none;
 	&:hover {
 	}
@@ -59,10 +58,10 @@
 
 .btn-blue-solid {
 	@extend .btn;
-	background-color: $blue;
-	color: $white !important;
+	background-color: $color-blue;
+	color: $color-white !important;
 	&:hover {
-		background-color: lighten($blue, 3);
-		color: $white !important;
+		background-color: lighten($color-blue, 3);
+		color: $color-white !important;
 	}
 }
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
index 924602d..4db3cc6 100644
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@@ -1,19 +1,19 @@
 // brand colors
-$black:		#2f2f2f;
-$white:		#ffffff;
-$blue:		#1c75bc;
+$color-black:		#2f2f2f;
+$color-white:		#ffffff;
+$color-blue:		#1c75bc;
 
 // site colors
-$red:		#ec2227;
-$green:		#1dd68a;
-$gray:		#f0f0f0;
-$dark-blue:	#0b3b5a;
-$gray-light: #f7f9fa;
+$color-red:		#ec2227;
+$color-green:		#1dd68a;
+$color-gray:		#f0f0f0;
+$color-blue-dark:	#0b3b5a;
+$color-gray-light: #f7f9fa;
 
 // for the style guide:
 
 @function contrast-color($color, $dark, $light, $threshold: 50) {
-	@if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
+	@if (lightness(scale-color($color, $color-green: 30%, $color-blue: -6%, $color-red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
 		@return $dark; // Lighter background, return dark color
 	} @else {
 		@return $light; // Darker background, return light color
@@ -21,16 +21,16 @@ $gray-light: #f7f9fa;
 }
 
 $color:
-	('black', $black),
-	('white', $white),
+	('black', $color-black),
+	('white', $color-white),
 
-	('blue', $blue),
-	('red', $red),
-	('green', $green),
+	('blue', $color-blue),
+	('red', $color-red),
+	('green', $color-green),
 
-	('gray', $gray),
-	('dark-blue', $dark-blue),
-	('gray-light', $gray-light);
+	('gray', $color-gray),
+	('dark-blue', $color-blue-dark),
+	('gray-light', $color-gray-light);
 
 @each $name, $bgcolor in $color {
 	.color__tile--#{$name}-bg {
diff --git a/src/scss/_footer.scss b/src/scss/_footer.scss
index 8866db4..465a429 100644
--- a/src/scss/_footer.scss
+++ b/src/scss/_footer.scss
@@ -22,7 +22,7 @@ footer
 
 
 	a {
-		color: $white;
+		color: $color-white;
     	line-height: 1.7;
 	}
 
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
index fc40cb3..0a2352f 100644
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@@ -2,7 +2,7 @@ form {
 	input {
 		font-size: 15px;
 		padding: 10px 5px 10px 5px;
-		border: 2px solid $black;
+		border: 2px solid $color-black;
 		box-sizing: border-box;
 		appearance: none;
 	}
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
index ce551b9..beedff8 100644
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@@ -1,12 +1,12 @@
 #top {
-	border-bottom: 1px solid rgba($white, 0.35);
+	border-bottom: 1px solid rgba($color-white, 0.35);
 	margin-bottom: 20px;
 }
 
 .hero {
 	position: relative;
 	min-height: 600px;
-	color: $white;
+	color: $color-white;
 
 	&__title, &__lead, &__text {
 		text-shadow: 2px 2px 5px rgba(black, 0.2);
@@ -22,7 +22,6 @@
 	}
 
 	&__lead {
-		font-family: $font-heading;
 		font-weight: 200;
 		font-size: 24px;
 		line-height: 1.25;
diff --git a/src/scss/_home.scss b/src/scss/_home.scss
index bdb46e9..d6aa01d 100644
--- a/src/scss/_home.scss
+++ b/src/scss/_home.scss
@@ -9,7 +9,7 @@ $homeSectionPaddingTop: 40px;
 		text-align: center;
 
 		&:nth-child(2n) {
-			background-color: $gray-light;
+			background-color: $color-gray-light;
 		}
 
 		.row {
@@ -69,7 +69,7 @@ $homeSectionPaddingTop: 40px;
 	.home-architecture-graphic {
 		> img {
 			max-width: 100%;
-			box-shadow: -5px 0 10px $black;
+			box-shadow: -5px 0 10px $color-black;
 			border-radius: 8px 0 0 0;
 		}
 	}
@@ -102,7 +102,7 @@ $homeSectionPaddingTop: 40px;
 				width: 819px;
 				height: 339px;
 				max-width: 150%;
-				background: linear-gradient(to right, $gray-light, rgba($gray-light, 0.5) 33%, rgba($gray-light, 0) 75%);
+				background: linear-gradient(to right, $color-gray-light, rgba($color-gray-light, 0.5) 33%, rgba($color-gray-light, 0) 75%);
 			}
 		}
 	}
@@ -122,13 +122,13 @@ $homeSectionPaddingTop: 40px;
 				top: -$homeSectionPaddingTop;
 				bottom: -$homeSectionPaddingTop;
 				width: 200%;
-				background: linear-gradient(to left, $white 50%, rgba($white, 0) 87.5%);
+				background: linear-gradient(to left, $color-white 50%, rgba($color-white, 0) 87.5%);
 			}
 		}
 	}
 
 	.home-get-started-cta {
-		background-color: $blue;
+		background-color: $color-blue;
 		color: white;
 		padding-bottom: 0;
 
@@ -142,7 +142,7 @@ $homeSectionPaddingTop: 40px;
 		}
 
 		.btn-white-solid {
-			color: $blue;
+			color: $color-blue;
 		}
 	}
 
@@ -171,8 +171,8 @@ $homeSectionPaddingTop: 40px;
 }
 
 .news-post {
-	background-color: $white;
-	box-shadow: 0 1px 4px rgba($black, 0.25);
+	background-color: $color-white;
+	box-shadow: 0 1px 4px rgba($color-black, 0.25);
 	margin: 20px 0;
 	.news-image {
 		position: relative;
@@ -208,11 +208,11 @@ $homeSectionPaddingTop: 40px;
 		}
 		h3 {
 			font-size: 18px;
-			color: $blue;
+			color: $color-blue;
 			line-height: 1.2;
 		}
 		.date {
-			color: lighten($black, 50%);
+			color: lighten($color-black, 50%);
 			font-size: 14px;
 		}
 		p {
diff --git a/src/scss/_interior.scss b/src/scss/_interior.scss
index 9c2d830..60f295e 100644
--- a/src/scss/_interior.scss
+++ b/src/scss/_interior.scss
@@ -1,5 +1,5 @@
 #title{
-	background-color: rgba($blue, .1);
+	background-color: rgba($color-blue, .1);
 	margin-bottom: 40px;
 	h1 {
 		padding-top: 60px;
@@ -41,7 +41,7 @@ iframe {
 	}
 }
 .divider {
-	border-top: 1px solid $gray;
+	border-top: 1px solid $color-gray;
 	text-align: center;
 	img {
 		width: 40px;
@@ -51,7 +51,7 @@ iframe {
 }
 
 .boxed-content {
-	border: 1px solid $blue;
+	border: 1px solid $color-blue;
 	padding: 20px 40px 0px 30px;
 	margin-top: 20px;
 	li {
@@ -66,19 +66,19 @@ iframe {
 }
 
 .downloads {
-		border: 2px solid $gray;
+		border: 2px solid $color-gray;
 		box-sizing: border-box;
 		padding: 10px;
 		margin-bottom: 20px;
 		h2 {
 			font-size: 16px;
 			text-transform: uppercase;
-			color: $black;
+			color: $color-black;
 			margin: 0px;
 		}
 	}
 	.callout-blue {
-		border: 2px solid $blue;
+		border: 2px solid $color-blue;
 		box-sizing: border-box;
 		padding: 10px;
 		margin-bottom: 20px;
@@ -86,10 +86,10 @@ iframe {
 		h2 {
 			font-size: 64px;
 			margin-bottom: 20px;
-			color: $blue;
+			color: $color-blue;
 		}
 		span {
-			color: $blue;
+			color: $color-blue;
 			text-transform: uppercase;
 			font-weight: bold;
 			font-size: 16px;
@@ -99,7 +99,7 @@ iframe {
 
 	}
 	.callout-green {
-		border: 2px solid $green;
+		border: 2px solid $color-green;
 		box-sizing: border-box;
 		padding: 10px;
 		margin-bottom: 20px;
@@ -107,10 +107,10 @@ iframe {
 		h2 {
 			font-size: 64px;
 			margin-bottom: 20px;
-			color: $green;
+			color: $color-green;
 		}
 		span {
-			color: $green;
+			color: $color-green;
 			text-transform: uppercase;
 			font-weight: bold;
 			font-size: 16px;
@@ -136,7 +136,7 @@ iframe {
 		width: 50%;
 		box-sizing: border-box;
 		padding: 0 50px;
-		border-right: 2px solid $gray;
+		border-right: 2px solid $color-gray;
 			img.icon {
 				width: 25px;
 				height: auto;
diff --git a/src/scss/_junk-drawer.scss b/src/scss/_junk-drawer.scss
index 7fb6bf7..45a1a66 100644
--- a/src/scss/_junk-drawer.scss
+++ b/src/scss/_junk-drawer.scss
@@ -22,7 +22,7 @@ a.blog_link {
 }
 
 .background-title {
-	background-color: $gray;
+	background-color: $color-gray;
 	padding: 10px;
 	margin-top: 30px;
 	margin-bottom: 0;
diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
index dda617c..48b2c48 100644
--- a/src/scss/_layout.scss
+++ b/src/scss/_layout.scss
@@ -1,8 +1,8 @@
 body {
 	margin: 0;
 	padding: 0;
-	color: $black;
-	background-color: $white;
+	color: $color-black;
+	background-color: $color-white;
 }
 
 .content {
diff --git a/src/scss/_nav.scss b/src/scss/_nav.scss
index 12324db..5975317 100644
--- a/src/scss/_nav.scss
+++ b/src/scss/_nav.scss
@@ -1,61 +1,62 @@
 $nav-height: 90px;
 
 .nav {
-    float: right;
-    text-align: right;
+	float: right;
+	text-align: right;
 
-    &__list {
-        list-style: none;
-    }
+	&__list {
+		list-style: none;
+	}
 
-    &__item {
-        position: relative;
-        display: inline-block;
-        text-transform: uppercase;
-        font-size: 14px;
-        letter-spacing: 0.02em;
-        line-height: $nav-height;
-        &:last-child > .nav__link {
-            padding-right: 0;
-        }
+	&__item {
+		position: relative;
+		display: inline-block;
+		font-weight: 300;
+		letter-spacing: 0.02em;
+		line-height: $nav-height;
+		&:last-child > .nav__link {
+			padding-right: 0;
+		}
 
-        &--languages {
-            & > .nav__link {
-                padding: 0 25px;
-            }
-        }
+		&--languages {
+			& > .nav__link {
+				padding: 0 25px;
+			}
+		}
 
-        &:hover {
-            .nav__sublist {
-                display: block;
-                opacity: 1;
-                animation: fadein 0.4s;
-            }
-        }
-    }
+		&:hover {
+			.nav__sublist {
+				display: block;
+				opacity: 1;
+				animation: fadein 0.4s;
+			}
+		}
+	}
 
-    &__sublist {
-        display: none;
-        position: absolute;
-        top: 100%;
-        right: 0;
-        padding-top: 10px;
-    }
+	&__sublist {
+		display: none;
+		position: absolute;
+		top: 100%;
+		right: 0;
+		padding-top: 10px;
+	}
 
-    &__subitem {
-        line-height: 45px;
-    }
+	&__subitem {
+		line-height: 45px;
+	}
 
-    &__link {
-        display: inline-block;
-        padding: 0 10px;
-        text-decoration: none;
-        color: rgba($white, 1);
-    }
+	&__link {
+		display: inline-block;
+		padding: 0 10px;
+		&, &:hover, &:visited, &:focus, &:active {
+			color: rgba($color-white, 1);
+			text-decoration: none;
+		}
+	}
 }
 
 
 @keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+	from { opacity: 0; }
+	to   { opacity: 1; }
 }
diff --git a/src/scss/_overlay-menu.scss b/src/scss/_overlay-menu.scss
index 6c893ae..b51f3ab 100644
--- a/src/scss/_overlay-menu.scss
+++ b/src/scss/_overlay-menu.scss
@@ -49,7 +49,7 @@
 			opacity: .7;
 		}
 		span {
-			background: $white;
+			background: $color-white;
 			border: none;
 			height: 4px;
 			width: 100%;
@@ -69,15 +69,15 @@
 
 	.button_container.active .top {
 		transform: translateY(8px) translateX(0) rotate(45deg);
-		background: $white;
+		background: $color-white;
 	}
 	.button_container.active .middle {
 		opacity: 0;
-		background: $white;
+		background: $color-white;
 	}
 	.button_container.active .bottom {
 		transform: translateY(-8px) translateX(0) rotate(-45deg);
-		background: $white;
+		background: $color-white;
 	}
 }
 
@@ -94,7 +94,7 @@
 		opacity: .7;
 	}
 	span {
-		background: $blue;
+		background: $color-blue;
 		border: none;
 		height: 4px;
 		width: 100%;
@@ -115,20 +115,20 @@
 
 .button_container.active .top {
 		transform: translateY(8px) translateX(0) rotate(45deg);
-		background: $blue;
+		background: $color-blue;
 }
 .button_container.active .middle {
 	opacity: 0;
-	background: $blue;
+	background: $color-blue;
 }
 .button_container.active .bottom {
 	transform: translateY(-8px) translateX(0) rotate(-45deg);
-	background: $blue;
+	background: $color-blue;
 }
 
 .overlay {
 	position: fixed;
-	background: $black;
+	background: $color-black;
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -175,7 +175,7 @@
 		a {
 			display: block;
 			position: relative;
-			color: $white;
+			color: $color-white;
 			text-decoration: none;
 			overflow: hidden;
 			padding-bottom: 15px;
@@ -189,10 +189,10 @@
 	.sign-up-btn {
 		border: none;
 		padding: 30px;
-		color: $green !important;
+		color: $color-green !important;
 		&:hover {
 			background: none !important;
-			color: $green !important;
+			color: $color-green !important;
 		}
 	}
 }
diff --git a/src/scss/_styleguide.scss b/src/scss/_styleguide.scss
index 47396f7..63aeb1e 100644
--- a/src/scss/_styleguide.scss
+++ b/src/scss/_styleguide.scss
@@ -27,13 +27,13 @@
 
 	.component {
 		margin: 20px 0;
-		box-shadow: 5px 5px 15px -5px $black;
+		box-shadow: 5px 5px 15px -5px $color-black;
 		border-radius: 10px;
 	}
 
 	.component__header {
 		padding: 20px;
-		border-bottom: 1px solid lighten($black, 50%);
+		border-bottom: 1px solid lighten($color-black, 50%);
 		border-radius: 10px 10px 0 0;
 	}
 
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index 4596a95..f9da39a 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -4,52 +4,65 @@
 // @import "fonts/open-sans/italic";
 @import "fonts/montserrat/montserrat";
 
-$font-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
-$font-heading: $font-body;
+$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
+$font-family-heading: $font-family-body;
+
+$font-size-base: 17px;
+$font-size-base-plus: 19px;
+$font-size-medium: 24px;
+$font-size-large: 30px;
+$font-size-xlarge: 40px;
+$font-size-xxlarge: 80px;
+
+$line-height-base: 1.5;
+$line-height-heading: 1.1;
+
+
 
-$font-base-size: 17px;
 
 body {
-	font-family: $font-body;
-	font-size: ($font-base-size / 16px * 100%);
-	line-height: 1.5;
+	font-family: $font-family-body;
+	font-size: ($font-size-base / 16px * 100%);
+	line-height: $line-height-base;
 	font-weight: 300;
 }
 
-p {
-	font-size: $font-base-size;
-	line-height: 1.5;
-	a {
-		color: $blue;
-		text-decoration: none;
-		&:hover {
-			text-decoration: underline;
-		}
+a {
+	color: $color-blue;
+	text-decoration: none;
+	&:hover, &:focus {
+
+	}
+	&:active {
+
+	}
+	&:visited {
+		color: $color-blue;
 	}
 }
 
 h1, h2, h3 {
-	font-family: $font-heading;
+	font-family: $font-family-heading;
+	line-height: $line-height-heading;
 	font-weight: 300;
 }
 
 h1 {
-	font-size: 36px;
-	line-height: 40px;
+	font-size: $font-size-xlarge;
 	font-weight: 300;
 }
 
 h2 {
-	font-size: 28px;
-	color: $blue;
+	font-size: $font-size-large;
+	color: $color-blue;
 }
 
 h3 {
-	font-size: 20px;
-	color: $black;
+	font-size: $font-size-medium;
+	color: $color-black;
 }
 
 a {
 	text-decoration: none;
-	color: $blue;
+	color: $color-blue;
 }