Edit
/* scss/0-settings-tools/_s_shevy-config.scss */
// https://kyleshevlin.github.io/shevy/
@mixin heading($map: $shevy) {
$settings: settings($map);
$base-font-unit: base-font-unit($settings);
$base-unit-multiplier: base-unit-multiplier($base-font-unit);
$base-font-size: base-font-size($settings);
$base-line-height: base-line-height($settings);
$line-height-spacing: line-height-spacing(1, $settings);
$base-spacing: base-spacing(1, $settings);
$font-scale-length: length(map-get($settings, 'base-font-scale'));
$font-unit-ems-bool: if($base-font-unit == 'em', true, false);
$margin-bottom-bool: map-get($settings, 'margin-bottom');
@for $i from 1 through $font-scale-length {
$font-scale-value: get-font-scale-value($i, $settings);
$font-size: $base-font-size * $font-scale-value;
$line-height: 0;
$margin-bottom: 0;
// Line Height Calculation
@if $font-size <= $line-height-spacing {
$line-height: $line-height-spacing;
} @else {
$increment: 1.5;
// Use half increments, while technically breaking the baseline, they are more aesthetically pleasing and still mathematically sound
@while line-height-spacing($increment, $settings) <= $font-size {
$increment: $increment + .5;
}
@if $font-unit-ems-bool {
$line-height: line-height-spacing($increment, $settings) / $font-size;
} @else {
$line-height: line-height-spacing($increment, $settings);
}
}
// Margin Bottom Calculation
@if $margin-bottom-bool {
@if $font-unit-ems-bool {
$margin-bottom: $base-spacing / $font-size * $base-unit-multiplier;
} @else {
$margin-bottom: $base-spacing;
}
}
// Heading Output
font-size: $font-size;
line-height: $line-height;
margin-bottom: $margin-bottom;
}
}
$h1-shevy: (
base-font-scale: ($h1)
);
$h2-shevy: (
base-font-scale: ($h2)
);
$h3-shevy: (
base-font-scale: ($h3)
);
$h4-shevy: (
base-font-scale: ($h4)
);
$h5-shevy: (
base-font-scale: ($h5)
);
$shevy: (
base-font-size: $base-font-size,
base-line-height: $base-line-height,
base-font-scale: ($h1, $h2, $h3, $h4, $h5, 1), // using Major Third type scale: https://type-scale.com
margin-bottom: true,
proximity: false,
proximity-factor: .85
);
$shevy-small: (
base-font-size: $base-font-size * .875, //14px
base-line-height: $base-line-height,
base-font-scale: ($h1, $h2, $h3, $h4, $h5, 1), // using Major Third type scale: https://type-scale.com
margin-bottom: true,
proximity: false,
proximity-factor: .85
);
$shevy-lede: (
base-font-size: $base-font-size * 2, //32px
base-line-height: 1.25,// $base-line-height,
base-font-scale: ($h1, $h2, $h3, $h4, $h5, 1), // using Major Third type scale: https://type-scale.com
margin-bottom: true,
proximity: false,
proximity-factor: .85
);
// $shevy-ssmall: (
// base-font-size: $base-font-size * .75, //12px
// base-line-height: $base-line-height,
// base-font-scale: ($h1, $h2, $h3, $h4, $h5, 1), // using Major Third type scale: https://type-scale.com
// margin-bottom: false,
// proximity: false,
// proximity-factor: .85
// );