neo-hpstr-jekyll-theme 1.0.0

data/_sass/_grid.scss

@@ -0,0 +1,47 @@
+// Defining number of columns in the grid.
+// Common Values would be 12, 16 or 24
+$width: 100%;
+$def_grid: 12;
+$margin: 0;
+
+@mixin container(){
+  margin:0 auto;
+  width:$width;
+}
+                                      
+// Works out the width of elements based
+// on total number of columns and width
+// number of columns being displayed.
+// Removes 20px for margins
+@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
+  display:$display;
+  float:$float;
+  width:(100%/$grid * $cols) - ($margin * 2);
+}  
+
+// Allows for padding before element
+@mixin prefix($grid:$def_grid,$cols:''){
+  margin-left:(100%/$grid * $cols);
+}
+// Allows for padding after element
+@mixin suffix($grid:$def_grid,$cols:''){  
+  margin-right:(100%/$grid * $cols);    
+}
+// Removes left margin
+@mixin first(){
+  margin-left:0;
+}
+// Removes right margin
+@mixin last(){
+  margin-right:0;
+}
+
+@mixin push($grid:$def_grid,$move:'') {
+  position:relative;
+  left:(100%/$grid * $move);
+} 
+
+@mixin pull($grid:$def_grid,$move:''){
+  position:relative;
+  left:(100%/$grid * $move) * -1;
+}

data/_sass/_mixins.scss

