From fba80430061b94da6e285238e1cd5bc064f7c962 Mon Sep 17 00:00:00 2001 From: soufiane Date: Wed, 17 May 2023 17:06:02 +0200 Subject: [PATCH] wip #5812 @6:00 --- .../mu-plugins/cube/Widgets/CarouselHome.php | 4 +-- .../mu-plugins/cube/Widgets/StickyNav.php | 2 +- .../resources/styles/common/helpers.sass | 4 ++- .../resources/styles/partials/header.sass | 35 +++++++++++++++++++ .../resources/styles/partials/header.scss | 35 ------------------- .../styles/partials/home-carousel.sass | 34 ++++++++++++++---- .../partials/responsive-navigation.sass | 1 + .../resources/styles/widgets/blockText.sass | 29 +++++++++++++-- .../styles/widgets/highlightTitle.sass | 3 ++ .../resources/styles/widgets/stickyNav.sass | 3 +- .../views/widgets/carousel-home.blade.php | 6 ++-- .../views/widgets/text-image.blade.php | 10 +++--- 12 files changed, 111 insertions(+), 55 deletions(-) create mode 100644 wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass delete mode 100644 wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss diff --git a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php index 6b8c801..85fc1c3 100644 --- a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php +++ b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php @@ -128,7 +128,7 @@ class CarouselHome extends _Base { ], 'separator' => 'after', 'selectors' => [ - '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail img' => 'left: {{SIZE}}px' + '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--left: {{SIZE}}px' ], ] ); @@ -150,7 +150,7 @@ class CarouselHome extends _Base { ], 'separator' => 'after', 'selectors' => [ - '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail img' => 'bottom: -{{SIZE}}px' + '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--top: {{SIZE}}px' ], ] ); diff --git a/wp-content/mu-plugins/cube/Widgets/StickyNav.php b/wp-content/mu-plugins/cube/Widgets/StickyNav.php index 6b694ee..c302c86 100644 --- a/wp-content/mu-plugins/cube/Widgets/StickyNav.php +++ b/wp-content/mu-plugins/cube/Widgets/StickyNav.php @@ -36,7 +36,7 @@ class StickyNav extends CarouselHome echo '
-

'.$item['title'].'

+

'.$item['title'].'

