style.less

/*
Theme Name: Highwind
Theme URI: http://jameskoster.co.uk/highwind/
Description: Highwind is a lightweight, free WordPress theme designed to showcase content. It features a clean, responsive design with a strong focus on typography, plus a bunch of presentational options and widgetised regions allowing you to give your site a unique touch. <a href="https://github.com/jameskoster/highwind/wiki">View Documentation</a>.
Author: jameskoster
Author URI: http://jameskoster.co.uk
Version: 1.2.7
Tags: white, two-columns, left-sidebar, right-sidebar, sticky-post, threaded-comments, translation-ready, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, theme-options, light

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Modular Scale: http://modularscale.com/scale/?px1=16&px2=18&ra1=1.333&ra2=0

Highwind WordPress Theme, Copyright 2013 jameskoster.co.uk
Highwind is distributed under the terms of the GNU GPL
*/

/**
 * STYLE.LESS
 * This file contains presenational styles for this theme
 */


/**
 * Imports
 */
@import 'framework/less/mixins.less';
@import 'framework/less/normalize.less';
@import 'framework/less/grid.less';
@import 'framework/less/core.less';


/**
 * Style
 */
html {
	font-family: @fontstack_sans;
	font-weight: 400;
}

body {
	line-height: 1.777;
	color: @color_body;
	background: @color_bg;
	font-size:1em;
}


/**
 * Wrappers
 */
.inner-wrap {
	padding: 0 1.125em;
	background-color: @color_bg;
}


/**
 * Typography
 */
h1, h2, h3, h4, h5, h6, .heading, .omega, .psi, .alpha, .beta, .gamma, .delta {
	font-weight: 400;
	margin:0;
	margin-bottom:1rem;
	color: @color_body - #222;
	line-height: 1.333;
	position: relative;
	text-align: left;
	small {
		.opacity(0.8);
	}
	a {
		text-decoration: none;
	}
}

.omega {
	font-size:4.209em;
	letter-spacing: -2px;
	font-weight: 300;
}

.psi {
	font-size:2.665em;
	letter-spacing: -1px;
	font-weight: 300;
}

h1, .site-title, .alpha {
	display:block;
	font-size:1.777em;
	letter-spacing: -1px;
	&.archive-header {
		font-size:1.125em;
	}
}

h2, .beta {
	font-size:1.5em;
}

h3, .gamma {
	font-size:1.333em;
	font-weight: 600;
}

h4, .delta {
	font-size:1.125em;
	font-weight: 600;
}

h5, h6 {
	font-size: 1em;
	font-weight: 700;
}

p + h1, p + h2, p + h3, p + h4 {
	padding-top:0;
}

p, ul, ol, dl, blockquote, pre, table, fieldset, article, article footer, nav, form, .wp-post-image {
	margin: 0 0 1.777em 0;
}

ul, ol {
	ul, ol {
		margin:0 0 0 1.777em;
	}
}

dd {
	margin-left:1.777em;
}

mark {
	background: none;
	.opacity(0.5);
}

p {
	-webkit-hyphens : auto;
	-webkit-hyphenate-character : "\2010";
	-webkit-hyphenate-limit-after : 1;
	-webkit-hyphenate-limit-before : 3;
	-moz-hyphens : manual;
	orphans : 3;
	widows : 3;
}

small, .small {
	font-size:0.844em;
	line-height: 1.75em;
}

strong, dt {
	font-weight: 600;
}

acronym, abbr[title] {
	cursor: help;
	font-variant: small-caps;
	font-weight: 600;
	border:none;
}

ins {
	border-bottom:1px solid rgba(0,0,0,0.1);
	text-decoration: none;
}

