mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
119 lines
3.8 KiB
SCSS
119 lines
3.8 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 directory
|
|
$font-dir: "../fonts/";
|
|
|
|
// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
|
|
$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
|
$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
|
|
|
// Map of font families.
|
|
//
|
|
// ```
|
|
// <font-id>: (<font-name>, <font-fallbacks>)
|
|
// ```
|
|
$font-families: (
|
|
sans: join("Source Sans", $font-fallback-sans, $separator: comma),
|
|
);
|
|
|
|
// List of custom font faces as tuples.
|
|
//
|
|
// ```
|
|
// <font-name> <font-file-basename> <font-weight> <font-style>
|
|
// ```
|
|
$font-faces: (
|
|
("Source Sans", "SourceSans3-Bold", 700, normal),
|
|
("Source Sans", "SourceSans3-BoldIt", 700, italic),
|
|
("Source Sans", "SourceSans3-Regular", 400, normal),
|
|
("Source Sans", "SourceSans3-RegularIt", 400, italic),
|
|
);
|
|
|
|
// Typography
|
|
// =============================================================================
|
|
|
|
// Base
|
|
$font-size: 16px;
|
|
$line-height: math.div(24px, $font-size);
|
|
$font-color: $color-darkest;
|
|
|
|
// 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
|
|
$font-weight-light: 300;
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-bold: 700;
|
|
|
|
// Transitions
|
|
// =============================================================================
|
|
|
|
$speed: 0.3s;
|
|
$easing: $ease-power2-out;
|
|
|
|
// Spacing Units
|
|
// =============================================================================
|
|
$unit: 60px;
|
|
$unit-small: 20px;
|
|
|
|
// Container
|
|
// ==========================================================================
|
|
$padding: $unit;
|
|
|
|
// Grid
|
|
// ==========================================================================
|
|
$base-column-nb: 12;
|
|
$base-column-gap: $unit-small;
|
|
|
|
// 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;
|
|
|
|
// Master z-indexe
|
|
// =============================================================================
|
|
|
|
$z-indexes: (
|
|
"header": 200,
|
|
"above": 1,
|
|
"below": -1
|
|
);
|