60-setup.less

/**
 * "such.less" CSS boilerplate framework
 * 60-setup.less
 * https://github.com/MarcDiethelm/such.less
 * License: MIT
 * Copyright 2014 Marc Diethelm, Simon Harte
 */

// Dependencies:
// - 00-variables.less
// - lib/wireframe.less

* {
	.box-sizing();
}

html {
	#type > .rendering('optimised');
	font-size: 62.5%; // reset to 10px for linear rem usage
	overflow-x: hidden;
	overflow-y: scroll;
	background: @color-bg-body;
}

body {
	// set default font style and color for the page
	&:extend(.copy-default);
	// set min-/max-width and center page
	#layout > .content-boundaries(0, (@max-content-width + (@h-spacing*2))); // padding on both sides
	#layout > .center();
	// indicate current viewport, remove in production
	.visual-viewports();
	overflow: hidden;
	color: @color-copy;
	background: @color-bg-body;
	padding: 0 @h-spacing;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// GRID

@grid-config: @max-content-width, @grid-type, @grid-gutter, @gutter-type, @grid-cols;

.grid-bundle(@config: @grid-config);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// TYPOGRAPHY

.title-page {
	#type > #title > .style('default');
	#type > #title > .size('page');
	&.spaced {
		&:extend(.title-page);
		#type > #title > .spacing('page');
	}
}

.title-default {
	#type > #title > .style('default');
	#type > #title > .size('default');
	&.spaced {
		&:extend(.title-default);
		#type > #title > .spacing('default');
	}
}

.title-sub {
	#type > #title > .style('default');
	#type > #title > .size('sub');
	&.spaced {
		&:extend(.title-sub);
		#type > #title > .spacing('sub');
	}
}

.copy-default {
	#type > #copy > .style('default');
	#type > #copy > .size('default');
	margin: 0;
}

.copy-small {
	#type > #copy > .style('default');
	#type > #copy > .size('small');
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LINKS

a {
	#type > #link > .style('default');
}