mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
45d8be5525
* Rename breakpoints by shortnames * Replace `tiny` breakpoint for `xs` in spacing loop * Add 2xs, 4xl and 5xl breakpoints
34 lines
955 B
SCSS
34 lines
955 B
SCSS
// ==========================================================================
|
|
// Settings / Config / CSS VARS
|
|
// ==========================================================================
|
|
|
|
:root {
|
|
|
|
// Grid
|
|
--grid-columns: 4;
|
|
--grid-gutter: #{rem(10px)};
|
|
--grid-margin: #{rem(10px)};
|
|
|
|
// Container
|
|
--container-width: calc(100% - 2 * var(--grid-margin));
|
|
|
|
// Font sizes
|
|
--font-size-h1: #{responsive-type(36px, 72px, 1400px)};
|
|
--font-size-h2: #{rem(28px)};
|
|
--font-size-h3: #{rem(24px)};
|
|
--font-size-h4: #{rem(20px)};
|
|
--font-size-h5: #{rem(18px)};
|
|
--font-size-h6: #{rem(16px)};
|
|
|
|
// // Colors
|
|
// @each $color, $value in $colors {
|
|
// --color-#{"" + $color}: #{$value};
|
|
// }
|
|
|
|
@media (min-width: $from-sm) {
|
|
--grid-columns: #{$base-column-nb};
|
|
--grid-gutter: #{rem(16px)};
|
|
--grid-margin: #{rem(20px)};
|
|
}
|
|
}
|