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;
|
||||
},
|
||||
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 { useLayoutStore } from './layout';
|
||||
|
||||
export const useMapStore = defineStore('mapState', {
|
||||
state: () => ({
|
||||
|
|
@ -12,6 +13,7 @@ export const useMapStore = defineStore('mapState', {
|
|||
}),
|
||||
actions: {
|
||||
zoomToPlace(lat, long) {
|
||||
if (useLayoutStore().isDesktop) long = long - 0.03;
|
||||
this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
|
||||
this.currentZoom = this.maxZoom;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { setActiveNavItem } from "./set-active-nav-item";
|
||||
import { useLayoutStore } from '../stores/layout';
|
||||
|
||||
export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
|
||||
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;
|
||||
}
|
||||
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');
|
||||
|
||||
if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);
|
||||
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
|
||||
expandEtapeListe(listeEtape, layoutStore);
|
||||
layoutStore.expandEtapeListe(listeEtape, layoutStore);
|
||||
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
|
||||
collapseEtapeListe(listeEtape, layoutStore);
|
||||
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
||||
}
|
||||
});
|
||||
|
||||
listeToggleButton.addEventListener('click', () => {
|
||||
if (!layoutStore.isDesktop) {
|
||||
if (!layoutStore.isEtapeListRetracted) {
|
||||
collapseEtapeListe(listeEtape, layoutStore);
|
||||
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
||||
} 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() {
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import { computed, watch, onMounted } from 'vue';
|
|||
import { storeToRefs } from 'pinia';
|
||||
import { useContentStore } from '../stores/content';
|
||||
import { useMapStore } from '../stores/mapState';
|
||||
import { useLayoutStore } from '../stores/layout';
|
||||
|
||||
import ModaleHeader from './components/ModaleHeader.vue';
|
||||
import ModaleFooter from './components/ModaleFooter.vue';
|
||||
|
|
@ -66,6 +67,12 @@ import ModaleVideos from './components/parties/ModaleVideos.vue';
|
|||
|
||||
const store = useContentStore();
|
||||
const mapState = useMapStore();
|
||||
const layoutStore = useLayoutStore();
|
||||
|
||||
// pour importer le breakpoint
|
||||
// const { minDesktopWidth } = storeToRefs(layoutStore);
|
||||
// console.log(minDesktopWidth);
|
||||
|
||||
|
||||
const {
|
||||
contentType,
|
||||
|
|
|
|||
|
|
@ -7,13 +7,15 @@
|
|||
<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>
|
||||
</div>
|
||||
<div class="brand-pattern" :style="{ backgroundColor: couleur }">
|
||||
<div class="pattern"></div>
|
||||
</div>
|
||||
<div class="locality">
|
||||
<div class="top-triangle"></div>
|
||||
<div class="locality-title">
|
||||
<h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
|
||||
<div class="locality-wrapper">
|
||||
<div class="brand-pattern" :style="{ backgroundColor: couleur }">
|
||||
<div class="pattern"></div>
|
||||
</div>
|
||||
<div class="locality">
|
||||
<div class="top-triangle"></div>
|
||||
<div class="locality-title">
|
||||
<h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -29,57 +29,15 @@ const props = defineProps({
|
|||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
background-color: var(--couleur);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@import 'fonts.scss';
|
||||
|
||||
$desktop-min-width: 992px;
|
||||
$tablet-min-width: 467px;
|
||||
|
||||
$body-margin-x: 30px;
|
||||
$body-margin-y: 5px;
|
||||
|
|
@ -9,10 +10,23 @@ $body-margin-bottom: 4vh;
|
|||
$modale-x-padding: 5vw;
|
||||
$modale-bottom-padding: 180px;
|
||||
|
||||
$sm-font-size: 0.8rem;
|
||||
$m-font-size: 1.4rem;
|
||||
$l-font-size: 1.8rem;
|
||||
$xl-font-size: 2.4rem;
|
||||
$modale-width-mobile: 80vw;
|
||||
$modale-width-desktop: 50vw;
|
||||
|
||||
$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-light: #635b58;
|
||||
|
|
@ -36,7 +50,7 @@ body{
|
|||
.layout-container {
|
||||
> header {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
> div {
|
||||
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
|
||||
display: grid;
|
||||
|
|
@ -112,9 +126,12 @@ body{
|
|||
padding-left: $menu-margin;
|
||||
margin: 10px 0;
|
||||
color: white;
|
||||
font-size: $l-font-size;
|
||||
font-size: $l-font-size-mobile;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-weight: bold;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $l-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> #menu-title.open {
|
||||
|
|
@ -130,10 +147,13 @@ body{
|
|||
> h2 {
|
||||
z-index: 2;
|
||||
margin-block: 0;
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
color: $main-color-light;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> h2 {
|
||||
display: none;
|
||||
|
|
@ -199,7 +219,9 @@ body{
|
|||
opacity: 0;
|
||||
transition: top 0.3s ease-out, opacity 0.2s ease-out;
|
||||
z-index: 1;
|
||||
font-size: $m-font-size-mobile;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
width: $menu-desktop-width;
|
||||
}
|
||||
> li {
|
||||
|
|
@ -244,7 +266,6 @@ body{
|
|||
height: 100vh;
|
||||
> .layout-content {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -268,7 +289,7 @@ body{
|
|||
}
|
||||
}
|
||||
> .layout__region--second {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
|
|
@ -286,11 +307,14 @@ body{
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
font-family: 'marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> a:first-of-type {
|
||||
border-top-left-radius: 2vh;
|
||||
|
|
@ -359,7 +383,7 @@ body{
|
|||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -369,6 +393,9 @@ body{
|
|||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
text-wrap: wrap;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> a {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
|
@ -386,9 +413,12 @@ body{
|
|||
text-align: center;
|
||||
padding: 10px 0;
|
||||
> time {
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
|
|
@ -440,7 +470,7 @@ body{
|
|||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -449,6 +479,9 @@ body{
|
|||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
text-wrap: wrap;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
|
@ -462,9 +495,12 @@ body{
|
|||
text-align: center;
|
||||
padding: 10px 0;
|
||||
> time {
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> a {
|
||||
|
|
@ -496,11 +532,12 @@ body{
|
|||
}*/
|
||||
}
|
||||
> .layout__region--third {
|
||||
padding-right: $body-margin-x;
|
||||
height: 100%;
|
||||
padding-right: $body-margin-x;
|
||||
grid-column: 4 / span 13;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
background: linear-gradient(to right, #faf1ebaa, #faf1eb);
|
||||
align-items: center;
|
||||
|
|
@ -523,10 +560,14 @@ body{
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-out;
|
||||
display: block;
|
||||
transition: all 0.3s ease-out;
|
||||
&.retracted {
|
||||
opacity: 0;
|
||||
}
|
||||
&.disapeared {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
|
|
@ -559,9 +600,12 @@ body{
|
|||
color: $main-color;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .views-field-field-adresse-postal-code {
|
||||
|
|
@ -570,8 +614,11 @@ body{
|
|||
color: $main-color;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
align-self: end;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> span {
|
||||
> p::before {
|
||||
content: '(';
|
||||
|
|
@ -585,11 +632,14 @@ body{
|
|||
> .views-field-field-dates {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2 / span 1;
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
text-align: right;
|
||||
margin-top: 7px;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> .views-field-field-couleur {
|
||||
display: none;
|
||||
|
|
@ -655,7 +705,10 @@ body{
|
|||
border-radius: 1.3rem;
|
||||
margin: 0;
|
||||
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 {
|
||||
width: 20px;
|
||||
|
|
@ -667,7 +720,436 @@ body{
|
|||
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 {
|
||||
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 }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
<div id="content-modale"></div>
|
||||
</main>
|
||||
|
||||
{% if page.footer %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue