diff --git a/assets/js/theme/blocks/keyFigures.js b/assets/js/theme/blocks/keyFigures.js index 8428d8c61f52d40d5eb390fc783c495fdbf1ee1a..7a2889822db34eb191db2028c467d575f4860daf 100644 --- a/assets/js/theme/blocks/keyFigures.js +++ b/assets/js/theme/blocks/keyFigures.js @@ -26,11 +26,7 @@ class KeyFigures { target = parseFloat(figure.innerHTML, 10); this.values.push(0); this.targets.push(target); - figure.style.minWidth = figure.offsetWidth + 'px'; - // Show format value if reduced motion - if (isReducedMotionPrefered()) { - figure.innerText = this.formatValue(target); - } + figure.innerText = this.formatValue(target); }); // Show format value if reduced motion @@ -39,6 +35,13 @@ class KeyFigures { this.intersectionObserver.POLL_INTERVAL = 100; this.intersectionObserver.observe(this.dom); } + + this.resize(); + this.listen(); + } + + listen () { + window.addEventListener('resize', this.resize.bind(this)); } observe (entries) { @@ -82,6 +85,13 @@ class KeyFigures { return value.toLocaleString('en').replace(',', separator); } + resize () { + this.figures.forEach((figure) => { + figure.style.minWidth = 0; + figure.style.minWidth = figure.offsetWidth + 'px'; + }); + } + static easeInOutQuart (t, b, c, d) { if ((t /= d / 2) < 1) { return c / 2 * t * t * t * t + b; diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass index c4e2aecc422b18a5138b346f0ab1fd7d3083d1bf..a7d7fc1cc0c697e07ef5ce47916aee6307cc75bc 100644 --- a/assets/sass/_theme/_configuration.sass +++ b/assets/sass/_theme/_configuration.sass @@ -175,7 +175,20 @@ $block-testimonials-pagination-background: $main-border-color !default $block-testimonials-pagination-progress-background: $main-color !default // Block key_figures -$block-key_figures-number-font-size: px2rem(60) !default +$block-key_figures-font-size: px2rem(16) !default +$block-key_figures-number-font-size: px2rem(32) !default + +$block-key_figures-font-size-md: px2rem(18) !default +$block-key_figures-number-font-size-md: px2rem(40) !default + +$block-key_figures-font-size-lg: px2rem(20) !default +$block-key_figures-number-font-size-lg: px2rem(50) !default + +$block-key_figures-font-size-xl: $block-key_figures-font-size-lg !default +$block-key_figures-number-font-size-xl: px2rem(60) !default + +$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default +$block-key_figures-number-font-size-xxl: px2rem(80) !default // Sections $article-title-size: $h4-size !default diff --git a/assets/sass/_theme/blocks/key_figures.sass b/assets/sass/_theme/blocks/key_figures.sass index 6069e2332e3d81ebe8a2e19a7a41d842585c1130..a0062306476f8d9051143caeb0ba05c7655c4e43 100644 --- a/assets/sass/_theme/blocks/key_figures.sass +++ b/assets/sass/_theme/blocks/key_figures.sass @@ -1,20 +1,31 @@ .block-key_figures ul - // --bs-gutter-y: 3rem - @include grid(3, md) - list-style: none - padding-left: 0 - margin-bottom: 0 - li - // margin-bottom: 3rem + @include grid(4, md) + @include list-reset dl margin-bottom: 0 dt white-space: nowrap + font-size: $block-key_figures-font-size strong display: inline-block font-size: $block-key_figures-number-font-size - // padding-right: map-get($spacers, 1) + @include media-breakpoint-up(md) + font-size: $block-key_figures-font-size-md + strong + font-size: $block-key_figures-number-font-size-md + @include media-breakpoint-up(lg) + font-size: $block-key_figures-font-size-lg + strong + font-size: $block-key_figures-number-font-size-lg + @include media-breakpoint-up(xl) + font-size: $block-key_figures-font-size-xl + strong + font-size: $block-key_figures-number-font-size-xl + @include media-breakpoint-up(xxl) + font-size: $block-key_figures-font-size-xxl + strong + font-size: $block-key_figures-number-font-size-xxl dd margin-bottom: 0 margin-left: 0 diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass index 0c35ca7f8d059ada438d47c5ff8afdd743c5e844..a09b85a5bb07b4c04ec91f5ebd23f761337bcfd9 100644 --- a/assets/sass/_theme/blocks/pages.sass +++ b/assets/sass/_theme/blocks/pages.sass @@ -32,11 +32,8 @@ margin-top: calc(#{$spacing2} + #{$h6-size-md}) .page .title - margin-bottom: 0 a @include hover-translate-icon(before, 3) - @extend .p - font-family: $body-font-family text-decoration-color: transparent &:hover text-decoration-color: black