Starting to build UI; everything spotify goes via getToken

src/scss/app.scss

@@ -1,10 +1,13 @@
 
 @import 'vendor/font-awesome/index';
 
+@import 'global/variables';
 @import 'global/core';
 @import 'global/reset';
 @import 'global/forms';
 
+@import 'components/sidebar';
 @import 'components/lists';
 @import 'components/track';
+@import 'components/header';
 

src/scss/components/_header.scss

@@ -0,0 +1,19 @@
+
+main {
+	header {
+		padding: 14px 20px;
+		background: #EEEEEE;
+
+		.icon {
+			display: inline-block;
+			padding-right: 14px;
+			height: 16px;
+		}
+
+		h1 {
+			font-size: 22px;
+			font-weight: 100;
+			display: inline-block;
+		}
+	}
+}

src/scss/components/_lists.scss

@@ -41,6 +41,7 @@
 		color: #CCCCCC;
 		text-transform: uppercase;
 		border-top: 0;
+		padding-bottom: 2px;
 	}
 
 
@@ -61,7 +62,7 @@
 		}
 
 		&.playing {
-			font-weight: bold;
+			font-weight: 500;
 		}
 	}
 

src/scss/components/_sidebar.scss

@@ -0,0 +1,73 @@
+
+aside{
+	
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background: #333333;
+	width: 200px;
+
+	nav {
+
+		a {
+			font-size: 16px;
+			color: #FFFFFF;
+			text-decoration: none;
+			display: block;
+			padding: 6px 18px 6px 14px;
+			border-left: 4px solid transparent;
+
+			&.active {
+				border-color: $turquoise;
+				background: rgba( 0,0,0,0.1 );
+			}
+
+			&:hover {
+				background: rgba( 255,255,255,0.1 );
+			}
+		}
+
+		section {
+			padding: 10px 0;
+
+			title {
+				display: block;
+				padding: 0 18px 2px;
+				font-size: 11px;
+				text-transform: uppercase;
+				opacity: 0.5;
+				color: #FFFFFF;
+			}
+		}
+
+	}
+
+	.player {
+		.track-in-focus {
+			font-size: 16px;
+			text-transform: uppercase;
+			text-align: center;
+			color: #FFFFFF;
+
+			.title {
+				@include one_line_text
+			}
+
+			.artist-list {
+				opacity: 0.5;
+				@include one_line_text
+
+				.artist a {
+					color: inherit;
+					text-decoration: none;
+					border-bottom: 1px dotted transparent;
+
+					&:hover {
+						border-color: #FFFFFF !important;
+					}
+				}
+			}
+		}
+	}
+}

src/scss/global/_core.scss

@@ -2,13 +2,29 @@
 
 body,
 html {
-	background: #FFFFFF;
+	background: #F5F5F5;
 	color: #000000;
-	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
+	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
 	font-size: 14px;
 }
 
 body {
 	overflow-y: scroll;
 	overflow-x: hidden;
+}
+
+main {
+
+	padding-left: 200px;
+
+	a {
+		color: inherit;
+		text-decoration: none;
+		border-bottom: 1px dotted transparent;
+
+		&:hover {
+			border-color: #000000;
+		}
+	}
+
 }

src/scss/global/_variables.scss

@@ -0,0 +1,8 @@
+
+$turquoise: #08d58f;
+
+@mixin one_line_text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}