blockquote {
	.opacity(0.8);
	padding-left:1.777em;
	p:last-child {
		margin-bottom:0;
	}

	cite {
		.small;
		text-transform: uppercase;
		font-style: normal;
		letter-spacing: 1px;
		font-size:.844em;
		display: block;
	}

	p + p cite, p + cite {
		margin-top:-1.777em;
	}

	&:before {
		content: "\201C";
		text-indent: -.563em;
		float: left;
		font-size:3.157em;
		font-family:"FontAwesome";
		line-height: 1;
	}
}

code, pre {
	background: rgba(0,0,0,0.05);
	padding:0.1em 0.201em;
	.border_radius(0.201em);
	color: #dc5494;
	margin:0 .201em;
	padding:0 .201em;
	border:1px solid rgba(0,0,0,0.1);
	font-weight: 600;
}

pre {
	padding:.633em;
	margin-bottom:1.777em;
	code {
		background: none;
		border:0;
	}
}

span.ampersand {
	font-family: Baskerville, Palatino, "Book Antiqua", serif;
	font-style: italic;
}

ul,
ol {
	padding: 0;
}

/**
 * Anchors
 */
a {
	color: @color_theme;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}


/**
 * Forms
 */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input.input-text, textarea {
	padding:.844em;
	background: rgba(0,0,0,0.05);
	color: @color_body;
	border:0;
	.border_radius;
	outline: none;
	.borderbox;
}
textarea {
	padding:1em;
}
input[type="radio"] {
    -webkit-appearance:none;  /* Hides the default radio style */
    height:1.5em;
    width:1.5em;
    .borderbox;
    font-size: .844em;
    border:.422em solid @color_body;
    background: @color_body;
    cursor:pointer;
    position:relative;
    .border_radius(100%);
    .borderbox;
    margin-right:1em;
    float: left;
    .transition;
}

input[type="radio"]:checked {
    background:none;
}
input[type="checkbox"] {
    -webkit-appearance:none;  /* Hides the default checkbox style */
    height:1.5em;
    width:1.5em;
    cursor:pointer;
    position:relative;
    .border_radius();
    background-color:@color_body;
    margin-right:1em;
    font-size: .844em;
}
input[type="checkbox"]:before, input[type="checkbox"]:checked:before {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    font-family: 'FontAwesome';
    line-height: 1.5;
    content: "\f00c";
    color: @color_bg;
    .opacity(0.1);
    .transition;
}

input[type="checkbox"]:checked:before {
    .opacity(1);
}
input[type="submit"],
.button,
input[type="button"],
.navigation-post a,
.navigation-paging a {
	padding:.844em 1.125em;
	color: @color_bg;
	font-weight: 600;
	background:@color_theme;
	.border_radius();
	border:0;
	.transition;
	&:hover {
		text-decoration: none;
		-webkit-box-shadow:
			inset 0 -5em 0 0 rgba(0,0,0,0.1);
		box-shadow:
			inset 0 -5em 0 0 rgba(0,0,0,0.1);
	}
	&:active {
		-webkit-transform:translateY(.075em);
		-webkit-box-shadow:
			inset 0 -5em 0 0 rgba(0,0,0,0.1);
		box-shadow:
			inset 0 -5em 0 0 rgba(0,0,0,0.1);
	}
}


/**
 * General
 */
hr {
	height:1px;
	border:0;
	background: @color_body;
	.opacity(0.2);
}
table {
	width:100%;
	border-collapse: separate;
	th, td {
		padding:.563em;
		padding-left:0;
	}
	tr {
		th, td {
			border-bottom:.134em solid rgba(0,0,0,0.05);
		}
	}
}
img {
	display: block;
	.border_radius;
	max-width:100%;
	height: auto;
	&.wp-smiley {
		display: inline-block;
	}
}


/**
 * Header
 */
