'm-xl' => 'M ↔ XL (24px — 60px)',
'l-xl' => 'L ↔ XL (34px — 86px)',
'l-2xl' => 'L ↔ 2XL (38px — 86px)',
+ '2xl-5xl' => '2XL ↔ 5XL (72px — 126px)',
'2xl-custom' => '2XL (72px — 86px)',
'36-126' => '(36px — 126px)',
'74-126' => '(74px - 126px)',
- '2xl-5xl' => '2XL ↔ 5XL (72px — 126px)'
+ '86-108' => '(86px - 108px)',
];
}
}
\ No newline at end of file
'fields' => $repeater->get_controls(), /* Use our repeater */
'default' => [
[
- 'text' => esc_html__( 'List Item #1', 'cube' ),
+ 'text' => esc_html__( 'l’Alliance pour l’éducation-United Way', 'cube' ),
'link' => '',
],
[
- 'text' => esc_html__( 'List Item #2', 'cube' ),
+ 'text' => esc_html__( 'EPIC - Simplon', 'cube' ),
'link' => '',
],
[
- 'text' => esc_html__( 'List Item #3', 'cube' ),
+ 'text' => esc_html__( 'EPIC - Nightline', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'L’Ecole à l’Hôpital', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Zup de Co', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Culture Prioritaire', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Unis-Cité', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Moi dans 10 ans', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Les Glénans', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Ecolhuma', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Epic', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Entr-Autres', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Wake up Café', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Entreprendre pour Apprendre', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Ecole de la Transition Ecologique', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'La Grande Tribune', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Enactus', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Chemins d’avenirs', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Institut Imagine', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Le Labo des histoires', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Votre Ecole Chez Vous', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Lire pour en Sortir', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Espérance banlieues', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Le Paysan Urbain Marseille', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'CESSE', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'JobIRL', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Massajobs', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Hectar', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Proxité', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Crée Ton Avenir', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Philarmonie de Paris (projet Démos)', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( '20ans1projet', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Orange Rouge', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Tirelires d’Avenir', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'EPIC - Sport dans la Ville', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'La Fondation pour l’écriture', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Scholavie', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'EPIC - Duo for a JOB', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'Rising You Marseille', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'La Fabrique de la Danse', 'cube' ),
'link' => '',
],
],
'background_image',
[
'label' => esc_html__( 'Background image', 'cube' ),
- 'type' => Controls_Manager::MEDIA
+ 'type' => Controls_Manager::MEDIA,
+ 'selectors' => [
+ '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--content: url({{VALUE}})',
+ ]
]
);
'image',
[
'label' => esc_html__( 'Image', 'cube' ),
- 'type' => Controls_Manager::MEDIA
+ 'type' => Controls_Manager::MEDIA,
]
);
'label' => esc_html__( 'Title size', 'cube' ),
'type' => Controls_Manager::SELECT,
'options' => [
+ 'xxlarge' => [
+ 'title' => esc_html__( 'Double Extra Large', 'cube' ),
+ ],
'xlarge' => [
'title' => esc_html__( 'Extra Large', 'cube' ),
],
$size = $this->get_settings('text_size') ? $this->get_settings('text_size') : 'large';
$size_classes = [
- 'xlarge' => 'text-xl',
+ 'xxlarge' => 'text-xl',
+ 'xlarge' => 'text-lg-1',
'large' => 'text-lg',
];
// CSS Classes for elements
- $this->add_render_attribute('title', 'class', ["text-block-title font-bold text-xl $size_classes[$size]"]);
+ $this->add_render_attribute('title', 'class', ["text-block-title font-bold $size_classes[$size]"]);
$this->add_render_attribute('subtitle', 'class', ["text-block-subtitle font-bold text-md"]);
$this->add_render_attribute('body', 'class', ['text-block-body']);
width: 80%
max-width: 1344px
+.full-on-mobile > .elementor-container
+ +screen-size(small-desktop, 'max')
+ width: 100%
+
.full-container
.elementor-container
width: 100%
body:not(.home)
.elementor-section:nth-child(1)
margin-bottom: 36px
- .elementor-section:nth-child(2)
- +screen-size(small-desktop)
- margin-top: -112px
+ &:not(.politique-de-confidentialite):not(.mentions-legales)
+ .elementor-section:nth-child(2)
+ +screen-size(small-desktop)
+ margin-top: -112px
h1,h2,h3,h4,h5,h6
&:not(.highlight)
.elementor-widget-cube-highlight-title
+screen-size(small-desktop, 'max')
width: 100% !important
+
+body.nous-contacter
+ .elementor-section:last-child > .elementor-container
+ padding-bottom: var(--space-xl-2xl)
+ border-bottom: 1px solid #D8D8D8
-$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': var(--step-7),'lg': 1.953rem,'md': 1.25rem, 'sm': 1rem)
+$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': var(--step-7), 'lg-1': var(--step--1),'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')
--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)
+ --space-86-108: clamp(5.38rem, calc(4.87rem + 2.24vw), 6.75rem)
--step--2: clamp(1.93rem, calc(1.58rem + 1.74vw), 3.04rem)
--step--1: clamp(2.17rem, calc(1.66rem + 2.55vw), 3.80rem)
body.home:not(.sticky)
a
- color: #FFFFFF
+ +screen-size(small-desktop)
+ color: #FFFFFF
#menu-menu
display: flex
.home-carousel
position: relative
- height: 0 //87vh //798px
- padding-bottom: 42.25%
+ height: 798px //87vh
+ //padding-bottom: 42.25%
overflow: hidden
+ +screen-size(small-desktop, 'max')
+ display: none
.carousel
&-slide
width: 100%
.thumbnail
height: 100%
+ .thumbnail
+ position: relative
+ transition: height .4s cubic-bezier(.7, 0, .2, 1)
+ img.bg
+ height: 0
+ bottom: 0
+ img:not(.bg)
+ bottom: 0
+
.text
opacity: 1
transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
top: 0
+
.leftside
.overlay
z-index: 2
left: calc((-100vw + 1344px) / 2)
.thumbnail
+ overflow: hidden
position: relative
- 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: 100% //auto
position: absolute
- object-fit: cover
+ //top: 100%
+ //bottom: calc(var(--bottom) + 30px)
+ //transition: bottom 1s
+ img.bg
+ width: 100%
+ height: 100%
+ top: 0
+ transition: bottom .9s cubic-bezier(.7, 0, .2, 1)
+
+ img:not(.bg)
+ width: max-content
+ height: max-content
+ bottom: 0
left: var(--left)
- bottom: calc(var(--bottom) + 30px)
- transition: bottom 1s
.rightside
display: flex
margin-bottom: 30px
font-size: var(--step-3) !important
+
&.next
.leftside
margin-bottom: auto
- margin-top: 0
+ margin-top: initial
.overlay
top: 0
+
+ img.bg
+ bottom: 0
.rightside
margin-top: auto
.overlay
bottom: 0
+ img.bg
+ top: 0
+
+
&:not(.active)
.overlay
height: 0
transition: height 0s
transition-delay: 1s
-
- &.next
.text
animation-name: anime
animation-duration: .8s
+ animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1)
@keyframes anime
0%
top: -1.25vw
100%
top: 1.25vw
+
+.home-carousel-mobile
+ overflow: hidden
+ .thumbnail,
+ .overlay
+ height: 360px
+ overflow: hidden
+
+ .thumbnail
+ position: relative
+ img
+ width: 100%
+ height: 100%
+ &.bg
+ position: absolute
+ top: 0
+ left: 0
+ &:not(.bg)
+ object-fit: contain
+ object-position: center 45px
+ margin: 0 auto
+ position: relative
+ z-index: 1
+
+ .text
+ width: 90%
+ margin: 0 auto
+ +screen-size('tablet')
+ width: 80%
+ *
+ color: #FFFFFF
+ h1
+ font-size: var(--step-3)
+ margin-top: 16px
+ .btn
+ margin-top: 20px
+
+ +screen-size(small-desktop)
+ display: none
+
+ .swiper-pagination
+ bottom: 29px
+ &-bullet
+ bottom: 29px
+ width: 12px
+ height: 12px
+ background-color: rgba(255,255,255,.25)
+ &-active
+ border: 2px solid #FFFFFF
--- /dev/null
+.politique-de-confidentialite,
+.mentions-legales
+
+ *
+ color: map-get($colors, 'grey', 'dark')
+ h2
+ font-size: map-get($fontSizes, 'lg')
+ margin-bottom: 21px
+ &:not(:first-child)
+ margin-top: 46px
+
+ h3
+ font-size: map-get($fontSizes, 'md')
+ margin-bottom: 23px
+ &:not(:first-child)
+ margin-top: 23px
-.swiper
- &-container
- width: 100% !important
- overflow: hidden
- background-color: rgba(249,195,211,.5)
- padding-top: 84px
- padding-bottom: 75px
-
- .title
- margin-bottom: 84px
- font-size: 39px
-
- &-wrapper
- max-width: 83.33%
- margin: 0 auto 42px
- position: relative
-
- &-slide
- width: 320px !important
- height: 320px
- background-color: #FFF7F9
- padding: 42px
- display: flex
- flex-direction: column
-
- .number
- color: map-get($colors, 'red','full')
- font-size: 48px
- margin-bottom: 20px
-
- .content
- font-size: 25px
- margin-bottom: auto
-
- &-controls
- display: flex
- justify-content: center
-
- &-prev,
- &-next
- width: 48px
- height: 48px
- background-color: map-get($colors, 'red', 'full')
- border-radius: 50px
- display: flex
- align-items: center
- justify-content: center
- margin: 0 5px
-
- &-button-disabled
- background-color: rgba(244,40,101,.25)
+
+.test
+ width: 100% !important
+ overflow: hidden
+ background-color: rgba(249,195,211,.5)
+ padding-top: 84px
+ padding-bottom: 75px
+
+ .title
+ margin-bottom: 84px
+ font-size: 39px
+
+
+ .swiper
+
+ &-container
+ max-width: 90%
+ margin: 0 auto
+ +screen-size(tablet)
+ max-width: 83.33%
+
+
+ &-wrapper
+ margin-bottom: 42px
+ position: relative
+
+ &-slide
+ width: 306px !important
+ height: 306px
+ background-color: #FFF7F9
+ padding: 42px
+ display: flex
+ flex-direction: column
+ +screen-size(tablet)
+ width: 320px !important
+ height: 320px
+
+ .number
+ color: map-get($colors, 'red','full')
+ font-size: 48px
+ margin-bottom: 20px
+
+ .content
+ font-size: 25px
+ margin-bottom: auto
+
+ &-controls
+ display: flex
+ justify-content: center
+
+ &-prev,
+ &-next
+ width: 48px
+ height: 48px
+ background-color: map-get($colors, 'red', 'full')
+ border-radius: 50px
+ display: flex
+ align-items: center
+ justify-content: center
+ margin: 0 5px
+
+ &-button-disabled
+ background-color: rgba(244,40,101,.25)
flex-wrap: wrap
grid-template-columns: repeat(1, 1fr)
+special-gap(4.444)
- +screen-size('tablet')
+ +screen-size(small-desktop)
width: 83.33%
grid-template-columns: repeat(3, 1fr)
- +special-gap(0)
+ +special-gap(1)
li
width: 100%
- +screen-size(tablet, 'max')
+ +screen-size(small-desktop, 'max')
&:nth-child(n + 11)
display: none
visibility: hidden
+ button
+ +screen-size(small-desktop)
+ display: none
&-title,
&-subtitle
margin-bottom: 21px
+
&.gallery-left
+screen-size(small-desktop)
.text-block
&-title
grid-area: 2 / 8 / 3 / 12
&-subtitle
- grid-area: 3 / 8 / 4 / 12
+ grid-area: 2 / 8 / 4 / 12
&-body
grid-area: 4 / 8 / 5 / 12
.text-block-above-title
&-title
grid-area: 2 / 2 / 3 / 6
&-subtitle
- grid-area: 3 / 2 / 4 / 6
+ grid-area: 2 / 2 / 4 / 6
&-body
grid-area: 4 / 2 / 5 / 6
+ &.has-title
+ &.gallery-left
+ +screen-size(small-desktop)
+ .text-block-subtitle
+ grid-area: 3 / 8 / 4 / 12
+ &.gallery-right
+ +screen-size(small-desktop)
+ .text-block-subtitle
+ grid-area: 3 / 2 / 4 / 6
+
&-image
align-self: flex-start
+screen-size(small-desktop, 'max')
+screen-size(small-desktop)
grid-template-columns: repeat(12, 1fr)
grid-template-rows: 1fr auto auto 1fr
- align-items: center
+ align-items: flex-start
height: fit-content
&.gallery-left
+screen-size(small-desktop)
.special-container
.elementor-container
- max-width: 100%
+ //max-width: 100%
<div class="leftside">
<div class="overlay overlayside" style="background-image: url({{$slide['background_image']['url']}})"></div>
@if(array_key_exists('image',$slide))
- <div class="thumbnail" style="background-image: url({{ $slide['image']['url'] }})">
+ <div class="thumbnail">
+ <img src="{{ $slide['image']['url'] }})" />
+ <img class="bg" src="{{ $slide['background_image']['url']}} " />
</div>
@endif
</div>
</div>
</div>
+
+
+<div class="home-carousel-mobile">
+ <div class="swiper-wrapper">
+ @foreach($slides as $key => $slide)
+ <div class="swiper-slide elementor-repeater-item-{{$slide['_id']}}">
+ @if(array_key_exists('image',$slide))
+ <div class="thumbnail">
+ <img src="{{ $slide['image']['url'] }})" />
+ <img class="bg" src="{{ $slide['background_image']['url'] }}" />
+ </div>
+ @endif
+ <div class="rightside">
+ <div class="overlay overlayside">
+ <div class="text">
+ <h1 class="text-3xl">{{ $slide['title'] }}</h1>
+ <p>{{ $slide['text'] }}</p>
+ @if(array_key_exists('link',$slide))
+ <a class="btn white" href="{{ $slide['link']['url'] }}">{{ $slide['link_text'] }}</a>
+ @endif
+ </div>
+ </div>
+ </div>
+ </div>
+ @endforeach
+ </div>
+ <div class="swiper-pagination"></div>
+</div>
-<div class="swiper-container">
+<div class="test">
<h3 class="title text-center">{{ $settings['title'] }}</h3>
- <div class="swiper-wrapper">
- @foreach($settings['slides'] as $key => $slide)
- @php
- $key += 1;
- @endphp
- <div class="swiper-slide">
- <p class="number font-bold">{{ sprintf('%02d', $key) }}</p>
- <p class="content font-bold">{{ $slide['text'] }}</p>
- <div class="icon-container">
- <img src="{{ $slide['icon']['url'] }}" />
+ <div class="swiper-container">
+ <div class="swiper-wrapper">
+ @foreach($settings['slides'] as $key => $slide)
+ @php
+ $key += 1;
+ @endphp
+ <div class="swiper-slide">
+ <p class="number font-bold">{{ sprintf('%02d', $key) }}</p>
+ <p class="content font-bold">{{ $slide['text'] }}</p>
+ <div class="icon-container">
+ <img src="{{ $slide['icon']['url'] }}" />
+ </div>
</div>
- </div>
- @endforeach
- </div>
- <div class="swiper-controls">
- <button class="swiper-prev">
- <img src="@asset('images/arrow-left.svg')" alt="Slides précedents" />
- </button>
- <button class="swiper-next">
- <img src="@asset('images/arrow-right.svg')" alt="Slides suivants" />
- </button>
+ @endforeach
+ </div>
+
+ <div class="swiper-controls">
+ <button class="swiper-prev">
+ <img src="@asset('images/arrow-left.svg')" alt="Slides précedents" />
+ </button>
+ <button class="swiper-next">
+ <img src="@asset('images/arrow-right.svg')" alt="Slides suivants" />
+ </button>
+ </div>
</div>
</div>
-<div class="text-block {{ $settings['gallery_position'] }}">
+<div class="text-block {{ $settings['gallery_position'] }} {{ $settings['title'] ? 'has-title' : '' }}">
@if($settings['above_title'])
<p class="text-block-above-title highlight text-lg relative font-bold">
<span class='relative z-1'>{{ $settings['above_title'] }}</span>
</p>
@endif
- <div class="text-block-image">
- <img class="" src="{{ $settings['image']['url'] }}" />
- </div>
+ @if($settings['image']['url'])
+ <div class="text-block-image">
+ <img class="" src="{{ $settings['image']['url'] }}" />
+ </div>
+ @endif
@if($settings['title'])
<{{$settings['title_tag']}} class="{{implode(' ',$attributes['title']['class'])}}">