@import 'ext/fonts';
@import 'ext/normalize';
@import 'begin';
@import 'syntax';

$linkColor: #999;
$mobileW: 768px;
$smallMobileW: 480px;
$bigScreenW: 1600px;
$leftWidth: 220px;

$gray: #999;
$lightGray: #eee;

*,*:before,*:after {
	box-sizing: border-box;
}

body {
	font-family: 'Nunito Sans', sans-serif;
	@include fluidType(16px, 19px);
	line-height: 1.55em;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: $linkColor;
	text-decoration: none;
	transition: border-bottom 0.4s;
	&:hover {
		border-bottom: 0.5px solid $linkColor;
	}
}


h1, h2, h3 {
	line-height: 1.2em;
}

h1 {
	@include fluidType(36px, 48px);
}

h2 {
	font-weight: bold;
	@include fluidType(28px, 32px);
}

h4 {
	font-weight: normal;
	@include fluidType(18px, 20px);
}

figcaption {
	font-size: 10pt;
	line-height: 1.5em;
	margin-top: -1em;
}

header {
	// background-size: cover;
	padding: 120px 0;
	color: #fff;
	overflow: hidden;
	h2 {
		font-weight: normal;
		margin-top: 5px;
	}
	h1 {
		margin: 0;
	}

	.social {
		overflow: hidden;
		list-style-type: none;
		padding: 0;
		margin-top: 0;
		li {
			color: #fff;
			float: left;
			i {
				&:first-child::before {
					margin-left: 0;
				}
				@include fluidType(26px, 34px);
				transition: color .3s;
				&:hover {
					color: $gray;
				}
			}
		}
	}
}

.clearfix {
	clear: both;
}

//
// Basic Container Class
//
.container {
	margin:0 150px;
	max-width: 720px;

	div.highlighter-rouge {
		right: 150px;
	}

	@media screen and  (max-width: $mobileWidth) {
		margin:0 15px; 
		div.highlighter-rouge {
			right: 15px;
		}
		div.highlight {
			padding: 30px 15px;
		}
	}

	@media screen and (max-width: $tabWidth) and (min-width: $mobileWidth){
		margin:0 40px;	
		div.highlighter-rouge {
			right: 40px;
		}
		div.highlight {
			padding: 30px 40px;
		}
	}

	@media screen and (max-width: $desktopWidth) and (min-width: $tabWidth){
		margin:0 80px;
		div.highlighter-rouge {
			right: 80px;
		}
		div.highlight {
			padding: 30px 80px;
		}
	}

	@media screen and (min-width: $desktopWidth) and (max-width: 1280px) {
		margin:0 100px;
		div.highlighter-rouge {
			right: 100px;
		}
		div.highlight {
			padding: 30px 100px;
		}
	}
}

.post-title {
	color: #222;
	transition: color .3s ease;
	margin: .1em 0;
	&:hover {
		color: $gray;
		border-bottom: 0;
	}
}

.post-description {
	font-weight: normal;
	color: #ddd;

	margin-top:.5em;
	margin-bottom: 1.3em;
}

.post-date {
	color: $gray;
	.icon-calendar {
		margin-right: 6px;
	}
}

.post-tags {
	list-style-type: none;
	padding: 0;
	li {
		float: left;
		padding: 10px 20px;
		background-color: $lightGray;
		color: #000;
		margin: 5px;
		border-radius: 2px;
		@include fluidType(15px, 17px);
		&:first-child {
			margin-left: 0;
		}
	}
}

.posts {
	list-style-type: none;
	padding: 0;
	>li {
		margin-bottom: 30px;
		padding-bottom: 20px;
		&:not(:last-child) {
			border-bottom: 1px solid $lightGray;
		}
	}
}

.posts, .post-container {
	margin-top: 40px;
}

.post-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	a:hover {
		border-bottom: none;
	}
}

.post-container {
	img {
		margin: 20px 0;
	}
}

.navbar {
	display: flex;
	position: absolute;
	top: 0;
	right: 5vw;
	a {
		color: inherit;
	}
	ul {
		list-style-type: none;
		li {
			// background-color: #ff9f1c;
			border: 1px solid #fff;
			float: left;
			// margin: 5px;
			&:not(:first-child){
				border-left: 0;
			}
			padding: 10px 25px;
			// border-radius: 4px;
			@include fluidType(15px, 17px);
			transition: background-color .3s ease-in;
			&:hover {
				background-color: rgba(#fff, 0.15);
				cursor: pointer;
			}
			&.active {
				background-color: rgba(#fff, 0.15);
			}
		}
	}
}