/* ============================================================================
   @CORE -> SETTINGS -> BREAKPOINTS
   ========================================================================= */


/**
 * Here we set breakpoints. Not every media query will be able to use one of
 * these breakpoints and that's fine as there are no magic numbers with
 * breakpoints i.e. if the UI needs to change then it needs to change. But
 * most of the time we can use them.
 *
 * The breakdown of the breakpoints is based off this chart:
 * http://static.lukew.com/unified_device_design.png
 *
 * Here's the thinking:
 *
 * - Palm: smart-phones and feature phones i.e. anything that can fit into the
 *   palm of a hand.
 * - Lap: typically tablets, notebooks and laptops i.e. anything that is
 *   portable that doesn't include phones.
 * - Lap small: smaller tablets/notebooks and e-readers e.g. Kindle.
 * - Lap large: larger tablets and laptops.
 * - Desk: desktop computers, TVs, etc. i.e. anything that is not portable.
 * - Desk small: smaller desktop computer monitors.
 * - Desk large: larger desktop computer monitors, TVs, and who knows what
 *   else?
 *
 * The breakpoints:
 *
 * - Palm:         0 - 640px
 *
 * - Lap:          641px +
 * - Lap large:    901px +
 *
 * - Desk:         1200px +
 * - Desk large:   1366px +
 *
 * @credit
 * http://www.lukew.com/ff/entry.asp?1679
 * https://developers.google.com/webmasters/smartphone-sites/details?hl=en
 */


$breakpoints: (

  // Palm
  "palm":         640,

  // Lap
  "lap":          641,
  "lap-large":    901,

  // Desk
  "desk":         1200,
  "desk-large":   1366

) !default;


/**
 * A global setting to define the common breakpoint(s) for Scally and your
 * project. This is mainly used by the `generate-at-breakpoints()` mixin.
 */

$default-breakpoints: (lap) !default;