mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
67 lines
2.0 KiB
SCSS
67 lines
2.0 KiB
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-sans-serif: sans-serif;
|
|
|
|
// Typography
|
|
// =============================================================================
|
|
// Base
|
|
$font-size: 16px;
|
|
$line-height: 24px / $font-size;
|
|
$font-family: $font-sans-serif;
|
|
$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: linear;
|
|
|
|
// 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;
|