main.scss

// Inigo Pascall 2019

@import "~singularitygs";
@import "~compass-mixins";
@import "mixins";

$fa-font-path: '/build/fonts/font-awesome';
@import "font-awesome/font-awesome.scss";

/* ---------------------------------- Variables ------------------------------------------*/

$pageWidth: 	1120px;
$hh1:			150px;
$hh2:			220px;
$fh1:			100px;

$m1: 			1rem;
$m2: 			2rem;
$m3: 			3rem;
$mobPd: 		6px;

$maxzi: 		100;

// @import "/plugins/*";
@import "iwd-scaffold";


 /* ---------------------------------- Font Styles ---------------------------------------- */

 %font-set1 { font-family: Arial, sans-serif;	}

 html 			{ font-size: 62.5%; 														}
 body>header 	{ font-size: 1.8rem; 	@include respond-to(tablet){ font-size: 2.2rem; } 	}
 body>nav 		{ font-size: 1.0rem; 	@include respond-to(tablet){ font-size: 1.15rem; } 	}
 main 			{ font-size: 1.2rem; 	@include respond-to(tablet){ font-size: 1.5rem; } 	}
 aside 			{ font-size: 1.4rem; 	@include respond-to(tablet){ font-size: 1.8rem; }	}
 footer 			{ font-size: 1rem; 		@include respond-to(tablet){ font-size: 1.1rem; }	}

 html {
 	@extend %font-set1;
 	color: $mGray;
 	text-align: left;
 }

 h1, h2, h3, h4, h5, h6 { font-size:1.4em; }


 /* ---------------------------------- Extends & Global classes ---------------------------------- */

 %link { &:hover { color: #ff8080; } }


 /* ---------------------------------- Top-level block elements --------------- */

 .container {
 	@extend %clearfix;
 	width: 100%;
 	position: relative;
 	@include add-grid(12);
 	@include add-gutter(1/2);
 	padding-left: $mobPd !important;
 	padding-right: $mobPd !important;
 	@include respond-to(tablet){
 		width: 92%;
 		margin: 0 auto;
 		padding-left: 0 !important;
 		padding-right: 0 !important;
 	}
 	@include respond-to(w1){
 		width: $pageWidth;
 	}
 }
 body {
 	@include flexbox((
 		display: flex,
 		flex-direction: column
 	));
 	min-height: 100vh;
 }
 body>header {
 	& > div {
 		@extend .container;
 		height: $hh1;
 		@include respond-to(tablet){ height: $hh2; }
 	}
 }
 body>footer {
 	& > div {
 		@extend .container;
 		height: $fh1;
 	}
 }
 .content {
 	@extend .container;
 	padding: $m1;
 	flex: 1 1 auto;
 	.no-flexbox & {
 		min-height: 650px;
 	}
 }
 .span-content {
 	@extend .content;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 }
 main {
 	padding-bottom: $m1*2;
 }