_settings.vars.scss

/*------------------------------------*\
    #VARS
    Our own variables to use throughout the project.
\*------------------------------------*/

$border-radius: 3px;
$btn-radius: $border-radius/2;
$font-family-heading: Helvetica, Arial, sans-serif;
$main-font-family:  Helvetica, Arial, sans-serif;
$font-size-primary: 16px;
$font-size-small: 14px;
$background-color: #fff;

/**
 * COLORS
 * We always specify colors throughout our SCSS from these variables.
 * Never use darken() etc. other places than here.
 * If you need to rename a Variable don't be afraid to do a global
 * find and replace in the CSS so that the variables are correct
 */

$gray: #767676; //wcag-color for text on white background
$link: blue;



/**
 * RESPONSIVE BREAKPOINTS
 * This is where we define all our breakpoints. It overwrites https://github.com/aleutcss/settings.responsive
 * These also generate helper-classes with aleut that we can use:
 * f.ex: u-1/2@m (for width), u-pt@s(for padding-top on s-size) etc.
 * See all alternatives in https://github.com/aleutcss/utilities.spacing-responsive and
 * utilities.widths-responsive.
 *
 * We can also use them with a media-query mixin like this:
 * Usage:
 *  @include media-query(s) {
 *
 *  }
 */

$breakpoints: (
    "s"       "screen and (max-width: 44.9375em)",
    "m"       "screen and (min-width: 45em)",
    "l"       "screen and (min-width: 64em)",
    "retina"  "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)"
);

/**
 * Other vars here
 **/