ralexandr

.container {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;

ralexandr

/*--------------------------------
	Retina images
	example:
	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}
*/

ralexandr

@mixin align($vertical: true, $horizontal: false, $position: relative) {
	@if $position {
		position: $position;
	}
	@if $vertical {
		top: 50%;
	}
	@if $horizontal {
		left: 50%;
	}

ralexandr

@mixin antialias {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

ralexandr

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

ralexandr

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}

ralexandr

//  Usage:
//  .site-header {
//      z-index: z('site-header');
//  }

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';

ralexandr

//  Usage:
//  .site-header {
//        padding: 2rem;
//        font-size: 1.8rem;
//        @include mq('tablet-wide') {
//            padding-top: 4rem;
//            font-size: 2.4rem;
//        }
//    }

ralexandr

/*--------------------------------
	Form input placeholder text
	example:
	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}
*/

ralexandr

@mixin font-source-sans($size: false, $colour: false, $weight: false,  $lh: false) {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    @if $size { font-size: $size; }
    @if $colour { color: $colour; }
    @if $weight { font-weight: $weight; }
    @if $lh { line-height: $lh; }
}