imlinus

var subPages = {
  'index': {
    'name': 'Whazzzzup',
    'content': 'Welcome to MyTurrn',
  },
  'about': {
    'name': 'Who are we?',
    'content': 'We got founded back in 2014',
  },
  'contact': {

imlinus

// mixin for prefixin'
// usage: @include prefix(attribute, argument);

@mixin prefix($attribute, $argument) {
  -webkit-#{$attribute}: #{$argument};
  -moz-#{$attribute}: #{$argument};
  -ms-#{$attribute}: #{$argument};
  -o-#{$attribute}: #{$argument};
  #{$attribute}: #{$argument};
}

imlinus

// Mixin for keyframes
// basic usage:
// @include keyframes(name) {
//   0% { background: yellow; }
//   100% { background: blue; }
// }

@mixin keyframes($name) {
  @-webkit-keyframes  $name { @content; }
  @-moz-keyframes     $name { @content; }

imlinus

// Mixin for creating arrows, basic usage @include arrow(top-left, #000, 15px);
// available directions: top, right, bottom, left, top-left, top-right, bottom-left, bottom-right

@mixin arrow(
  $direction,
  $color,
  $size
) {
  height: 0;
  width: 0;

imlinus

// Mixin for vertical and horizontal centerin
// Requires a declared height + position: relative on parent
// usage:
// .box {
//    height: 50%;
//    @include vertical-center-1;
// }

@mixin vertical-center-1 {
  @include position(absolute, 0, 0, 0, 0);

imlinus

@mixin alpha($val: 0) {
  $ie-alpha: $val * 100;
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$ie-alpha})";
  filter: alpha(opacity=#{$ie-alpha});
  @include prefix(opacity, $val);
}

%alpha-0   { @include alpha(0);   }
%alpha-50  { @include alpha(0.5); }

imlinus

// Simple mixin when calling different viewports
// Remember - you can't extend within media-querys
//
// basic usage:
// @include respond(retina) { 
//   background-image: url('path/to/retina/image.png');
//   background-size: 100px 50px;
// }

// Store these in your global.scss

imlinus

// Mixin for creating a ellipsis (...) when text is too long.
// Only call the mixin within media querys, otherwise use the placeholder!

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

%ellipsis {

imlinus

@mixin clearfix {
  *zoom: 1;

  &:before,
  &:after {
    content: "";
    display: table;
  }
  
  &:after { clear: both; }

imlinus

// attributes: none | text | all | element
// Only call for mixin within media querys, otherwise use placeholder!

@mixin user-select($val: none) {
  -webkit-touch-callout: $val;
  @include prefix(user-select, $val);
}

%user-select-none { @include user-select(none); }
%user-select-text { @include user-select(text); }