From fc4e2c6fee17799a433288732bef9cd16b341a4e Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Wed, 3 Aug 2022 09:50:34 +0200
Subject: [PATCH] fix
---
assets/js/theme/blocks/keyFigures.js | 20 ++++++++++++----
assets/sass/_theme/_configuration.sass | 15 +++++++++++-
assets/sass/_theme/blocks/key_figures.sass | 27 +++++++++++++++-------
assets/sass/_theme/blocks/pages.sass | 3 ---
4 files changed, 48 insertions(+), 17 deletions(-)
diff --git a/assets/js/theme/blocks/keyFigures.js b/assets/js/theme/blocks/keyFigures.js
index 8428d8c6..7a288982 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 c4e2aecc..a7d7fc1c 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 6069e233..a0062306 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 0c35ca7f..a09b85a5 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
--
GitLab