//// /// Media queries ////

// Media Query breakpoint // medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.59e713wwa //————————————-

$screen: “only screen”; $tiny: 20; /* 320px */ $small: 37.5; /* 600px */ $medium: 56.25; /* 900px */ $large: 75; /* 1200px */ $xlarge: 112.5; /* 1800px */ $xxlarge: 150; /* 2400px */

// Media Query Ranges //————————————-

$tiny-range : (0em, $tiny * 1em) !default; $small-range : (0em, $small * 1em - 0.063em) !default; $medium-range : ($medium * 1em + 0.063em, $large * 1em) !default; $large-range : ($large * 1em + 0.063em, $xlarge * 1em) !default; $xlarge-range : ($xlarge * 1em + 0.063em, $xxlarge * 1em) !default; $xxlarge-range : ($xxlarge * 1em + 0.063em, 99999999em) !default;

// Media Query Ranges

Mixin (from Foundation CSS)

//————————————-

// functions

@function lower-bound($range){

@if length($range) <= 0 {
  @return 0;
}
@return nth($range,1);

}

@function upper-bound($range) {

@if length($range) < 2 {
  @return 999999999999;
}
@return nth($range, 2);

}

// Call functions and declare media range variable

$landscape : “#{$screen} and (orientation: landscape)”; $portrait : “#{$screen} and (orientation: portrait)”; $tiny-only : “#{$screen} and (max-width:#{upper-bound($tiny-range)})”; $small-up : “#{$screen} and (min-width:#{lower-bound($small-range)})”; $small-only : “#{$screen} and (max-width:#{upper-bound($small-range)})”; $medium-up : “#{$screen} and (min-width:#{lower-bound($medium-range)})”; $medium-only : “#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})”; $large-up : “#{$screen} and (min-width:#{lower-bound($large-range)})”; $large-only : “#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})”; $xlarge-up : “#{$screen} and (min-width:#{lower-bound($xlarge-range)})”; $xlarge-only : “#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})”; $xxlarge-up : “#{$screen} and (min-width:#{lower-bound($xxlarge-range)})”; $xxlarge-only : “#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})”;

// Unison // speaking with JS with unison.js // bjork24.github.io/Unison/ //————————————-

// config $debug: false;

// Unison media $mq-sync: usn-small 0, usn-medium $medium * 1em ; // usn-large $large, // usn-x-large $xlarge, // usn-xx-large $xxlarge

// build each media query for js ingestion @each $mq in $mq-sync {

@media screen and (min-width: nth($mq, 2)) {
  head { font-family: "#{nth($mq, 1)} #{nth($mq, 2)}"; }
  body:after { content: "#{nth($mq, 1)} - min-width: #{nth($mq, 2)}"; }
}

} head { // set clear on head to show Unison is set up correctly clear: both; // store hash of all breakpoints title { font-family: “#{$mq-sync}”; } } // debug styles to see breakpoint info body:after {

display: none;

} // hide elements for conditional loading // only used for responsive comments plugin *[data-usn-if] { display: none; }