@@ -0,0 +1,315 @@
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------------------
+// For clearing floats like a boss h5bp.com/q
+@mixin clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Webkit-style focus
+// --------------------
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted #333;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+@mixin center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// TYPOGRAPHY
+// --------------------------------------------------
+
+// Full-fat vertical rhythm
+// ------------------------
+@mixin font-size($size) {
+  font-size: 0px + $size;
+  font-size: 0rem + $size / $doc-font-size;
+  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
+  margin-bottom: 0px + $doc-line-height;
+  margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
+}
+
+// Just the REMs
+// -------------
+@mixin font-rem($size) {
+  font-size: 0px + $size;
+  font-size: 0rem + $size / $doc-font-size;
+}
+
+// Just font-size and line-height
+// ------------------------------
+@mixin font($size) {
+  font-size: 0px + $size;
+  font-size: 0rem + $size / $doc-font-size;
+  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
+}
+
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; 
+}
+
+// GRADIENTS
+// --------------------------------------------------
+
+@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
+  background-color: $endColor;
+  background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image  : -webkit-linear-gradient(left, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
+  background-image  : -moz-linear-gradient(left, $startColor, $endColor); 					 // FF 3.6+
+  background-image  : -ms-linear-gradient(left, $startColor, $endColor); 						 // IE10
+  background-image  : -o-linear-gradient(left, $startColor, $endColor); 						 // Opera 11.10
+  background-image  : linear-gradient(left, $startColor, $endColor); 							 // W3C
+  background-repeat : repeat-x; 
+}
+
+@mixin vertical($startColor : $white, $endColor:  $lightergrey) {
+  background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image  : -webkit-linear-gradient(top, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
+  background-color  : $endColor;
+  background-image  : -moz-linear-gradient(top, $startColor, $endColor);   					 // FF 3.6+
+  background-image  : -ms-linear-gradient(top, $startColor, $endColor); 						 // IE10
+  background-image  : -o-linear-gradient(top, $startColor, $endColor); 						 // Opera 11.10
+  background-image  : linear-gradient(top, $startColor, $endColor); 							 // W3C
+  background-repeat : repeat-x; 
+}
+
+@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
+  background-color  : $endColor;
+  background-image  : -moz-linear-gradient($deg, $startColor, $endColor); 					// FF 3.6+
+  background-image  : -ms-linear-gradient($deg, $startColor, $endColor); 						// IE10
+  background-image  : -webkit-linear-gradient($deg, $startColor, $endColor); 					// Safari 5.1+, Chrome 10+
+  background-image  : -o-linear-gradient($deg, $startColor, $endColor); 						// Opera 11.10
+  background-image  : linear-gradient($deg, $startColor, $endColor); 							// W3C
+  background-repeat : repeat-x; 
+}
+
+// .bordered(COLOR, COLOR, COLOR, COLOR);
+@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
+  border-top : solid 1px $top-color;
+  border-left : solid 1px $left-color;
+  border-right : solid 1px $right-color;
+  border-bottom : solid 1px $bottom-color; 
+}
+
+// ROUND CORNERS
+// --------------------------------------------------
+
+// .rounded(VALUE);
+@mixin rounded($radius:4px) {
+  -webkit-border-radius : $radius;
+  -moz-border-radius : $radius;
+  border-radius : $radius; 
+}
+
+// .border-radius(VALUE,VALUE,VALUE,VALUE);
+@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
+  -webkit-border-top-right-radius : $topright;
+  -webkit-border-bottom-right-radius : $bottomright;
+  -webkit-border-bottom-left-radius : $bottomleft;
+  -webkit-border-top-left-radius : $topleft;
+  -moz-border-radius-topright : $topright;
+  -moz-border-radius-bottomright : $bottomright;
+  -moz-border-radius-bottomleft : $bottomleft;
+  -moz-border-radius-topleft : $topleft;
+  border-top-right-radius : $topright;
+  border-bottom-right-radius : $bottomright;
+  border-bottom-left-radius : $bottomleft;
+  border-top-left-radius : $topleft;
+  -webkit-background-clip : padding-box;
+  -moz-background-clip : padding;  
+  background-clip : padding-box; 
+}
+
+// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
+@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
+  -webkit-box-shadow : $shadow;
+  -moz-box-shadow : $shadow;
+  box-shadow : $shadow; 
+}
+
+// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
+  -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+  -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+  box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); 
+}
+
+// .text-shadow();
+@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
+  text-shadow : $shadow; 
+}
+
+// TRANSFORMATIONS
+// --------------------------------------------------
+
+// .rotate(VALUEdeg);
+@mixin rotate($deg) {
+  -webkit-transform : rotate($deg);
+  -moz-transform : rotate($deg);
+  -ms-transform : rotate($deg);
+  -o-transform : rotate($deg);
+  transform : rotate($deg); 
+}
+
+// .scale(VALUE);
+@mixin scale($ratio) {
+  -webkit-transform : scale($ratio);
+  -moz-transform : scale($ratio);
+  -ms-transform : scale($ratio);
+  -o-transform : scale($ratio);
+  transform : scale($ratio); 
+}
+
+// .skew(VALUE, VALUE);
+@mixin skew($x: 0, $y: 0) {
+  -webkit-transform : skew($x, $y);
+  -moz-transform : skew($x, $y);
+  -ms-transform : skew($x, $y);
+  -o-transform : skew($x, $y);
+  transform : skew($x, $y); 
+}
+
+// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
+@mixin transition($transition) {
+  -webkit-transition : $transition;
+  -moz-transition : $transition;
+  -ms-transition : $transition;
+  -o-transition : $transition;
+  transition : $transition; 
+}
+
+// .translate(VALUE, VALUE)
+@mixin translate($x: 0, $y: 0) {
+  -webkit-transform : translate($x, $y);
+  -moz-transform : translate($x, $y);
+  -ms-transform : translate($x, $y);
+  -o-transform : translate($x, $y);
+  transform : translate($x, $y); 
+}
+
+@mixin translate3d($x: 0, $y: 0, $z: 0) {
+  -webkit-transform : translate($x, $y, $z);
+  -moz-transform : translate($x, $y, $z);
+  -ms-transform : translate($x, $y, $z);
+  -o-transform : translate($x, $y, $z);
+  transform : translate($x, $y, $z); 
+}
+
+@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
+  -webkit-animation: $name $duration $delay $ease;
+  -moz-animation:    $name $duration $delay $ease;
+  -ms-animation:     $name $duration $delay $ease;
+}
+
+// BACKGROUND
+// --------------------------------------------------
+
+// .background-alpha(VALUE VALUE);
+@mixin background-alpha($color: $white, $alpha: 1) {
+  background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); 
+}
+
+// .background-size(VALUE VALUE);
+@mixin background-size($size){
+  -webkit-background-size : $size;
+  -moz-background-size : $size;
+  -o-background-size : $size;
+  background-size : $size; 
+}
+
+// .background-clip(VALUE); (border-box, padding-box, content-box)
+@mixin background-clip($clip) {
+  -webkit-background-clip : $clip;
+  -moz-background-clip : $clip;
+  background-clip : $clip; 
+}
+
+// .box-sizing(VALUE); (border-box, padding-box, content-box)
+@mixin box-sizing($boxsize: border-box) {
+  -webkit-box-sizing : $boxsize;
+  -moz-box-sizing : $boxsize;
+  -ms-box-sizing : $boxsize;
+  box-sizing : $boxsize; 
+}
+
+// For image replacement
+@mixin hide-text() {
+  text-indent : 100%;
+  white-space : nowrap;
+  overflow : hidden; 
+}
+
+// Hide from visual and speaking browsers
+@mixin hidden() {
+  display : none !important; 
+  visibility : hidden; 
+}
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Hide but maintain layout
+@mixin invisible() { 
+  visibility : hidden; 
+}
+
+// .resize(VALUE) (none, both, horizontal, vertical, inherit)
+@mixin resize($direction: both) {
+  resize : $direction;
+  overflow : auto; 
+}
+
+// .userselect(VALUE) (all, element, none, text)
+@mixin user-select($select) {
+  -webkit-user-select : $select;
+  -moz-user-select : $select;
+  -o-user-select : $select;
+  user-select : $select; 
+}
+
+// Hidden but available to speaking browsers
+@mixin visuallyhidden() { 
+  overflow : hidden; 
+  position : absolute;
+  clip : rect(0 0 0 0); 
+  height : 1px; 
+  width : 1px;
+  margin : -1px; 
+  padding : 0; 
+  border : 0; 
+}
+
+// Make visuallyhidden focusable with a keyboard
+.visuallyhidden.focusable:active, 
+.visuallyhidden.focusable:focus { 
+  position : static;
+  clip : auto; 
+  height : auto; 
+  width : auto;
+  margin : 0; 
+  overflow: visible; 
+}

