core.scss

// ===========================
// Table of Contents
// 0.0 Setup, variables and mixins
// 1.0 --
// ===========================

$color_primary_copy: #403D3D;
$color_primary_header: darken(#403D3D, 5%);

$font_family_primary: "Proxima Nova Soft", "proxima-nova-soft", "Helvetica", sans-serif;
$font_family_secondary: "Proxima Nova", "proxima-nova", "helvetica", sans-serif;

$default_border_radius: 4px;

@mixin user-select($option: none) {
  -webkit-user-select: $option;
  -moz-user-select: $option;
  -ms-user-select: $option;
  -o-user-select: $option;
  user-select: $option;
}

@mixin border-box-sizing(){
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

@mixin font-smoothing(){
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

@mixin transition($type: all, $duration: .22s, $function: ease-in-out){
  -webkit-transition: $type $duration $function;
  -moz-transition: $type $duration $function;
  -o-transition: $type $duration $function;
  transition: $type $duration $function;
}

@mixin linear_gradient($first_color: rgba(0,0,0,0), $second_color:rgba(0,0,0,.25), $fallback_color: rgba(0,0,0,.3)){
  background: -moz-linear-gradient(top,  $first_color 0%, $second_color 100%), $fallback_color; /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first_color), color-stop(100%,$second_color)), $fallback_color; /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  $first_color 0%, $second_color 100%), $fallback_color; /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  $first_color 0%, $second_color 100%), $fallback_color; /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  $first_color 0%, $second_color 100%), $fallback_color; /* IE10+ */
  background: linear-gradient(to bottom,  $first_color 0%, $second_color 100%), $fallback_color; /* W3C */
}

@mixin background-size-cover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

// For displaying retina assets
// Pulled from @Stammy: http://paulstamatiou.com/responsive-retina-blog-development-part-2
@mixin retina {
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {
    @content;
  }
}

@mixin bg-size($width: auto, $height: 100%) {
  -moz-background-size: $width $height;
  -webkit-background-size: $width $height;
  background-size: $width $height;
}

// Silly function to divide the width and height to save me 2 seconds
// whenever I need to calculate the halved retina background position
@function double-pos($w, $h) { @return $w*2 $h*2; }


// For tabelts and mid-sized mobile devices. Typically 54em.
@mixin mq-tablet {
  @media (max-width: 54em) {
    @content;
  }
}

// For smartphones and personal (small) mobile devices. Typically 30em.
@mixin mq-personal {
  @media  (max-width: 30em) {
    @content;
  }
}

// Import core styles
@import "layout/normalize";
@import "layout/animate";
@import "layout/base";

// Import Views
@import "pages.scss"