'.$item['text'].'

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass index 9e3cfa3..d55f334 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass @@ -1,4 +1,4 @@ -$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': 3.815rem,'lg': 1.953rem,'md': 1.25rem, 'sm': 1rem) +$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': var(--step-7),'lg': 1.953rem,'md': 1.25rem, 'sm': 1rem) $fontWeights: (light: 300,normal: 400,medium: 500,semibold: 600,bold: 700,'extra-bold': 800,black: 900) $colors: ('red': ('full': #F42865,'clear': #707070,'transparent': rgba(249,195,211,.5)),'turquoise': #28CABD,'blue': ('full': #092CC8,'clear': #C3CBF0),'orange': ( 'full': #FD6120,'transparent': rgba(255,226,199,.5)),'grey': ('disabled': #B0B4C1,'dark': #141414)) $breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1140px', 'desktop': '1344px', 'widescreen': '1680px') @@ -80,6 +80,7 @@ $textPositions: ('left','center','right') --space-20-44: clamp(1.25rem, calc(0.70rem + 2.44vw), 2.75rem) --space-36-126: clamp(2.25rem, calc(0.19rem + 9.15vw), 7.88rem) + --space-36-86: clamp(2.38rem, calc(1.28rem + 4.88vw), 5.38rem) --space-74-126: clamp(4.63rem, calc(3.44rem + 5.28vw), 7.88rem) --space-56-128: clamp(3.50rem, calc(1.85rem + 7.32vw), 8.00rem) @@ -92,3 +93,4 @@ $textPositions: ('left','center','right') --step-4: clamp(3.90rem, calc(1.50rem + 12.02vw), 11.60rem) --step-5: clamp(4.39rem, calc(1.24rem + 15.79vw), 14.50rem) --step-6: clamp(4.94rem, calc(0.82rem + 20.59vw), 18.12rem) + --step-7: clamp(2.28rem, calc(1.37rem + 4.04vw), 4.77rem) diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass new file mode 100644 index 0000000..e5ecfc9 --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass @@ -0,0 +1,35 @@ +header.banner + position: fixed + width: 100% + z-index: 99 + transition: all .3s + top: 0 + img + width: 100% + transition: all .3s + +body.sticky header.banner + background-color: #FFFFFF + padding: 0.5rem 0 + img + width: 80% + +body.home:not(.sticky) + a + color: #FFFFFF + +#menu-menu + display: flex + li:not(:last-child) + margin-right: 62px + + li.current-menu-item a + color: map-get($colors, 'red', 'full') + + li:hover a + border-bottom: 1px solid + + a + font-weight: 500 + transition: border-bottom .3s + padding-bottom: 2px diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss deleted file mode 100644 index ef6167a..0000000 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss +++ /dev/null @@ -1,35 +0,0 @@ -header.banner { - position: fixed; - width: 100%; - z-index: 99; - transition: all .3s; - top: 0; - img { - width: 100%; - transition: all .3s; - } -} - -body.sticky header.banner { - background-color: #FFFFFF; - padding: 0.5rem 0; - img { - width: 80%; - } -} - -#menu-menu { - display: flex; - li:not(:last-child) { - margin-right: 62px - } - li.current-menu-item a, - li:hover a { - border-bottom: 1px solid; - } - a { - font-weight: 500; - transition: all .3s; - padding-bottom: 2px; - } -} diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass index 8a98dd3..534d64c 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass @@ -15,17 +15,26 @@ &.active z-index: 1 [class*="side"] - .overlay + .overlay, + .thumbnail height: 100% + .text opacity: 1 transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s top: 0 + .leftside + .overlay + z-index: 2 + .thumbnail + z-index: 3 &:not(.active) [class*="side"] - .overlay + .overlay, + .thumbnail height: 0 + margin-top: auto .leftside, .rightside @@ -40,11 +49,13 @@ position: absolute left: 0 - transition: all .7s + transition: all .9s cubic-bezier(.7, 0, .2, 1) img object-fit: cover .leftside + display: flex + flex-direction: column .overlay background-position: center background-size: cover @@ -54,18 +65,26 @@ .thumbnail position: relative - height: 100% + height: 0 + transition: height .9s cubic-bezier(.7, 0, .2, 1), background-position-y 1s + background-size: 100% + background-repeat: no-repeat + background-position: left var(--left) top calc(100% + var(--top)) img width: 100% - height: auto + height: 100% //auto position: absolute - object-fit: contain - bottom: 0 + object-fit: cover + left: var(--left) + bottom: calc(var(--bottom) + 30px) + transition: bottom 1s .rightside display: flex align-items: flex-end + position: relative + z-index: 4 .text padding-bottom: 137px @@ -86,6 +105,7 @@ &.next .leftside margin-bottom: auto + margin-top: 0 .overlay top: 0 .rightside diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass index c259e5a..bc13eb8 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass @@ -11,6 +11,7 @@ padding-top: 126px transform: translateX(-100%) transition: all .3s + overflow-y: auto #menu-menu flex-direction: column padding: 0 diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass index 002db7c..c36c171 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass @@ -5,13 +5,13 @@ margin-bottom: var(--space-l-xl) .text-block - display: grid - +special-gap(0) +screen-size(small-desktop) + display: grid grid-template-columns: repeat(12, 1fr) //grid-template-rows: 1fr auto auto 1fr align-items: center height: fit-content + +special-gap(0) &-title, &-subtitle margin-bottom: 21px @@ -54,3 +54,28 @@ &-subtitle font-size: 20px + + &-body + h2 + width: max-content + margin-top: var(--space-36-86) + color: map-get($colors, 'red','full') !important + position: relative + margin-bottom: 23px + font-size: 1.653rem + line-height: 1 + font-weight: map-get($fontWeights, 'bold') + font-family: "Proxima Nova", Sans-serif + +screen-size(small-desktop) + font-size: map-get($fontSizes, 'lg') + &:after + content: "" + width: 100% + height: 38.8% + background-color: map-get($colors, 'red','transparent') + position: absolute + left: 0 + bottom: 0 + + a + color: map-get($colors, 'grey', 'dark') diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass index 097a587..f1673a0 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass @@ -1,6 +1,9 @@ .highlight width: max-content line-height: 1 + +screen-size(phone, 'max') + &:not(.text-blockbtn-above-title) + font-size: 27px &-bar width: 100% height: 38.8% diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass index 9fda70c..856a024 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass @@ -1,6 +1,6 @@ .sticky-nav - display: grid +screen-size(small-desktop) + display: grid grid-template-columns: repeat(2, 1fr) .leftside width: 100% @@ -17,6 +17,7 @@ color: #DDDDDD h3 margin-bottom: var(--space-m-l) + font-size: var(--step-7) img display: block margin-bottom: 18px diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php index a81fa83..1fab3ab 100644 --- a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php +++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php @@ -7,8 +7,7 @@
@if(array_key_exists('image',$slide)) -
- +
@endif
@@ -24,4 +23,7 @@
@endforeach +
+ +
diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php index 3aaa56f..eea1de0 100644 --- a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php +++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php @@ -1,8 +1,10 @@
-

- {{ $settings['above_title'] }} - -

+ @if($settings['above_title']) +

+ {{ $settings['above_title'] }} + +

+ @endif
-- 2.39.5