data/_sass/_page.scss

@@ -0,0 +1,674 @@
+body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	background-color: $body-color;
+	overflow-x: hidden;
+}
+
+// Main
+// --------------------------------------------------
+.entry,
+.hentry {
+	@include clearfix;
+	h1, h2, h3, h4, h5, h6, p, li {
+		word-wrap: break-word;
+	}
+}
+.hentry-dark {
+	background-color: $header-color;
+}
+.entry-content {
+	@include font-size(16);
+	// Dotted line underlines for links
+	p > a,
+	li > a {
+		border-bottom: 1px dotted lighten($link-color, 50);
+		&:hover {
+			border-bottom-style: solid;
+		}
+	}
+}
+
+///sections
+
+.content-header-title {
+	text-align: center;
+	margin: 30px 0 0;
+	h1 {
+		margin: 10px 20px;
+		font-weight: 700;
+		@include font-rem(32);
+		color: lighten($base-color,20);
+		@media #{$medium} {
+			@include font-rem(48);
+		}
+		@media #{$large} {
+			@include font-rem(60);
+		}
+	}
+	h2 {
+		margin: 0;
+		@include font-rem(18);
+		text-transform: uppercase;
+		color: lighten($base-color,40);
+		@media #{$medium} {
+			@include font-rem(24);
+		}
+	}
+	p {
+		color: lighten($base-color,20);
+	}
+}
+
+
+// Feature Image Caption
+.image-credit {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	margin: 0 auto;
+	max-width: 440px;
+	padding: 10px 15px;
+	background-color: rgba($base-color,0.5);
+	color: $white;
+	@include font-rem(12);
+	text-align: right;
+	@include border-radius(3px,0,0,3px);
+	z-index: 10;
+	@media #{$medium} {
+		max-width: 760px;
+	}
+	@media #{$large} {
+		max-width: 960px;
+	}
+	a {
+		color: $white;
+		text-decoration: none;
+	}
+}
+
+// Single Post and Page
+// --------------------------------------------------
+.entry-meta {
+	@include font-rem(12);
+	text-transform: uppercase;
+	color: lighten($base-color,60);
+	a {
+		color: lighten($base-color,60);
+	}
+	.vcard {
+		&:before {
+			content: " by ";
+		}
+	}
+	.tag {
+		display: inline-block;
+		margin: 4px;
+		color: $white;
+		@include rounded(3px);
+		background-color: lighten($base-color,50);
+		span {
+			float: left;
+			padding: 2px 6px;
+		}
+		.count {
+			background-color: lighten($base-color,40);
+			@include border-radius(3px,3px,0,0);
+		}
+		&:hover {
+			background-color: lighten($base-color,40);
+		}
+	}
+	.entry-reading-time {
+		float: right;
+	}
+}
+header .entry-meta {
+	display: none; // hide header meta on small screens
+	@media #{$medium} {
+		display: block;
+	}
+}
+#menu{
+  margin-bottom: 48px;
+}
+#post,
+#page {
+	.entry-content {
+		margin: 40px 2px 20px 2px;
+		padding: 10px 15px;
+		background-color: $white;
+		box-shadow: 0 0 0 0, 0 6px 12px rgba($black,0.1);
+		@include rounded(3px);
+		@media #{$medium} {
+			margin-left: 10px;
+			margin-right: 10px;
+			padding: 20px 30px;
+		}
+		@media #{$large} {
+			max-width: 800px;
+			margin: 50px auto 30px auto;
+			padding: 50px 80px;
+			> p:first-child {
+				@include font-size(20);
+			}
+		}
+	}
+	#disqus_thread {
+		margin: 40px 2px 20px 2px;
+		padding: 10px 15px;
+		background-color: $white;
+		box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1);
+		@include rounded(3px);
+		@media #{$medium} {
+			margin-left: 10px;
+			margin-right: 10px;
+			padding: 20px 30px;
+		}
+		@media #{$large} {
+			max-width: 800px;
+			padding: 50px 80px;
+			margin: 0 auto 30px auto;
+		}
+	}
+	.entry-meta {
+		margin: 50px 30px 30px;
+		text-align: center;
+	}
+}
+.entry-tags {
+	display: block;
+	margin-bottom: 6px;
+}
+.tag-heading,
+.year-heading {
+	margin-top: 0;
+}
+// Go to the exact location of bookmarks in tags, categories
+.anchor-bookmark{
+  display: block;
+  height: $menu-height; /*same height as header*/
+  margin-top: -$menu-height; /*same height as header*/
+  visibility: hidden;
+}
+// Permalink icon for link post
+.permalink {
+	margin-right: 7px;
+}
+// Post Pagination Module
+.pagination {
+	margin: 20px 10px;
+	text-align: center;
+	ul {
+		display: inline;
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+	li {
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+	.current-page {
+		font-weight: 700;
+	}
+}
+
+// Read More Module
+.read-more {
+	position: relative;
+	margin: 40px 2px 20px 2px;
+	padding: 40px 15px 25px;
+	background-color: $white;
+	box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1);
+	@include rounded(3px);
+	@media #{$medium} {
+		margin: 50px 10px 20px 10px;
+		padding: 50px 40px 25px;
+	}
+	@media #{$large} {
+		max-width: 800px;
+		padding: 50px 80px;
+		margin: 60px auto;
+	}
+	text-align: center;
+	@include clearfix;
+}
+.read-more-header {
+	position: absolute;
+	top: -20px;
+	left: 0;
+	right: 0;
+	height: 35px;
+	a {
+		@extend .btn;
+	}
+}
+.read-more-content {
+	@include font-size(16);
+	// Dotted line underlines for links
+	p > a,
+	li > a {
+		border-bottom: 1px dotted lighten($link-color, 50);
+		&:hover {
+			border-bottom-style: solid;
+		}
+	}
+	h3 {
+		margin: 0;
+		@include font-rem(28);
+		a {
+			color: $text-color;
+		}
+		@media #{$medium} {
+			@include font-rem(36);
+		}
+	}
+}
+.author-img {
+	width: 150px;
+	height: 150px;
+	border-radius: 50%;
+	-webkit-border-radius: 50%;
+	-moz-border-radius: 50%;
+	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
+}
+.author-container{
+	display: flex;
+}
+.author-bio{
+	padding-top: 30px;
+	padding-left: 20px;
+	flex-grow: 1;
+}
+ul.social-buttons li a {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    font-size: 20px;
+    line-height: 40px;
+    outline: 0;
+	  color: #fff;
+    background-color: #222;
+
+    -webkit-transition: all .3s;
+    -moz-transition: all .3s;
+    transition: all .3s;
+}
+.list-inline {
+  padding-left: 0;
+  margin-left: -5px;
+  list-style: none;
+}
+.list-inline > li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+ul.social-buttons li:hover a{
+		transform: scale(1.2, 1.2);;
+}
+ul.social-buttons li a:hover,
+ul.social-buttons li a:focus,
+ul.social-buttons li a:active {
+    color: #222;
+    background-color: #fec503;
+}
+.read-more-list {
+	border-top: solid 2px lighten($base-color,80);
+}
+.list-item {
+	width: 100%;
+	text-align: left;
+	h4 {
+		@include font-rem(18);
+		margin-bottom: 0;
+	}
+	span {
+		display: block;
+		@include font-rem(14);
+		color: lighten($base-color,50);
+	}
+	@media #{$medium} {
+		width: 49%;
+		float: left;
+		&:nth-child(2) {
+			text-align: right;
+		}
+	}
+}
+
+// Post Index
+// --------------------------------------------------
+#post-index {
+	#main {
+		margin: 40px 2px 20px 2px;
+		@media #{$medium} {
+			margin-left: 20px;
+			margin-right: 20px;
+		}
+		@media #{$large} {
+			max-width: 800px;
+			margin-top: 50px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+	article {
+		background-color: $white;
+		box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1);
+		@include rounded(3px);
+		margin-bottom: 20px;
+		padding: 25px 15px;
+		@media #{$medium} {
+			padding: 30px;
+		}
+		@media #{$large} {
+			margin-bottom: 30px;
+			padding: 50px 80px;
+		}
+	}
+}
+.entry-image-index {
+	margin-top: -25px;
+	margin-left: -15px;
+	margin-right: -15px;
+	margin-bottom: 10px;
+	position: relative;
+	@media #{$medium} {
+		margin-top: -30px;
+		margin-left: -30px;
+		margin-right: -30px;
+		margin-bottom: 15px;
+	}
+	@media #{$large} {
+		margin-top: -50px;
+		margin-left: -80px;
+		margin-right: -80px;
+		margin-bottom: 20px;
+	}
+	img {
+		@include border-radius(3px,0,0,3px); // round image corners
+	}
+}
+
+// Footer
+// --------------------------------------------------
+.footer-wrapper {
+	@include clearfix;
+	margin: 2em auto;
+	text-align: center;
+	color: lighten($text-color,20);
+	a {
+		color: lighten($text-color,20);
+	}
+}
+
+// Social Share
+// --------------------------------------------------
+.socialcount {
+	@include font-rem(16);
+	li {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	p > a,
+	li > a {
+		border-bottom-width: 0;
+	}
+}
+
+
+// Browser Upgrade
+// --------------------------------------------------
+.upgrade {
+	padding: 10px;
+	text-align: center;
+}
+
+// Google Search
+// --------------------------------------------------
+#goog-fixurl {
+	ul {
+		list-style: none;
+		margin-left: 0;
+		padding-left: 0;
+		li {
+			list-style-type: none;
+		}
+	}
+}
+#goog-wm-qt {
+	width: auto;
+	margin-right: 10px;
+	margin-bottom: 20px;
+	padding: 8px 20px;
+	display: inline-block;
+	@include font-rem(14);
+	background-color: $white;
+	color: $text-color;
+	border-width: 2px !important;
+	border-style: solid !important;
+	border-color: lighten($primary,50);
+	@include rounded(3px);
+}
+#goog-wm-sb {
+	@extend .btn;
+}
+
+// Header
+// --------------------------------------------------
+.entry-header {
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	height: 50px;
+	@media #{$medium} {
+		background-color: $header-color;
+		min-height: 300px;
+	}
+}
+.header-toggle{
+	display: block;
+	@media #{$large} {
+		display: none;
+	}
+}
+.header-title {
+	text-align: center;
+	position: absolute;
+	bottom: 0;
+	display: table;
+	margin-top: 0;
+	width: 100%;
+	overflow: hidden;
+	.header-title-wrap {
+		display: table-cell;
+		vertical-align: middle;
+		margin: 0 auto;
+		text-align: center;
+	}
+	h2 {
+		color: $white;
+	}
+	h1 {
+		font-weight: 700;
+		margin-bottom: 20px;
+		@include font-rem(32);
+		color: $white;
+		text-shadow: 1px 1px 4px rgba($base-color, 0.6);
+		display: block;
+		a {
+			color: $white;
+		}
+		@media #{$medium} {
+			@include font-rem(26);
+		}
+		@media #{$large} {
+			@include font-rem(36);
+		}
+	}
+	h1.post-title{
+		display: block;
+		@media #{$medium}{
+			display: none;
+		}
+	}
+	p {
+		color: $white;
+	}
+}
+.header-menu {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: $menu-height;
+	z-index: 20;
+	ul {
+		margin: 0 auto;
+		list-style-type: none;
+		height: 100%;
+		padding: 0;
+		@media #{$large} {
+			max-width: 900px;
+		}
+	}
+}
+.header-menu-top{
+	background-color: $menu-top;
+	box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
+}
+
+.header-menu-overflow{
+	background-color: $menu-overflow;
+	z-index: 100;
+	box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
+}
+.header-menu-overflow ul li a{
+	color: $white;
+}
+
+.header-menu-top .sub-item{
+	background-color: $menu-top;
+}
+
+.header-menu-overflow .sub-item{
+	background-color: $menu-overflow;
+}
+
+.header-item,
+.header-item-title {
+	float: right;
+	padding-left: 20px;
+	padding-right: 20px;
+	border-top-color: transparent;
+	border-top-style: solid;
+	border-top-width: 5px;
+	box-sizing: border-box;
+
+	a {
+		vertical-align: middle;
+		display: table-cell;
+		height: $menu-height - 2;
+	}
+}
+///sections
+.logo{
+  width: $menu-height;
+  height: $menu-height;
+  float: left;
+  padding: 10px;
+}
+.header-item-container{
+	height: 100%;
+}
+.header-item{
+	height: 100%;
+	display: none;
+	@media #{$large} {
+		display: block;
+	}
+}
+.header-item-title{
+	float: left;
+	border-top-width: 0px;
+	height: 100%;
+	a.title {
+		font-size: 1.5rem;
+	    padding-left: 5px;
+		display: none;
+		vertical-align: middle;
+		height: $menu-height - 2;
+		@media #{$medium}{
+			display: table-cell;
+		}
+	}
+}
+
+.header-item.active,
+.header-item:hover{
+  border-top-color: $header-margin;
+}
+
+.header-item:hover .header-submenu{
+	display: block;
+	position: absolute;
+}
+
+.header-submenu {
+	display: none;
+	border-top: 2px solid $header-margin;
+	width: 200px;
+	z-index: 100;
+	list-style-type: none;
+	transform: translateX(-25%);
+}
+
+.sub-item {
+	position: relative;
+	padding-left: 10px;
+	width: 100%;
+	border-bottom: 1px solid gray;
+	border-left: 1px solid;
+	height: 50px;
+	text-decoration: none;
+}
+
+.sub-item a{
+	vertical-align: middle;
+	display: table-cell;
+	height: 50px;
+}
+.sub-item:hover {
+	border-bottom-color: $header-margin;
+	border-left-color: $header-margin;
+}
+
+.button-twitter {
+	color: $white;
+	position: fixed;
+	margin-top: $menu-height / 2 - 20;
+	margin-right: 10px;
+	top: 0;
+	right: 0;
+	z-index: 10000000000;
+	@media #{$large}{
+		top: auto;
+		bottom: 0;
+	}
+
+	span {
+		display: none;
+		@media #{$medium}{
+			display: inline;
+		}
+	}
+}