ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Update default headings (#172)

Browse Source 
* Move font-size css var into dedicated heading file + Add default mixins

* Rename responsive-type for a more generic name
This commit is contained in:
Lucas Bigot
2024-04-03 08:28:57 -04:00
committed by GitHub
parent 6d37049989
commit 353a38915d
3 changed files with 63 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
assets/styles/components/_heading.scss
View File

@@ -2,30 +2,78 @@
// Components / Headings // Components / Headings
// ========================================================================== // ==========================================================================
// Font sizes
// ==========================================================================
:root {
// Default
--font-size-h1: #{responsive-value(38px, 90px, $from-xl)};
--font-size-h2: #{responsive-value(34px, 72px, $from-xl)};
--font-size-h3: #{responsive-value(28px, 54px, $from-xl)};
--font-size-h4: #{responsive-value(24px, 40px, $from-xl)};
--font-size-h5: #{responsive-value(20px, 30px, $from-xl)};
--font-size-h6: #{responsive-value(18px, 23px, $from-xl)};
}
// Mixins
// ==========================================================================
@mixin heading {
font-family: ff('sans');
font-weight: $font-weight-medium;
}
@mixin heading-h1 {
font-size: var(--font-size-h1);
line-height: 1.1;
}
@mixin heading-h2 {
font-size: var(--font-size-h2);
line-height: 1.1;
}
@mixin heading-h3 {
font-size: var(--font-size-h3);
line-height: 1.1;
}
@mixin heading-h4 {
font-size: var(--font-size-h4);
line-height: 1.2;
}
@mixin heading-h5 {
font-size: var(--font-size-h5);
line-height: 1.2;
}
@mixin heading-h6 {
font-size: var(--font-size-h6);
line-height: 1.4;
}
// Styles
// ==========================================================================
.c-heading { .c-heading {
margin-bottom: rem(30px); @include heading;
&.-h1 { &.-h1 {
font-size: var(--font-size-h1); @include heading-h1;
} }
&.-h2 { &.-h2 {
font-size: var(--font-size-h2); @include heading-h2;
} }
&.-h3 { &.-h3 {
font-size: var(--font-size-h3); @include heading-h3;
} }
&.-h4 { &.-h4 {
font-size: var(--font-size-h4); @include heading-h4;
} }
&.-h5 { &.-h5 {
font-size: var(--font-size-h5); @include heading-h5;
} }
&.-h6 { &.-h6 {
font-size: var(--font-size-h6); @include heading-h6;
} }
} }

13
assets/styles/settings/_config.variables.scss
View File

@@ -12,19 +12,6 @@
// Container // Container
--container-width: calc(100% - 2 * var(--grid-margin)); --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) { @media (min-width: $from-sm) {
--grid-columns: #{$base-column-nb}; --grid-columns: #{$base-column-nb};
--grid-gutter: #{rem(16px)}; --grid-gutter: #{rem(16px)};

6
assets/styles/tools/_functions.scss
View File

@@ -196,11 +196,11 @@ $context: 'frontend' !default;
// //
// ```scss // ```scss
// .c-heading.-h1 { // .c-heading.-h1 {
// font-size: responsive-type(30px, 60px, 1800); // font-size: responsive-value(30px, 60px, 1800);
// } // }
// //
// .c-heading.-h2 { // .c-heading.-h2 {
// font-size: responsive-type(20px, 40px, $from-xl); // font-size: responsive-value(20px, 40px, $from-xl);
// } // }
// ``` // ```
// //
@@ -208,7 +208,7 @@ $context: 'frontend' !default;
// @param {number} $max-size - Maximum font size in pixels. // @param {number} $max-size - Maximum font size in pixels.
// @param {number} $breakpoint - Maximum breakpoint. // @param {number} $breakpoint - Maximum breakpoint.
// @return {function<number, function<number>, number>} // @return {function<number, function<number>, number>}
@function responsive-type($min-size, $max-size, $breakpoint) { @function responsive-value($min-size, $max-size, $breakpoint) {
$delta: math.div($max-size, $breakpoint); $delta: math.div($max-size, $breakpoint);
@return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size); @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
} }