codesignd Patterns

body {
	// Make sure that the footer is always at the bottom of the page
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	
	// Hide horizontal overflow (required for animated contact forms)
	overflow-x: hidden;
}

.main {
	flex: 1;
	
	// Fallback as IE does not respect min-height flex containers
	flex-basis: auto;
}

// Page padding for print
@media print {
	@page {
		margin: 1.5cm;
	}
}

// Visually hidden
.vh {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

// Container mixins
@mixin container {
	width: 100%;
	padding: 0 1.5rem;
	margin: 0 auto;
	
	@media (max-width: 30em) {
		padding: 0 1rem;
	}
	
	@media print {
		padding: 0;
	}
}

@mixin container--full {
	@include container;
	
	max-width: 60rem;
}

@mixin container--text {
	@include container;
	
	max-width: 42rem;
}