.header {
	padding:1.777em 1.125em 2.665em 1.125em;
	margin-left:-1.125em;
	margin-right:-1.125em;
	margin-bottom:4.209em;
	background-color:@color_theme;
	background-position:center center;
	background-repeat:no-repeat;
	p.toggle-container {
		width:2.369em;
		height:2.369em;
		margin:0 0 1.777em;
	}
}
.site-intro {
	color: #fff;
	&:hover {
		text-decoration: none;
	}
	.avatar {
		width:128px;
		height: auto;
		display: block;
		.border_radius(100%);
		.box_shadow(0,0,0,.618em,rgba(0,0,0,0.05));
	}
	.grav-clone {
		display: none;
	}
}
.site-title, .site-description {
	color: #fff;
	a {
		color: #fff;
	}
}
.site-title {
	.psi;
	color: #fff;
	margin-bottom:0;
}
.site-description {
	font-size:.844em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 4px;
	.opacity(0.75);
}


/**
 * Navigation
 */
ul.menu {
	padding-top:1.777em;
}
.main-nav {
	border-right:1px solid rgba(0,0,0,0.1);
	margin-bottom: 2.618em;
	background: @color_bg;
	.buttons {
		padding: 1.777em 1.125em;
	}
	.menu {
		padding:0 1.125em;
	}
	h2 {
		padding:0 1.125em;
	}
}
.navigation-paging, .navigation-post, .navigation-comments {
	margin-top:1em;
	margin-bottom:2.665em;
}
.infinite-scroll .navigation-paging {
	display: none;
}


/**
 * Posts
 */
article.post, article.page {
	margin-bottom:2.665em;
	padding-bottom:1.999em;
}
.post-meta, .post-date {
	font-size:.844em;
}


/**
 * Images
 */
.aligncenter {
	margin:0 auto 1.777em;
}

.alignright {
	margin:1.777em 0 1.777em 1.777em;
}

.gallery-caption, .wp-caption-text {
	font-style: italic;
	font-size: .844em;
	line-height: 1.33em
}

.wp-caption {
	img {
		margin-bottom: 1em;
	}
}

img.alignleft {
	margin:1.777em 1.777em 1.777em 0;
}

img.wp-post-image {
	margin-bottom:1.777em;
}

.gallery img {
	margin-left: auto;
	margin-right: auto;
}

/**
 * Comments
 */
