modale responsive
This commit is contained in:
Valentin
parent
baa26f3c49
commit
376e0af7a3
|
|
@ -14,5 +14,23 @@ export const useLayoutStore = defineStore('layout', {
|
||||||
})
|
})
|
||||||
this.isEtapeListRetracted = this.isDesktop ? false : true;
|
this.isEtapeListRetracted = this.isDesktop ? false : true;
|
||||||
},
|
},
|
||||||
|
collapseEtapeListe(listeEtape) {
|
||||||
|
listeEtape.classList.add('retracted');
|
||||||
|
setTimeout(() => {
|
||||||
|
listeEtape.closest('.layout__region').classList.add('retracted');
|
||||||
|
listeEtape.nextElementSibling.classList.add('retracted');
|
||||||
|
listeEtape.classList.add('disapeared');
|
||||||
|
}, 300);
|
||||||
|
this.isEtapeListRetracted = true;
|
||||||
|
},
|
||||||
|
expandEtapeListe(listeEtape) {
|
||||||
|
listeEtape.closest('.layout__region').classList.remove('retracted');
|
||||||
|
listeEtape.nextElementSibling.classList.remove('retracted');
|
||||||
|
listeEtape.classList.remove('disapeared');
|
||||||
|
setTimeout(() => {
|
||||||
|
listeEtape.classList.remove('retracted');
|
||||||
|
}, 300);
|
||||||
|
this.isEtapeListRetracted = false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
|
import { useLayoutStore } from './layout';
|
||||||
|
|
||||||
export const useMapStore = defineStore('mapState', {
|
export const useMapStore = defineStore('mapState', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
|
|
@ -12,6 +13,7 @@ export const useMapStore = defineStore('mapState', {
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
zoomToPlace(lat, long) {
|
zoomToPlace(lat, long) {
|
||||||
|
if (useLayoutStore().isDesktop) long = long - 0.03;
|
||||||
this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
|
this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
|
||||||
this.currentZoom = this.maxZoom;
|
this.currentZoom = this.maxZoom;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { setActiveNavItem } from "./set-active-nav-item";
|
import { setActiveNavItem } from "./set-active-nav-item";
|
||||||
|
import { useLayoutStore } from '../stores/layout';
|
||||||
|
|
||||||
export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
|
export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
|
||||||
const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
|
const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
|
||||||
|
|
@ -31,6 +32,9 @@ export function handleClickableElements(clickableElements, store, router, baseUr
|
||||||
document.title = store.pageTitle;
|
document.title = store.pageTitle;
|
||||||
}
|
}
|
||||||
setActiveNavItem(store.contentType, href);
|
setActiveNavItem(store.contentType, href);
|
||||||
|
|
||||||
|
const listeEtape = document.querySelector('#etapes-liste');
|
||||||
|
if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,44 +9,27 @@ export function handleReactiveness() {
|
||||||
|
|
||||||
const listeEtape = document.querySelector('#etapes-liste');
|
const listeEtape = document.querySelector('#etapes-liste');
|
||||||
|
|
||||||
if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);
|
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
|
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
|
||||||
expandEtapeListe(listeEtape, layoutStore);
|
layoutStore.expandEtapeListe(listeEtape, layoutStore);
|
||||||
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
|
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
|
||||||
collapseEtapeListe(listeEtape, layoutStore);
|
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
listeToggleButton.addEventListener('click', () => {
|
listeToggleButton.addEventListener('click', () => {
|
||||||
if (!layoutStore.isDesktop) {
|
if (!layoutStore.isDesktop) {
|
||||||
if (!layoutStore.isEtapeListRetracted) {
|
if (!layoutStore.isEtapeListRetracted) {
|
||||||
collapseEtapeListe(listeEtape, layoutStore);
|
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
||||||
} else {
|
} else {
|
||||||
expandEtapeListe(listeEtape, layoutStore);
|
layoutStore.expandEtapeListe(listeEtape, layoutStore);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
function collapseEtapeListe(listeEtape, layoutStore) {
|
|
||||||
listeEtape.classList.add('retracted');
|
|
||||||
setTimeout(() => {
|
|
||||||
listeEtape.closest('.layout__region').classList.add('retracted');
|
|
||||||
listeEtape.nextElementSibling.classList.add('retracted');
|
|
||||||
}, 300);
|
|
||||||
layoutStore.isEtapeListRetracted = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function expandEtapeListe(listeEtape, layoutStore) {
|
|
||||||
listeEtape.closest('.layout__region').classList.remove('retracted');
|
|
||||||
listeEtape.nextElementSibling.classList.remove('retracted');
|
|
||||||
setTimeout(() => {
|
|
||||||
listeEtape.classList.remove('retracted');
|
|
||||||
}, 300);
|
|
||||||
layoutStore.isEtapeListRetracted = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setMenuToggle() {
|
export function setMenuToggle() {
|
||||||
|
|
|
||||||
|
|
@ -52,6 +52,7 @@ import { computed, watch, onMounted } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useContentStore } from '../stores/content';
|
import { useContentStore } from '../stores/content';
|
||||||
import { useMapStore } from '../stores/mapState';
|
import { useMapStore } from '../stores/mapState';
|
||||||
|
import { useLayoutStore } from '../stores/layout';
|
||||||
|
|
||||||
import ModaleHeader from './components/ModaleHeader.vue';
|
import ModaleHeader from './components/ModaleHeader.vue';
|
||||||
import ModaleFooter from './components/ModaleFooter.vue';
|
import ModaleFooter from './components/ModaleFooter.vue';
|
||||||
|
|
@ -66,6 +67,12 @@ import ModaleVideos from './components/parties/ModaleVideos.vue';
|
||||||
|
|
||||||
const store = useContentStore();
|
const store = useContentStore();
|
||||||
const mapState = useMapStore();
|
const mapState = useMapStore();
|
||||||
|
const layoutStore = useLayoutStore();
|
||||||
|
|
||||||
|
// pour importer le breakpoint
|
||||||
|
// const { minDesktopWidth } = storeToRefs(layoutStore);
|
||||||
|
// console.log(minDesktopWidth);
|
||||||
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
contentType,
|
contentType,
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,15 @@
|
||||||
<p>Étape n°{{content.etape_number}}</p>
|
<p>Étape n°{{content.etape_number}}</p>
|
||||||
<p>Du {{content.dates.start.d}} {{content.dates.start.m}} au {{ content.dates.end.d }} {{ content.dates.end.m }} {{ content.dates.end.y }}</p>
|
<p>Du {{content.dates.start.d}} {{content.dates.start.m}} au {{ content.dates.end.d }} {{ content.dates.end.m }} {{ content.dates.end.y }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="brand-pattern" :style="{ backgroundColor: couleur }">
|
<div class="locality-wrapper">
|
||||||
<div class="pattern"></div>
|
<div class="brand-pattern" :style="{ backgroundColor: couleur }">
|
||||||
</div>
|
<div class="pattern"></div>
|
||||||
<div class="locality">
|
</div>
|
||||||
<div class="top-triangle"></div>
|
<div class="locality">
|
||||||
<div class="locality-title">
|
<div class="top-triangle"></div>
|
||||||
<h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
|
<div class="locality-title">
|
||||||
|
<h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -29,57 +29,15 @@ const props = defineProps({
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.personne {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 2rem 0;
|
|
||||||
&:first-of-type {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
> figure {
|
|
||||||
width: 6rem;
|
|
||||||
height: 6rem;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 3rem;
|
|
||||||
> img {
|
|
||||||
object-fit: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .description {
|
|
||||||
width: calc(100% - 6rem);
|
|
||||||
> p {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.questions-reponses {
|
.questions-reponses {
|
||||||
margin-top: 3rem;
|
|
||||||
> div {
|
> div {
|
||||||
> .question {
|
> .question {
|
||||||
font-weight: bold;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 1.8rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: 0.8rem;
|
|
||||||
left: 0;
|
|
||||||
background-color: var(--couleur);
|
background-color: var(--couleur);
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
@import 'fonts.scss';
|
@import 'fonts.scss';
|
||||||
|
|
||||||
$desktop-min-width: 992px;
|
$desktop-min-width: 992px;
|
||||||
|
$tablet-min-width: 467px;
|
||||||
|
|
||||||
$body-margin-x: 30px;
|
$body-margin-x: 30px;
|
||||||
$body-margin-y: 5px;
|
$body-margin-y: 5px;
|
||||||
|
|
@ -9,10 +10,23 @@ $body-margin-bottom: 4vh;
|
||||||
$modale-x-padding: 5vw;
|
$modale-x-padding: 5vw;
|
||||||
$modale-bottom-padding: 180px;
|
$modale-bottom-padding: 180px;
|
||||||
|
|
||||||
$sm-font-size: 0.8rem;
|
$modale-width-mobile: 80vw;
|
||||||
$m-font-size: 1.4rem;
|
$modale-width-desktop: 50vw;
|
||||||
$l-font-size: 1.8rem;
|
|
||||||
$xl-font-size: 2.4rem;
|
$brand-pattern-height: 110px;
|
||||||
|
|
||||||
|
$sm-font-size-mobile: 0.6rem;
|
||||||
|
$sm-font-size-desktop: 0.8rem;
|
||||||
|
|
||||||
|
$m-font-size-mobile: 1.1rem;
|
||||||
|
$m-font-size-desktop: 1.4rem;
|
||||||
|
|
||||||
|
$l-font-size-mobile: 1.3rem;
|
||||||
|
$l-font-size-desktop: 1.8rem;
|
||||||
|
|
||||||
|
$xl-font-size-mobile: 1.6rem;
|
||||||
|
$xl-font-size-desktop: 2.4rem;
|
||||||
|
|
||||||
|
|
||||||
$main-color: #1a1918;
|
$main-color: #1a1918;
|
||||||
$main-color-light: #635b58;
|
$main-color-light: #635b58;
|
||||||
|
|
@ -36,7 +50,7 @@ body{
|
||||||
.layout-container {
|
.layout-container {
|
||||||
> header {
|
> header {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: fixed;
|
||||||
> div {
|
> div {
|
||||||
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
|
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -112,9 +126,12 @@ body{
|
||||||
padding-left: $menu-margin;
|
padding-left: $menu-margin;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: $l-font-size;
|
font-size: $l-font-size-mobile;
|
||||||
font-family: 'Joost', sans-serif;
|
font-family: 'Joost', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $l-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> #menu-title.open {
|
> #menu-title.open {
|
||||||
|
|
@ -130,10 +147,13 @@ body{
|
||||||
> h2 {
|
> h2 {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
font-size: $sm-font-size;
|
font-size: $sm-font-size-mobile;
|
||||||
color: $main-color-light;
|
color: $main-color-light;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> h2 {
|
> h2 {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -199,7 +219,9 @@ body{
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: top 0.3s ease-out, opacity 0.2s ease-out;
|
transition: top 0.3s ease-out, opacity 0.2s ease-out;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
font-size: $m-font-size-mobile;
|
||||||
@media screen and (min-width: $desktop-min-width) {
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
width: $menu-desktop-width;
|
width: $menu-desktop-width;
|
||||||
}
|
}
|
||||||
> li {
|
> li {
|
||||||
|
|
@ -244,7 +266,6 @@ body{
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
> .layout-content {
|
> .layout-content {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -268,7 +289,7 @@ body{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .layout__region--second {
|
> .layout__region--second {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
@ -286,11 +307,14 @@ body{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: $m-font-size;
|
font-size: $m-font-size-mobile;
|
||||||
font-family: 'marianne', sans-serif;
|
font-family: 'marianne', sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
width: 4vh;
|
width: 4vh;
|
||||||
height: 4vh;
|
height: 4vh;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> a:first-of-type {
|
> a:first-of-type {
|
||||||
border-top-left-radius: 2vh;
|
border-top-left-radius: 2vh;
|
||||||
|
|
@ -359,7 +383,7 @@ body{
|
||||||
grid-column: 1 / span 1;
|
grid-column: 1 / span 1;
|
||||||
grid-row: 1 / span 1;
|
grid-row: 1 / span 1;
|
||||||
font-family: 'Joost', sans-serif;
|
font-family: 'Joost', sans-serif;
|
||||||
font-size: $m-font-size;
|
font-size: $m-font-size-mobile;
|
||||||
/* display: flex;
|
/* display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -369,6 +393,9 @@ body{
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
text-wrap: wrap;
|
text-wrap: wrap;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
|
}
|
||||||
> a {
|
> a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -386,9 +413,12 @@ body{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
> time {
|
> time {
|
||||||
font-size: $sm-font-size;
|
font-size: $sm-font-size-mobile;
|
||||||
font-family: 'Marianne', sans-serif;
|
font-family: 'Marianne', sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> div:nth-of-type(3) {
|
> div:nth-of-type(3) {
|
||||||
|
|
@ -440,7 +470,7 @@ body{
|
||||||
grid-column: 1 / span 1;
|
grid-column: 1 / span 1;
|
||||||
grid-row: 1 / span 1;
|
grid-row: 1 / span 1;
|
||||||
font-family: 'Joost', sans-serif;
|
font-family: 'Joost', sans-serif;
|
||||||
font-size: $m-font-size;
|
font-size: $m-font-size-mobile;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -449,6 +479,9 @@ body{
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
text-wrap: wrap;
|
text-wrap: wrap;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
|
}
|
||||||
> a {
|
> a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -462,9 +495,12 @@ body{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
> time {
|
> time {
|
||||||
font-size: $sm-font-size;
|
font-size: $sm-font-size-mobile;
|
||||||
font-family: 'Marianne', sans-serif;
|
font-family: 'Marianne', sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> a {
|
> a {
|
||||||
|
|
@ -496,11 +532,12 @@ body{
|
||||||
}*/
|
}*/
|
||||||
}
|
}
|
||||||
> .layout__region--third {
|
> .layout__region--third {
|
||||||
padding-right: $body-margin-x;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding-right: $body-margin-x;
|
||||||
grid-column: 4 / span 13;
|
grid-column: 4 / span 13;
|
||||||
position: relative;
|
position: fixed;
|
||||||
z-index: 2;
|
top: 0;
|
||||||
|
z-index: 4;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: linear-gradient(to right, #faf1ebaa, #faf1eb);
|
background: linear-gradient(to right, #faf1ebaa, #faf1eb);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -523,10 +560,14 @@ body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.3s ease-out;
|
display: block;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
&.retracted {
|
&.retracted {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
&.disapeared {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
> li {
|
> li {
|
||||||
|
|
@ -559,9 +600,12 @@ body{
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
font-family: 'Joost', sans-serif;
|
font-family: 'Joost', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: $m-font-size;
|
font-size: $m-font-size-mobile;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .views-field-field-adresse-postal-code {
|
> .views-field-field-adresse-postal-code {
|
||||||
|
|
@ -570,8 +614,11 @@ body{
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
font-family: 'Joost', sans-serif;
|
font-family: 'Joost', sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
font-size: $m-font-size;
|
font-size: $m-font-size-mobile;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
|
}
|
||||||
> span {
|
> span {
|
||||||
> p::before {
|
> p::before {
|
||||||
content: '(';
|
content: '(';
|
||||||
|
|
@ -585,11 +632,14 @@ body{
|
||||||
> .views-field-field-dates {
|
> .views-field-field-dates {
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
grid-row: 2 / span 1;
|
grid-row: 2 / span 1;
|
||||||
font-size: $sm-font-size;
|
font-size: $sm-font-size-mobile;
|
||||||
font-family: 'Marianne', sans-serif;
|
font-family: 'Marianne', sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> .views-field-field-couleur {
|
> .views-field-field-couleur {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -655,7 +705,10 @@ body{
|
||||||
border-radius: 1.3rem;
|
border-radius: 1.3rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
font-size: $sm-font-size;
|
font-size: $sm-font-size-mobile;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> div {
|
> div {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|
@ -667,7 +720,436 @@ body{
|
||||||
transition: transform 0.3s ease-out;
|
transition: transform 0.3s ease-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> #content-modale {
|
||||||
|
> div:not(.image-viewer-wrapper, .image-modale) {
|
||||||
|
padding-bottom: 5vh;
|
||||||
|
> .content-wrapper {
|
||||||
|
left: calc(100vw - $modale-width-mobile - $modale-x-padding * 3.5);
|
||||||
|
width: calc($modale-width-mobile);
|
||||||
|
top: 15vh;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
background-color: white;
|
||||||
|
//padding-bottom: $modale-bottom-padding;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
width: $modale-width-desktop;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
> header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto auto auto auto;
|
||||||
|
> .cover {
|
||||||
|
grid-row: 1 / span 1;
|
||||||
|
max-height: 60vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
> .cartouche {
|
||||||
|
grid-row: 4 / span 1;
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
background-color: $brand-color;
|
||||||
|
z-index: 1;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
top: 2rem;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
> p:last-of-type {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .locality-wrapper {
|
||||||
|
position: relative;
|
||||||
|
> .locality {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
> .top-triangle {
|
||||||
|
display: block;
|
||||||
|
width: calc($modale-width-mobile - $modale-x-padding * 3);
|
||||||
|
margin-left: $modale-x-padding * 1.5;
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
|
||||||
|
background-color: white;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
@media screen and (min-width: $tablet-min-width) {
|
||||||
|
width: calc($modale-width-mobile - $modale-x-padding * 6);
|
||||||
|
margin-left: $modale-x-padding * 3;
|
||||||
|
|
||||||
|
}
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
width: calc($modale-width-desktop - $modale-x-padding * 4);
|
||||||
|
margin-left: $modale-x-padding * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .locality-title {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: calc($modale-width-mobile - $modale-x-padding * 3);
|
||||||
|
top: 99px;
|
||||||
|
margin-left: $modale-x-padding * 1.5;
|
||||||
|
min-height: 115px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
@media screen and (min-width: $tablet-min-width) {
|
||||||
|
width: calc($modale-width-mobile - $modale-x-padding * 6);
|
||||||
|
margin-left: $modale-x-padding * 3;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
width: calc($modale-width-desktop - $modale-x-padding * 4);
|
||||||
|
margin-left: $modale-x-padding * 2;
|
||||||
|
}
|
||||||
|
> h1 {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
font-size: $xl-font-size-mobile;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
font-family: 'Joost', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $xl-font-size-desktop;
|
||||||
|
}
|
||||||
|
> em {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brand-pattern {
|
||||||
|
grid-row: 3 / span 1;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: $brand-pattern-height;
|
||||||
|
> .pattern {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
|
||||||
|
background-size: 300px;
|
||||||
|
background-size: repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> main {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 $modale-x-padding;
|
||||||
|
box-sizing: border-box;
|
||||||
|
> .partie {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
> .sensible-map {
|
||||||
|
margin: 0;
|
||||||
|
width: calc(100% + $modale-x-padding);
|
||||||
|
margin-left: calc(($modale-x-padding / 2) * -1);
|
||||||
|
margin-top: calc($modale-x-padding / 2);
|
||||||
|
.vh--message {
|
||||||
|
font-size: $sm-font-size-mobile;
|
||||||
|
top: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
bottom: unset;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
|
color: $main-color-light;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> figcaption {
|
||||||
|
margin-left: calc($modale-x-padding / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .partie-title,
|
||||||
|
> .chiffres-cles,
|
||||||
|
> .entretien {
|
||||||
|
> h3 {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
> p {
|
||||||
|
display: inline;
|
||||||
|
font-size: $l-font-size-mobile;
|
||||||
|
font-family: 'Joost', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $l-font-size-desktop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.personne {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 2rem 0;
|
||||||
|
width: 100%;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
> figure {
|
||||||
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 3rem;
|
||||||
|
> img {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .description {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1rem;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
width: calc(100% - 6rem);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.questions-reponses {
|
||||||
|
margin-top: 3rem;
|
||||||
|
> div {
|
||||||
|
> .question {
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.8rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.8rem;
|
||||||
|
left: 0;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .chiffres-cles {
|
||||||
|
> div {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
align-content: flex-start;
|
||||||
|
margin: 2rem 0;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
> .chiffre {
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-size: $xl-font-size-mobile;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'Joost', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $xl-font-size-desktop;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .chiffre-caption {
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-size: $sm-font-size-mobile;
|
||||||
|
margin: 0;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .diaporama {
|
||||||
|
width: calc(100% + 2 * #{$modale-x-padding});
|
||||||
|
margin-top: 5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
margin-left: -$modale-x-padding;
|
||||||
|
figure {
|
||||||
|
margin: 0 calc(#{$modale-x-padding} / 2);
|
||||||
|
> img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
> figcaption {
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .videos iframe {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.caption {
|
||||||
|
font-size: $sm-font-size-mobile;
|
||||||
|
color: $main-color-light;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
margin-bottom: 1.8rem;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> footer {
|
||||||
|
.pattern-bottom {
|
||||||
|
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||||
|
height: $modale-bottom-padding;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.related-etape-links {
|
||||||
|
position: absolute;
|
||||||
|
//bottom: calc(($modale-bottom-padding / 2) * -1);
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 calc($modale-x-padding / 2);
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
> .card {
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
justify-self: center;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
&.previous {
|
||||||
|
grid-column: 1 / span 1;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
justify-self: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
&.next {
|
||||||
|
//margin-top: 2rem;
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
grid-column: 2 / span 1;
|
||||||
|
margin-top: 0;
|
||||||
|
justify-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .icon {
|
||||||
|
z-index: 2;
|
||||||
|
width: 10px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
> div {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
&:first-of-type, &:last-of-type {
|
||||||
|
height: 8px;
|
||||||
|
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
||||||
|
}
|
||||||
|
&:first-of-type {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .card-content {
|
||||||
|
z-index: 1;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
> .infos {
|
||||||
|
width: 60%;
|
||||||
|
text-align: center;
|
||||||
|
> .titre {
|
||||||
|
padding: 1rem 0.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'Joost', sans-serif;
|
||||||
|
font-size: $m-font-size-mobile;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $m-font-size-desktop;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .date {
|
||||||
|
font-size: $sm-font-size-mobile;
|
||||||
|
font-family: 'Marianne', sans-serif;
|
||||||
|
font-weight: lighter;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
@media screen and (min-width: $desktop-min-width) {
|
||||||
|
font-size: $sm-font-size-desktop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .vignette {
|
||||||
|
width: 40%;
|
||||||
|
position: relative;
|
||||||
|
> img {
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> .user-login-form {
|
> .user-login-form {
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
|
|
@ -681,288 +1163,6 @@ body{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> #content-modale {
|
|
||||||
> div:not(.image-viewer-wrapper, .image-modale) {
|
|
||||||
padding-bottom: 40vh;
|
|
||||||
> .content-wrapper {
|
|
||||||
left: 25vw;
|
|
||||||
width: 50vw;
|
|
||||||
top: 15vh;
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
background-color: white;
|
|
||||||
padding-bottom: $modale-bottom-padding;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
> div {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
> .cover {
|
|
||||||
max-height: 60vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
> .cartouche {
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
background-color: $brand-color;
|
|
||||||
z-index: 1;
|
|
||||||
> p {
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
}
|
|
||||||
> p:last-of-type {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .locality {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
width: 50%;
|
|
||||||
margin-left: 25%;
|
|
||||||
margin-top: -245px;
|
|
||||||
> .top-triangle {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
display: flex;
|
|
||||||
clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
|
|
||||||
background-color: white;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
}
|
|
||||||
> .locality-title {
|
|
||||||
min-height: 115px;
|
|
||||||
display: block;
|
|
||||||
background-color: white;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> h1 {
|
|
||||||
width: 100%;
|
|
||||||
font-size: $xl-font-size;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
font-family: 'Joost', sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
> em {
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> main {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 $modale-x-padding;
|
|
||||||
box-sizing: border-box;
|
|
||||||
> .partie {
|
|
||||||
width: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
> .sensible-map {
|
|
||||||
margin: 0;
|
|
||||||
width: calc(100% + $modale-x-padding);
|
|
||||||
margin-left: calc(($modale-x-padding / 2) * -1);
|
|
||||||
margin-top: calc($modale-x-padding / 2);
|
|
||||||
.vh--message {
|
|
||||||
font-size: $sm-font-size;
|
|
||||||
top: 1rem;
|
|
||||||
left: 1rem;
|
|
||||||
bottom: unset;
|
|
||||||
background-color: rgba(255, 255, 255, 0.6);
|
|
||||||
color: $main-color-light;
|
|
||||||
}
|
|
||||||
> figcaption {
|
|
||||||
margin-left: calc($modale-x-padding / 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .partie-title,
|
|
||||||
> .chiffres-cles,
|
|
||||||
> .entretien {
|
|
||||||
> h3 {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
> p {
|
|
||||||
display: inline;
|
|
||||||
font-size: $l-font-size;
|
|
||||||
font-family: 'Joost', sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .chiffres-cles {
|
|
||||||
> div {
|
|
||||||
display: grid;
|
|
||||||
gap: 2rem;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
align-content: flex-start;
|
|
||||||
margin: 2rem 0;
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
> .chiffre {
|
|
||||||
padding-left: 1rem;
|
|
||||||
font-size: $xl-font-size;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: 'Joost', sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
> p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .chiffre-caption {
|
|
||||||
padding-left: 1rem;
|
|
||||||
font-size: $sm-font-size;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .diaporama {
|
|
||||||
width: calc(100% + 2 * #{$modale-x-padding});
|
|
||||||
margin-top: 5rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
margin-left: -$modale-x-padding;
|
|
||||||
figure {
|
|
||||||
margin: 0 calc(#{$modale-x-padding} / 2);
|
|
||||||
> img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
> figcaption {
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .videos iframe {
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.caption {
|
|
||||||
font-size: $sm-font-size;
|
|
||||||
color: $main-color-light;
|
|
||||||
margin-top: 0.2rem;
|
|
||||||
margin-bottom: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.brand-pattern {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 120px;
|
|
||||||
> .pattern {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
|
|
||||||
background-size: 300px;
|
|
||||||
background-size: repeat;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> footer {
|
|
||||||
.pattern-bottom {
|
|
||||||
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
||||||
height: $modale-bottom-padding;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.related-etape-links {
|
|
||||||
position: absolute;
|
|
||||||
bottom: calc(($modale-bottom-padding / 2) * -1);
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 calc($modale-x-padding / 2);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
> .card {
|
|
||||||
width: 80%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s ease-out;
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
&.next {
|
|
||||||
grid-column: 2 / span 1;
|
|
||||||
justify-self: flex-end;
|
|
||||||
}
|
|
||||||
> .icon {
|
|
||||||
z-index: 2;
|
|
||||||
width: 10px;
|
|
||||||
height: 30px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
> div {
|
|
||||||
display: block;
|
|
||||||
width: 20px;
|
|
||||||
height: 10px;
|
|
||||||
&:first-of-type, &:last-of-type {
|
|
||||||
height: 8px;
|
|
||||||
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
|
||||||
}
|
|
||||||
&:first-of-type {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .card-content {
|
|
||||||
z-index: 1;
|
|
||||||
background-color: white;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
> .infos {
|
|
||||||
width: 60%;
|
|
||||||
text-align: center;
|
|
||||||
> .titre {
|
|
||||||
padding: 1rem 0.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: 'Joost', sans-serif;
|
|
||||||
font-size: $m-font-size;
|
|
||||||
> span {
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .date {
|
|
||||||
font-size: $sm-font-size;
|
|
||||||
font-family: 'Marianne', sans-serif;
|
|
||||||
font-weight: lighter;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .vignette {
|
|
||||||
width: 40%;
|
|
||||||
position: relative;
|
|
||||||
> img {
|
|
||||||
top: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation for a three column layout.
|
||||||
|
*
|
||||||
|
* This template provides a three column 25%-50%-25% display layout, with
|
||||||
|
* additional areas for the top and the bottom.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - in_preview: Whether the plugin is being rendered in preview mode.
|
||||||
|
* - content: The content for this layout.
|
||||||
|
* - attributes: HTML attributes for the layout <div>.
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
{%
|
||||||
|
set classes = [
|
||||||
|
'layout',
|
||||||
|
'layout--threecol-25-50-25',
|
||||||
|
]
|
||||||
|
%}
|
||||||
|
{% if content %}
|
||||||
|
<div{{ attributes.addClass(classes) }}>
|
||||||
|
{% if content.top %}
|
||||||
|
<div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
|
||||||
|
{{ content.top }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if content.first %}
|
||||||
|
<div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
|
||||||
|
{{ content.first }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if content.second %}
|
||||||
|
<div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
|
||||||
|
{{ content.second }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if content.third %}
|
||||||
|
<div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
|
||||||
|
{{ content.third }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if content.bottom %}
|
||||||
|
<div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
|
||||||
|
{{ content.bottom }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div id="content-modale"></div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
@ -78,8 +78,6 @@
|
||||||
{{ page.sidebar_second }}
|
{{ page.sidebar_second }}
|
||||||
</aside>
|
</aside>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div id="content-modale"></div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% if page.footer %}
|
{% if page.footer %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue