locomotive-boilerplate/assets/styles/settings/_config.scss

// ==========================================================================
// Settings / Config
// ==========================================================================

// Context
// =============================================================================
// The current stylesheet context. Available values: frontend, editor.
$context: frontend  !default;

// Path is relative to the stylesheets directory.
$assets-path: "../"  !default;

// Typefaces
// =============================================================================

$font-dir: "../fonts/";

$font-families: (
    "sans": ("Webfont Sans", "Helvetica Neue", Arial, sans-serif),
    // "serif": ("Webfont Serif", Georgia, serif)
);

$font-faces: (
    // "Webfont Sans" "webfont-sans_regular" 400 normal,
    // "Webfont Sans" "webfont-sans_regular-italic" 400 italic,
    // "Webfont Serif" "webfont-sans_bold" 700 normal,
);

// Typography
// =============================================================================
// Base
$font-size:   16px;
$line-height: 24px / $font-size;
$color:       #222222;
// Headings
$font-size-h1:  36px  !default;
$font-size-h2:  28px  !default;
$font-size-h3:  24px  !default;
$font-size-h4:  20px  !default;
$font-size-h5:  18px  !default;
$font-size-h6:  16px  !default;
$line-height-h: $line-height;
// Weights
$light:  300;
$normal: 400;
$medium: 500;
$bold:   700;

// Transitions
// =============================================================================
$speed:  0.3s;
$easing: $Power2EaseOut;

// Spacing Units
// =============================================================================
$unit:       60px;
$unit-small: 30px;

// Container
// ==========================================================================
$container-width: 2000px;
$padding:         $unit;

// Breakpoints
// =============================================================================
$from-tiny:     500px              !default;
$to-tiny:       $from-tiny - 1     !default;
$from-small:    700px              !default;
$to-small:      $from-small - 1    !default;
$from-medium:   1000px             !default;
$to-medium:     $from-medium - 1   !default;
$from-large:    1200px             !default;
$to-large:      $from-large - 1    !default;
$from-big:      1400px             !default;
$to-big:        $from-big - 1      !default;
$from-huge:     1600px             !default;
$to-huge:       $from-huge - 1     !default;
$from-enormous: 1800px             !default;
$to-enormous:   $from-enormous - 1 !default;
$from-gigantic: 2000px             !default;
$to-gigantic:   $from-gigantic - 1 !default;
$from-colossal: 2400px             !default;
$to-colossal:   $from-colossal - 1 !default;