autonomic.zone/src/assets/styles/main.scss

---
---
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import "libs/_font-awesome/font-awesome";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic');

/*
	Spectral by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

@import 'libs/skel';

@include skel-breakpoints((
	xlarge: '(max-width: 1680px)',
	large: '(max-width: 1280px)',
	medium: '(max-width: 980px)',
	small: '(max-width: 736px)',
	xsmall: '(max-width: 480px)'
));

@include skel-layout((
	reset: 'full',
	boxModel: 'border',
	grid: ( gutters: 1.5em )
));

@import 'components/basic';
@import 'components/section';
@import 'components/form';
@import 'components/box';
@import 'components/image';
@import 'components/list';
@import 'components/table';
@import 'components/button';
@import 'components/features';
@import 'components/spotlight';
@import 'components/wrapper';
@import 'components/menu';
@import 'components/header';
@import 'components/banner';
@import 'components/cta';

/* Main */

#main {
	> header {
		@include padding(12em, 0);
		@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))'));
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;

		h2 {
			font-size: 1.75em;
			margin: 0 0 (_size(element-margin) * 0.25) 0;
		}

		p {
			color: inherit;
			letter-spacing: _size(letter-spacing-alt);
			text-transform: uppercase;
			top: 0;

			a {
				color: inherit;
			}
		}

		@include breakpoint(xlarge) {
			@include padding(10em, 0);
		}

		@include breakpoint(large) {
			@include padding(8em, 3em);
		}

		@include breakpoint(medium) {
			@include padding(10em, 3em);
		}

		@include breakpoint(small) {
			@include padding(5em, 3em);

			h2 {
				font-size: 1.25em;
				margin: 0 0 (_size(element-margin) * 0.5) 0;
			}
		}
	}
}

body.is-mobile {
	#main {
		> header {
			background-attachment: scroll;
		}
	}
}

/* Footer */

#footer {
	@include padding(6em, 0);
	background-color: darken(_palette(bg), 8);
	text-align: center;

	.icons {
		font-size: 1.25em;

		a {
			color: _palette(fg-light);

			&:hover {
				color: _palette(fg);
			}
		}
	}

	.copyright {
		color: _palette(fg-light);
		font-size: 0.8em;
		letter-spacing: _size(letter-spacing-alt);
		list-style: none;
		padding: 0;
		text-transform: uppercase;

		li {
			border-left: solid 1px _palette(fg-light);
			display: inline-block;
			line-height: 1em;
			margin-left: 1em;
			padding-left: 1em;

			&:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}

			a {
				color: inherit;

				&:hover {
					color: _palette(fg);
				}
			}

			@include breakpoint(xsmall) {
				border: 0;
				display: block;
				line-height: 1.65em;
				margin: 0;
				padding: 0.5em 0;
			}
		}
	}

	@include breakpoint(medium) {
		@include padding(4em, 3em);
	}

	@include breakpoint(small) {
		@include padding(3em, 2em);
	}
}

/* Landing */

body.landing {
	#page-wrapper {
		padding-top: 0;
	}

	#footer {
		background-color: darken(transparentize(_palette(bg), 0.1), 8);
	}
}

body.is-mobile {
	&.landing {
		#page-wrapper {
			background: none;
		}

		#banner,
		.wrapper.style4 {
			@include vendor('background-image', 'url("../../assets/images/banner.jpg")');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		#footer {
			background-color: darken(_palette(bg), 8);
		}
	}
}