.comments {
	.bypostauthor {
		> .comment-body .comment-content {
			background: @color_theme;
			-webkit-box-shadow: none;
			box-shadow:			none;
			color: #fff;
			&:after {
				border-color: transparent transparent @color_theme transparent;
			}
			&:before {
				display: none;
			}
			a {
				color: @color_bg;
				text-decoration: underline;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
	.comment-content {
		padding:1em;
		.box_shadow(0,0,0,.134em,rgba(0,0,0,0.05));
		.border_radius;
		margin-bottom:1em;
		position: relative;
		p:last-child {
			margin-bottom:0;
		}
		> ul, > ol {
			margin-bottom:1.777em;
		}
		&:before, &:after {
			content: "";
			display: block;
			position: absolute;
			top:-1.6em;
			left:.844em;
			border:.75em solid rgba(0,0,0,0.05);
			border-color: transparent transparent rgba(0,0,0,0.05) transparent;
		}
		&:after {
			margin-top:.201em;
			border-color: transparent transparent @color_bg transparent;
		}
	}
	.comment-author {
		.comment-meta {
			font-size:.844em;
		}
	}
	.comment-body {
		margin-bottom:2.665em;
	}
}


/**
 * Widgets
 */
.widget {
	margin-bottom:3.552em;
}
.widget_archive {
	li {
		.icon_archive;
	}
}
.widget_categories {
	li {
		.icon_category;
	}
}
.widget_pages {
	li {
		.icon_page;
	}
}
.widget_recent_comments {
	li {
		.icon_comment;
	}
}
.widget_recent_entries {
	li {
		.icon_post;
	}
}


/**
 * Footer
 */
.footer {
	margin-left:-999em;
	margin-right:-999em;
	background:rgba(0,0,0,0.02);
	padding:4.209em 999em;
}


/**
 * Main Layout
 * @type Desktop
 */
@media only screen and (min-width: 769px) {

/* Only apply the layout if the user is on a desktop / tablet */

	body {
		padding:0;
		font-size: 1.125em;
	}
	.inner-wrap {
		padding:0 3.157em;
	}


	/**
	 * Layout
	 */
	.content {
		padding-bottom:4.209em;
	}


	/**
	 * Header
	 */
	.header {
		padding-top:7.478em;
		padding-left:999em;
		padding-right:999em;
		margin-left:-999em;
		margin-right:-999em;
		background-color: @color_theme;

	}
	.background-contrast {
		.header {
			margin-left: -3.157em;
			margin-right: -3.157em;
			padding-left: 0;
			padding-right: 0;
		}
		.footer {
			margin-left: -3.157em;
			margin-right: -3.157em;
			padding-left: 3.157em;
			padding-right: 3.157em;
		}
		.main-nav {
			max-width: 69.75em;
			margin: 0 auto;
		}
	}
	.csstransforms3d.csstransitions  {
		.background-contrast {
			.main-nav {
				left: auto;
			}
		}
	}
	.site-title {
		.omega;
		color: #fff;
		margin-bottom:0;
	}
	.site-intro {
		.avatar {
			margin:0 auto;
			.transition(all,ease,.4s);
			&:hover {
				position:relative;
				-webkit-transform: translateY(-.75em);
				-moz-transform: translateY(-.75em);
				-ms-transform: translateY(-.75em);
				transform: translateY(-.75em);
			}
		}
		.site-title, .site-description {
			text-align: center;
		}
	}


	/**
	 * Navigation
	 */
	.main-nav {
		border-right:0;
		border-bottom:.422em solid @color_theme;
		.sub-menu {
			display: none;
		}
		li.menu-item-has-children:hover > .sub-menu {
			display: block;
		}
		ul.menu {
			> li {
				&:hover > a, > a:hover {
		        	background-color: @color_theme;
		        	color: #fff;
		        }
		        &.current-menu-item > a {
		        	position: relative;
		        	&:before {
		        		content: "";
		        		display: block;
		        		position: absolute;
		        		bottom:0;
		        		left:50%;
		        		margin-left:-.563em;
		        		color: @color_theme;
		        		border:.563em solid @color_theme;
		        		border-color:transparent transparent @color_theme transparent;
		        	}
		        }
		        &.parent { // Styles applied to all parent list items
		            > a:after {
		                .iconafter;
		                content: "\f107";
		            }
		        }
		    }
		    a {
				padding:.844em 1.125em;
				text-decoration: none;
				.transition;
			}
		    /* CHILDREN */
		    ul {
		        width:14.949em;
		        background-color: @color_theme;
		        .box_shadow(0,1px,1px,0,rgba(0,0,0,0.2));
		        li {
		        	&.parent {
		                > a:after {
		                	.iconafter;
		                    content:"\f105";
		                    float: right;
		                    line-height: 1.777;
		                }
		            }
	        		&:hover > a, &.current-menu-item > a, > a:hover {
	        			background-color:rgba(0,0,0,0.05);
	        			padding-left:1.5em;
	        		}
		        }
		        a {
	        		padding:.475em 1.125em;
	        		color: #fff;
	        	}
		    }
		}
	}


	/**
	 * Sidebar
	 */
	 .sidebar {
		padding:4.209rem 0 0 0;
		.borderbox;
		font-size:.844em;
		margin-top:-4.209rem;
		/**
		  * Sidebar Widgets
		  */
		 .widget {
		 	.opacity(0.8);
		 }
	 }


	/**
	 * Posts
	 */
	.page-title, .post-title {
		.psi;
	}

	blockquote {
		padding-left: 0;
	}


	/**
	 * Comments
	 */
	.comments {
		.comment-content {
			padding:1.999em;
		}
	}

}