sass color variables

style/_common.scss

@@ -50,4 +50,9 @@ body, textarea, input, button {
 
 textarea {
 	resize: none;
+}
+
+button {
+	cursor: pointer;
+	font-weight: bold;
 }

style/_mask_project.scss

@@ -1,3 +1,18 @@
+$post-input-bg: #d9deff;
+$post-color: #323268;
+$post-bg: #B4BDFF;
+$message-color: #326526;
+$message-bg: #6DFF58;
+$picture-color: #635C28;
+$picture-bg: #F3EC9F;	
+$track-main-color: #00ff78;
+$track-off-track-color: #0000ff;
+$track-hitchhiking-color: #FF7814;
+$legend-color: #222;
+
+$feed-width: calc(30% - 1rem);
+$feed-width-min: calc(400px + 3rem);
+
 #messages {
 
 	#submap {
@@ -46,12 +61,12 @@
 			.fa-message {
 				font-size: 32px;
 				text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
-				color: #6DFF58;
+				color: $message-bg;
 			}
 			
 			.fa-message-in {
 				font-size: 13px;
-				color: #326526;
+				color: $message-color;
 				top: 3px;
 			}
 		}
@@ -70,7 +85,7 @@
 		}
 	
 		&.leaflet-control-layers-expanded {
-			color: #222;
+			color: $legend-color;
 			width: calc(100% - 2em - 16px);
 		}
 	
@@ -83,9 +98,11 @@
 		}
 	}
 
-	/* Pull right controls by 30% */
+	/* Pull right controls by $feed-width % */
 	.leaflet-right {
-		//See below #feed
+		width: $feed-width;
+		max-width: $feed-width-min;
+		
 		.leaflet-control {
 			left: -100%;
 		}
@@ -103,8 +120,6 @@
 	}
 
 	#legend {
-		//right: 30vw;
-					
 		.line {
 			display: block;
 			border-left: 2em solid;
@@ -112,52 +127,33 @@
 			padding-left: 0.5em;
 			margin: 1em 1em 0.5em;
 			font-size: 1em;
-			color: #222;
+			color: $legend-color;
 			
 			&:first-child {
 				margin-top: 0.5em;
 			}
 			
 			&.main {
-				border-color: #00ff78;
+				border-color: $track-main-color;
 			}
 			&.off-track {
-				border-color: #0000ff;
+				border-color: $track-off-track-color;
 			}
 			&.hitchhiking {
-				border-color: #FF7814;
+				border-color: $track-hitchhiking-color;
 			}
 		}
 	}
-
-	#feed, .leaflet-right {
-		width: calc(30% - 1rem);
-		max-width: calc(400px + 3rem);
-	}
 	
 	#feed {
 		position: absolute;
 		right: 0;
 		top: 0;
 		bottom: 0;
+		width: $feed-width;
+		max-width: $feed-width-min;
 		z-index: 999;
 		
-		input, textarea, button {
-			border: none;
-			padding: 0.5em 1em;
-			background: #F7F7F7;
-		}
-		
-		button {
-			background: #CCC;
-			cursor: pointer;
-			font-weight: bold;
-		}
-		
-		button: hover {
-			background: #F7F7F7;
-		}
-		
 		#posts {
 			position: absolute;
 			top: 0;
@@ -167,11 +163,13 @@
 			#poster {
 				
 				input, textarea, button {
+					border: none;
+					padding: 0.5em 1em;
 					border-radius: 3px;
-					background-color: #d9deff;
+					background-color: $post-input-bg;
-					color: #323268;
+					color: $post-color;
 				}
-				
+			
 				#post {
 					margin-bottom: 1em;
 					width: calc(100% - 2em);
@@ -183,21 +181,21 @@
 				
 				#submit {
 					margin-left: 1em;
-					background-color: #323268;
+					background-color: $post-color;
-					color: #B4BDFF;
+					color: $post-bg;
 					margin-bottom: 0.5em;
 					
 					&:hover {
-						background-color: #d9deff;
+						background-color: $post-input-bg;
-						color: #323268;			
+						color: $post-color;			
 					}	
 				}
 			}
 		
 			.post {
 				margin-bottom: 1em;
-				background: #B4BDFF;
+				background: $post-bg;
-				color: #323268;
+				color: $post-color;
 				border-radius: 3px;
 				width: calc(100% - 1em);
 				box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
@@ -239,8 +237,8 @@
 					padding: 0em 1em 0.5em;
 				}
 				&.picture {
-					background: #F3EC9F;
+					background: $picture-bg;
-					color: #635C28;
+					color: $picture-color;
 					
 					a {
 						display: inline-block;
@@ -257,8 +255,8 @@
 					}
 				}
 				&.message {
-					background: #6DFF58;
+					background: $message-bg;
-					color: #326526;
+					color: $message-color;
 					
 					p {
 						font-size: 0.9em;
@@ -282,15 +280,11 @@
 						
 						.fa {
 							font-size: 1.5em;
-							color: #323268;
+							color: $post-color;
 						}
 					}
 				}
 			}
-		
-			#loading {
-				
-			}
 		}
 	}
 }

todo

@@ -1,4 +1,3 @@
 To Do List
 ----------
 - Device/Spot Class
-- variablize colors scss