ul#side-menu
	each social in [ "facebook", "github", "instagram", "linkedin", "pinterest", "twitter", "vimeo", "youtube"]
		li(class=social)
			a(href="#")= social
			i.fa(class="fa-" + social)

$social-size: 50px;

$socials: (
 facebook: #3b5998,
 github: #4183c4,
 instagram: #517fa4,
 linkedin: #007bb6,
 pinterest: #cb2027,
 twitter: #00aced,
 vimeo: #aad450,
 youtube: #b00
);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


ul, li {
	list-style-type: none;
}

.container {
	max-width: 500px;
	margin: 2em auto;
	p {
		margin-bottom: 1.5em
	}
}
ul#side-menu {
	position: fixed;
	top: 50vh;
	transform: translateY(-50%);
	li {
		display: block;
		left: -100px;
		position: relative;
		width: 100px + $social-size;
		height: $social-size;;
		line-height: $social-size;
		transition: 0.35s ease;
		&:hover {
			left: 0;
		}
		
		a {
			text-decoration: none;
			display: block;
			float: left;
			width: 100px;
			padding-left: 12px;	
			color: #EFEFEF;
			text-transform: capitalize;
		}
		
		.fa {
			display: block;
			width: $social-size;
			text-align: center;
			float: right;
			font-size: $social-size * 0.6;
			line-height: $social-size;
			color: #EFEFEF;
		}
	}
}

@each $social, $color in $socials {
	li.#{$social} {
		background-color: darken($color, 5%);
		.fa {
			background-color: $color;
		}
	}
}