hacks-guide-minimal-mistakes-theme/assets/less/page.less

body {
	background-color: @bodycolor;
	font-family: @base-font;
	font-color: @textcolor;
}
.navigation-wrapper {
	.container();
	padding: 2em 0 0;
	font-family: @heading-font;
	font-weight: 700;
	text-transform: uppercase;
	.clearfix();
}
.site-name {
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	margin-bottom: 1em;
	float: none;
	display: block;
}
.top-navigation {
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	margin-bottom: 1em;
	float: none;
	display: block;
}
.top-navigation {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li {
		list-style-type: none;
		display: inline;
		margin-right: 25px;
		white-space: nowrap;
		a { 
			decoration: none;
			border-bottom: 0 solid transparent;
			.transition(all .2s);
		}
	}
}
#main {
	counter-reset: captions;
	.container();
	.clearfix();
	clear: both;
	margin-top: 1em;
	article {
		.container();
		.grid(12,10);
		.prefix(12,1);
		.suffix(12,1);
		margin-bottom: 2em;
	}
}
#index {
	.container();
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	margin-bottom: 2em;
	h3 {
		margin: 0;
		padding-bottom: .5em;
		.font-rem(28);
		border-bottom: 1px solid lighten(@black,70);
	}
	article {
		h2 {
			margin-bottom: 4px;
			.font-rem(20);
		}
		p {
			.font-rem(14);
		}
		p+p {
			text-indent: 0;
		}
	}
}
.image-wrap {
	position: relative;
	margin-bottom: 2em;
	&:after {
		content: " ";
		display: block;
		position: absolute;
		bottom: -1px;
		left: 8%;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-bottom-color: @bodycolor;
	}
	img {
		width: 100%;
		height: auto;
		-ms-interpolation-mode: bicubic;
	}
	.headline-wrap {
		position: absolute;
		bottom: 25px;
		.prefix(12,1);
		h1, h2 {
			color: @white;
			.text-shadow(0 1px 2px rgba(0,0,0,.25));
		}
	}
}
.byline {
	clear: both;
	font-size: 80%;
}
.article-author-side,
.article-author-bottom {
	h3 {
		margin-bottom: 0;
	}
	p {
		font-size: 80%;
		font-style: italic;
	}
	a, a:hover {
		border-bottom: 0 solid transparent;
	}
	img.bio-photo {
		width: 100px;
		height: 100px;
		.rounded(100px);
	}
}
.author-social {
  display: block;
  margin-bottom: 5px;
  .font-rem(14);
  color: @black;
  &:visited {
    color: @black;
  }
  &:hover {
    .scale(1.1);
  }
  &:active {
    .translate(0, 2px);
  }
}
.article-author-side {
	display: none;
}
.article-author-bottom {
	margin-bottom: 1em;
	.bio-photo {
		float: left;
		margin-right: 25px;
	}
	.author-social {
		display: inline-block;
		margin-right: 5px;
	}
}
.article-wrap {
	// Dotted line underlines for links
	p > a,
	li > a {
		border-bottom: 1px dotted lighten(@link-color, 50);
		&:hover {
			border-bottom-style: solid;
		}
	}
	p > a.reversefootnote, 
	li > a.reversefootnote {
		border-bottom-width: 0;
	}
}
.toc {
	display: none;
	font-size: 95%;
	.opacity(0.7);
	.transition(opacity 0.2s ease-in-out);
	&:hover {
		.opacity(1);
	}
	header {
		background: lighten(@black, 10);
	}
	h3 {
		margin: 0;
		padding: 5px 10px;
		color: @white;
		&:hover {
			cursor: pointer;
		}
	}
	ul {
		margin: 2px 0 0;
		padding: 0;
		background: lighten(@black, 30);
		line-height: 1;
	}
	li {
		display: block;
		margin: 0;
		padding: 0;
		font-family: @heading-font;
		border-bottom: 1px solid darken(@white, 50);
		&:last-child {
			border-bottom-width: 0;
		}
		a {
			padding: 10px;
			display: block;
			color: @white;
			border-bottom-width: 0;
			&:hover {
				font-weight: 400;
				:before {
					content: "\00bb";
					padding-right: 5px;
				}
			}
		}
		ul {
			margin: 0;
			border-top: 1px solid darken(@white, 50);
		}
	}
}
.image-grid {
	.clearfix();
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	li {
		.grid(12,6);
	}
}
.recent-grid {
	.clearfix();
	list-style: none;
	margin: 1em 0;
	li {
		display: inline;
		a { 
			border-bottom: 0 solid transparent;
			&:hover {
				border-bottom: 0 solid transparent;
			}
		}
	}
	img {
		width: 19%;
		margin-bottom: 1%;
	}
}
.holder {
	font-family: @heading-font;
	a {
		cursor: pointer;
		margin: 0 5px;
	}
	a.jp-previous {
		margin-left: 0;
		margin-right: 15px;
	}
	a.jp-next {
		margin-left: 15px;
		margin-right: 0;
	}
	a.jp-current {
		font-weight: bold;
	}
	a.jp-disabled, 
	a.jp-disabled:hover {
	}
	a.jp-current, 
	a.jp-current:hover,  
	a.jp-disabled, 
	a.jp-disabled:hover {
		cursor: default;
		background: none;
	}
	span {
		margin: 0 5px;
	}
}
.footer-wrap {
	.container();
	.clearfix();
	clear: both;
	padding-bottom: 3em;
	a,
	a:active,
	a:visited,
	p,
	h4,
	h5,
	h6,
	span { 
		.font-rem(14);
	}
	footer {
		.grid(12,10);
		.prefix(12,1);
		.suffix(12,1);
	}
}
.related-articles {
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	margin-bottom: 2em;
	h4 {
		
		text-transform: uppercase;
		margin-bottom: 0;
	}
	li {
		margin-bottom: 0;
	}
}
.footer-icons {
	li {
		display: inline-block;
		padding-right: 5px;
		a {
			color: lighten(@basecolor, 40%);
			.transition(.4s linear);
			&:hover {
				text-decoration: none;
				border-bottom: none;
				.icon-twitter,
				.icon-twitter-sign {
					color: #2aa9df;
				}
				.icon-facebook,
				.icon-facebook-sign {
					color: #3a5a98;
				}
				.icon-instagram,
				.icon-instagram-sign {
					color: #306088;
				}
				.icon-google-plus,
				.icon-google-plus-sign {
					color: #b63324;
				}
				.icon-lastfm,
				.icon-lastfm-sign {
					color: #d80049;
				}
				.icon-github {
					color: #4183c4;
				}
			}
		}
	}
}

// Browser Upgrade
// --------------------------------------------------
.browser-upgrade {
	background: #000;
	text-align: center;
	margin: 0 0 2em 0;
	padding: 10px;
	text-align: center;
	color: @white;
	a {
		color: @white;
		border-bottom: 1px dotted @white;
		text-decoration: none;
		&:hover {
			border-bottom: 1px solid @white;
		}
	}
}

// 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;
	.font-rem(14);
	background-color: @white;
	color: @black;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: lighten(@black,50);
	.rounded(3px);
}
#goog-wm-sb {
	.btn();
}