From c522059d06ad813bb7341f20281141f334cc5db7 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Tue, 10 Mar 2026 17:00:49 +0100 Subject: [PATCH] refactor(extra-features): enhance utility variables and section spacer logic --- .../theme/custom/abstracts/_utilities.scss | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss index 57886ea..be7d93d 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -1,28 +1,32 @@ // Header selector for interpolation -// Example usage: #{$headings} { ... } -$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; +// Example usage: #{$headers} { ... } +$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; + +// All text selector for interpolation +$text: "#{$headers}, p, span, a, li"; + +// Section Spacers. Just set the two variables below and it is fully responsive! +// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with --small (ex. section-spacer--small). -// Section Spacers $section-spacer: rem-calc(50px); $section-spacer-small: rem-calc(25px); .section-spacer-both { - margin-top: $section-spacer; - margin-bottom: $section-spacer; + margin-top: $section-spacer-small; + margin-bottom: $section-spacer-small; @include bs5-media-breakpoint-up(lg) { - margin-top: calc($section-spacer * 1.5); - margin-bottom: calc($section-spacer * 1.5); + margin-top: $section-spacer; + margin-bottom: $section-spacer; } &--small { margin-top: $section-spacer-small; margin-bottom: $section-spacer-small; @include bs5-media-breakpoint-up(lg) { - margin-top: calc($section-spacer-small * 2); - margin-bottom: calc($section-spacer-small * 2); + margin-top: $section-spacer-small; + margin-bottom: $section-spacer-small; } } } - .section-spacer { @extend .section-spacer-both; margin-bottom: unset;