modifs pas finies de la carte interactive + clean des scss
This commit is contained in:
Valentin
parent
c56dadee02
commit
e6d39d0dc3
|
|
@ -1,98 +1,30 @@
|
|||
@font-face {
|
||||
font-family: 'gilroy-semibold';
|
||||
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
|
||||
}
|
||||
#sites-map-container {
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
width: 100%; /* Prend toute la largeur du conteneur parent */
|
||||
max-width: 800px; /* Optionnel : Limiter la largeur maximale */
|
||||
margin: 0 auto; /* Centrer le conteneur */
|
||||
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
|
||||
@media (max-width: 810px) {
|
||||
width: 80%; /* Prend toute la largeur du conteneur parent */
|
||||
}
|
||||
@media (max-width: 530px) {
|
||||
width: 100%; /* Prend toute la largeur du conteneur parent */
|
||||
height: 485px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
width: 100%; /* Prend toute la largeur du conteneur parent */
|
||||
height: 430px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Changer la couleur au survol (hover) */
|
||||
#sites-map-container .site-link:hover{
|
||||
cursor: pointer;
|
||||
#map_base {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#projects_icons {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Styles du popup (caché par défaut) */
|
||||
#sites-map-container #popup {
|
||||
font-family: 'gilroy-light';
|
||||
#popup {
|
||||
background-color: white;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
text-align: left;
|
||||
padding-left: 1rem;
|
||||
pointer-events: none;
|
||||
@media (max-width: 1090px) {
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
|
||||
@media (min-width: 1090px) {
|
||||
#sites-map-container #popup {
|
||||
top: 50%; /* Centrer verticalement */
|
||||
left: 80%; /* Placer le popup à droite de la carte */
|
||||
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sites-map-container strong{
|
||||
color: #f7002b;
|
||||
font-family: 'gilroy-bold';
|
||||
}
|
||||
#sites-map-container a{
|
||||
display: none;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
padding-left: 0.5rem;
|
||||
text-decoration: none;
|
||||
margin-top: 0.7rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
#sites-map-container a:after{
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
|
||||
}
|
||||
|
||||
#popup-content{
|
||||
width: 300px;
|
||||
padding-right: 30px;
|
||||
|
||||
p{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
@media (max-width : 810px) {
|
||||
width: 300px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
#popup h3,
|
||||
#popup p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
#sites-map-container {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
width: 100%; /* Prend toute la largeur du conteneur parent */
|
||||
max-width: 800px; /* Optionnel : Limiter la largeur maximale */
|
||||
margin: 0 auto; /* Centrer le conteneur */
|
||||
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
|
||||
@media (max-width: 810px) {
|
||||
width: 80%; /* Prend toute la largeur du conteneur parent */
|
||||
}
|
||||
@media (max-width: 530px) {
|
||||
width: 100%; /* Prend toute la largeur du conteneur parent */
|
||||
height: 485px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
width: 100%; /* Prend toute la largeur du conteneur parent */
|
||||
height: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Changer la couleur au survol (hover) */
|
||||
#sites-map-container .site-link:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Styles du popup (caché par défaut) */
|
||||
#sites-map-container #popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
text-align: left;
|
||||
padding-left: 1rem;
|
||||
pointer-events: none;
|
||||
@media (max-width: 1090px) {
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
|
||||
@media (min-width: 1090px) {
|
||||
#sites-map-container #popup {
|
||||
top: 50%; /* Centrer verticalement */
|
||||
left: 80%; /* Placer le popup à droite de la carte */
|
||||
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sites-map-container strong{
|
||||
color: #f7002b;
|
||||
}
|
||||
#sites-map-container a{
|
||||
display: none;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
padding-left: 0.5rem;
|
||||
text-decoration: none;
|
||||
margin-top: 0.7rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
#sites-map-container a:after{
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
|
||||
}
|
||||
|
||||
#popup-content{
|
||||
width: 300px;
|
||||
padding-right: 30px;
|
||||
|
||||
p{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
@media (max-width : 810px) {
|
||||
width: 300px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,116 +1,243 @@
|
|||
// // Sélection des éléments principaux
|
||||
const svgElement = document.querySelector('#sites-map-container svg');
|
||||
const popup = document.querySelector('#sites-map-container #popup');
|
||||
const popupContent = document.querySelector('#sites-map-container #popup-content');
|
||||
const modalBackground = document.querySelector('#sites-map-container #modal-background');
|
||||
const franceCoordinates = {
|
||||
metropole: {
|
||||
latTop: 52.0, // Nord-Ouest (coin supérieur gauche)
|
||||
lonLeft: -5,
|
||||
latBottom: 40.0, // Sud-Est (coin inférieur droit)
|
||||
lonRight: 11.0,
|
||||
},
|
||||
guadeloupe: {
|
||||
latTop: 16.5,
|
||||
lonLeft: -62,
|
||||
latBottom: 15.8,
|
||||
lonRight: -60.8,
|
||||
},
|
||||
martinique: {
|
||||
latTop: 14.9,
|
||||
lonLeft: -61.3,
|
||||
latBottom: 14.3,
|
||||
lonRight: -60.7,
|
||||
},
|
||||
guyanne: {
|
||||
latTop: 6,
|
||||
lonLeft: -54.8,
|
||||
latBottom: 1.8,
|
||||
lonRight: -51.2,
|
||||
},
|
||||
reunion: {
|
||||
latTop: -20.8,
|
||||
lonLeft: 55.1,
|
||||
latBottom: -21.4,
|
||||
lonRight: 55.9,
|
||||
},
|
||||
saintPierreEtMiquelon: {
|
||||
latTop: 47.1,
|
||||
lonLeft: -56.4,
|
||||
latBottom: 46.7,
|
||||
lonRight: -56.1,
|
||||
},
|
||||
mayotte: {
|
||||
latTop: -12.6,
|
||||
lonLeft: 44.9,
|
||||
latBottom: -13,
|
||||
lonRight: 45.3,
|
||||
},
|
||||
saintBarthelemy: {
|
||||
latTop: 17.9,
|
||||
lonLeft: -62.9,
|
||||
latBottom: 17.8,
|
||||
lonRight: -62.7,
|
||||
},
|
||||
saintMartin: {
|
||||
latTop: 18.1,
|
||||
lonLeft: -63.1,
|
||||
latBottom: 17.9,
|
||||
lonRight: -62.9,
|
||||
},
|
||||
wallisEtFutuna: {
|
||||
latTop: -13.1,
|
||||
lonLeft: -176.2,
|
||||
latBottom: -13.3,
|
||||
lonRight: -176.1,
|
||||
},
|
||||
polynesieFrancaise: {
|
||||
latTop: -17.4,
|
||||
lonLeft: -149.9,
|
||||
latBottom: -17.1,
|
||||
lonRight: -149,
|
||||
},
|
||||
nouvelleCaledonie: {
|
||||
latTop: -19.3,
|
||||
lonLeft: 163.3,
|
||||
latBottom: -22.9,
|
||||
lonRight: 168.4,
|
||||
},
|
||||
};
|
||||
|
||||
// Vérifiez si la page contient la classe '.node-type-site'
|
||||
const isSitePage = document.body.classList.contains('node-type-site');
|
||||
const localisationMapPlacements = {
|
||||
// en pourcentage de la largeur et hauteur du fond de carte
|
||||
metropole: {
|
||||
top: 0,
|
||||
left: 12.9,
|
||||
bottom: 63.48,
|
||||
right: 87.14,
|
||||
},
|
||||
guadeloupe: {
|
||||
top: 88.44,
|
||||
left: 33.01,
|
||||
bottom: 98.77,
|
||||
right: 46.25,
|
||||
},
|
||||
martinique: {
|
||||
top: 88.96,
|
||||
left: 53.26,
|
||||
bottom: 98.24,
|
||||
right: 61.99,
|
||||
},
|
||||
guyanne: {
|
||||
top: 88.09,
|
||||
left: 69.09,
|
||||
bottom: 99.21,
|
||||
right: 79.07,
|
||||
},
|
||||
reunion: {
|
||||
top: 75.48,
|
||||
left: 89.82,
|
||||
bottom: 82.04,
|
||||
right: 97.88,
|
||||
},
|
||||
saintPierreEtMiquelon: {
|
||||
top: 75.03,
|
||||
left: 12.85,
|
||||
bottom: 81.61,
|
||||
right: 17.85,
|
||||
},
|
||||
mayotte: {
|
||||
top: 88.61,
|
||||
left: 17.08,
|
||||
bottom: 98.68,
|
||||
right: 26.19,
|
||||
},
|
||||
saintBarthelemy: {
|
||||
top: 74.95,
|
||||
left: 44.81,
|
||||
bottom: 82.74,
|
||||
right: 57.58,
|
||||
},
|
||||
saintMartin: {
|
||||
top: 74.78,
|
||||
left: 23.12,
|
||||
bottom: 82.92,
|
||||
right: 36.08,
|
||||
},
|
||||
wallisEtFutuna: {
|
||||
top: 74.95,
|
||||
left: 0,
|
||||
bottom: 79.50,
|
||||
right: 7.58,
|
||||
},
|
||||
polynesieFrancaise: {
|
||||
top: 90.19,
|
||||
left: 85.12,
|
||||
bottom: 97.02,
|
||||
right: 100,
|
||||
},
|
||||
nouvelleCaledonie: {
|
||||
top: 73.73,
|
||||
left: 66.21,
|
||||
bottom: 83.80,
|
||||
right: 81.09,
|
||||
},
|
||||
};
|
||||
|
||||
const projectsIcons = document.querySelectorAll('#projects_icons > svg');
|
||||
for (let icon of projectsIcons) {
|
||||
icon.addEventListener('mouseenter', function() {
|
||||
console.log("mouse over");
|
||||
displayPopup(icon);
|
||||
});
|
||||
icon.addEventListener('mouseleave', function() {
|
||||
console.log("mouse out");
|
||||
|
||||
// Fonction pour afficher le popup
|
||||
function showPopup(content, x, y, isLeftHalf) {
|
||||
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
|
||||
if (isSitePage) return;
|
||||
|
||||
popupContent.innerHTML = content;
|
||||
|
||||
|
||||
// Afficher le popup et le fond de modal
|
||||
popup.style.display = 'block';
|
||||
modalBackground.style.display = 'block';
|
||||
|
||||
hidePopup();
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour fermer le popup
|
||||
function closePopup() {
|
||||
function placeProjectsIcons(projectsIcons) {
|
||||
const container = document.querySelector('#map_base');
|
||||
const containerWidth = container.getBoundingClientRect().width;
|
||||
const containerHeight = container.getBoundingClientRect().height;
|
||||
|
||||
projectsIcons.forEach(icon => {
|
||||
const iconWidth = icon.getBoundingClientRect().width;
|
||||
const lat = parseFloat(icon.dataset.geofieldlat);
|
||||
const lon = parseFloat(icon.dataset.geofieldlon);
|
||||
|
||||
const territory = findTerritory(lat, lon);
|
||||
|
||||
if (territory && localisationMapPlacements[territory]) {
|
||||
const territoryBounds = localisationMapPlacements[territory];
|
||||
const territoryCoords = franceCoordinates[territory];
|
||||
|
||||
const xPercentage = ((lon - territoryCoords.lonLeft) / (territoryCoords.lonRight - territoryCoords.lonLeft)) * 100;
|
||||
const yPercentage = ((territoryCoords.latTop - lat) / (territoryCoords.latTop - territoryCoords.latBottom)) * 100;
|
||||
|
||||
const finalX = containerWidth * (territoryBounds.left / 100 + (xPercentage / 100) * (territoryBounds.right - territoryBounds.left) / 100) - iconWidth / 2;
|
||||
const finalY = containerHeight * (territoryBounds.top / 100 + (yPercentage / 100) * (territoryBounds.bottom - territoryBounds.top) / 100) - iconWidth / 2;
|
||||
|
||||
icon.setAttribute('transform', `translate(${finalX}, ${finalY})`);
|
||||
} else {
|
||||
console.warn(`Territory not found for lat: ${lat}, lon: ${lon}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function findTerritory(lat, lon) {
|
||||
for (const [territory, coords] of Object.entries(franceCoordinates)) {
|
||||
if (
|
||||
lat <= Math.max(coords.latTop, coords.latBottom) &&
|
||||
lat >= Math.min(coords.latTop, coords.latBottom) &&
|
||||
lon >= Math.min(coords.lonLeft, coords.lonRight) &&
|
||||
lon <= Math.max(coords.lonLeft, coords.lonRight)
|
||||
) {
|
||||
return territory;
|
||||
}
|
||||
}
|
||||
return "Unknown territory";
|
||||
}
|
||||
|
||||
function displayPopup(icon) {
|
||||
const container = document.querySelector('#sites-map-container');
|
||||
|
||||
const x = icon.getBoundingClientRect().left - container.getBoundingClientRect().left;
|
||||
const y = icon.getBoundingClientRect().top - container.getBoundingClientRect().top;
|
||||
|
||||
const popup = document.querySelector('#sites-map-container #popup');
|
||||
|
||||
popup.querySelector('h3').innerText = icon.dataset.title;
|
||||
popup.querySelector('p').innerText = icon.dataset.place;
|
||||
|
||||
|
||||
popup.style.top = 0;
|
||||
popup.style.left = 0;
|
||||
|
||||
popup.style.display = 'block';
|
||||
|
||||
popup.style.left = `${x - popup.getBoundingClientRect().width / 2 + icon.getBoundingClientRect().width / 2}px`;
|
||||
popup.style.top = `${y - popup.getBoundingClientRect().height - icon.getBoundingClientRect().height}px`;
|
||||
setTimeout(() => {
|
||||
popup.style.opacity = 1;
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function hidePopup(){
|
||||
const popup = document.querySelector('#sites-map-container #popup');
|
||||
|
||||
popup.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
popup.style.display = 'none';
|
||||
modalBackground.style.display = 'none'; // Désactiver le fond modal
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Gérer le survol des cercles (au lieu du clic)
|
||||
svgElement.addEventListener('mouseover', function(event) {
|
||||
if (event.target.classList.contains('site-link')) {
|
||||
const content = event.target.getAttribute('data-content');
|
||||
|
||||
// Afficher le popup avec la position et l'alignement adaptés
|
||||
showPopup(content);
|
||||
}
|
||||
|
||||
// Gestion du changement de couleur sur le cercle
|
||||
if (event.target.tagName === 'circle') {
|
||||
event.target.setAttribute('fill', 'red');
|
||||
}
|
||||
});
|
||||
|
||||
// Fermer le popup lorsque la souris quitte le cercle
|
||||
svgElement.addEventListener('mouseout', function(event) {
|
||||
if (event.target.classList.contains('site-link')) {
|
||||
closePopup();
|
||||
}
|
||||
|
||||
// Réinitialiser la couleur du cercle au survol de la souris
|
||||
if (event.target.tagName === 'circle') {
|
||||
event.target.setAttribute('fill', 'black'); // Remettre en noir
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Mettre à jour la logique de calcul des positions
|
||||
function recalculateSitePositions() {
|
||||
const allSites = document.querySelectorAll('.site-link');
|
||||
|
||||
allSites.forEach((site, index) => {
|
||||
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
|
||||
const lon = parseFloat(geofield.split(',')[0]);
|
||||
const lat = parseFloat(geofield.split(',')[1]);
|
||||
|
||||
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
|
||||
const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
|
||||
|
||||
site.setAttribute('transform', `translate(${x}, ${y})`);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
recalculateSitePositions();
|
||||
if (popup.style.display === 'block') {
|
||||
const currentPopupRect = popup.getBoundingClientRect();
|
||||
const rect = svgElement.getBoundingClientRect();
|
||||
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
|
||||
}
|
||||
});
|
||||
|
||||
// Gérer le clic ou le toucher des cercles
|
||||
function handleCircleClick(content) {
|
||||
showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
|
||||
}
|
||||
|
||||
// Écouter les événements de clic et de toucher sur le SVG
|
||||
svgElement.addEventListener('click', function(event) {
|
||||
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
|
||||
const content = event.target.getAttribute('data-content');
|
||||
handleCircleClick(content);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
///////////////////// page site point rouge quand sur page ///////////////////////
|
||||
|
||||
// Récupérer l'ID de la page depuis la classe du body
|
||||
const body = document.querySelector('body');
|
||||
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
|
||||
|
||||
// Sélectionner le groupe SVG qui a l'ID correspondant
|
||||
const matchingGroup = document.querySelector(`#site-${pageId}`);
|
||||
|
||||
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
|
||||
if (matchingGroup) {
|
||||
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
|
||||
if (circle) {
|
||||
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
placeProjectsIcons(projectsIcons);
|
||||
|
||||
window.addEventListener('resize', placeProjectsIcons(projectsIcons));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
// // Sélection des éléments principaux
|
||||
const svgElement = document.querySelector('#sites-map-container svg');
|
||||
const popup = document.querySelector('#sites-map-container #popup');
|
||||
const popupContent = document.querySelector('#sites-map-container #popup-content');
|
||||
const modalBackground = document.querySelector('#sites-map-container #modal-background');
|
||||
|
||||
// Vérifiez si la page contient la classe '.node-type-site'
|
||||
const isSitePage = document.body.classList.contains('node-type-site');
|
||||
console.log(isSitePage);
|
||||
|
||||
|
||||
|
||||
// Fonction pour afficher le popup
|
||||
function showPopup(content, x, y, isLeftHalf) {
|
||||
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
|
||||
if (isSitePage) return;
|
||||
|
||||
popupContent.innerHTML = content;
|
||||
|
||||
|
||||
// Afficher le popup et le fond de modal
|
||||
popup.style.display = 'block';
|
||||
modalBackground.style.display = 'block';
|
||||
|
||||
}
|
||||
|
||||
// Fonction pour fermer le popup
|
||||
function closePopup() {
|
||||
popup.style.display = 'none';
|
||||
modalBackground.style.display = 'none'; // Désactiver le fond modal
|
||||
}
|
||||
|
||||
// Gérer le survol des cercles (au lieu du clic)
|
||||
svgElement.addEventListener('mouseover', function(event) {
|
||||
if (event.target.classList.contains('site-link')) {
|
||||
const content = event.target.getAttribute('data-content');
|
||||
|
||||
// Afficher le popup avec la position et l'alignement adaptés
|
||||
showPopup(content);
|
||||
}
|
||||
|
||||
// Gestion du changement de couleur sur le cercle
|
||||
if (event.target.tagName === 'circle') {
|
||||
event.target.setAttribute('fill', 'red');
|
||||
}
|
||||
});
|
||||
|
||||
// Fermer le popup lorsque la souris quitte le cercle
|
||||
svgElement.addEventListener('mouseout', function(event) {
|
||||
if (event.target.classList.contains('site-link')) {
|
||||
closePopup();
|
||||
}
|
||||
|
||||
// Réinitialiser la couleur du cercle au survol de la souris
|
||||
if (event.target.tagName === 'circle') {
|
||||
event.target.setAttribute('fill', 'black'); // Remettre en noir
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Mettre à jour la logique de calcul des positions
|
||||
function recalculateSitePositions() {
|
||||
const allSites = document.querySelectorAll('.site-link');
|
||||
|
||||
allSites.forEach((site, index) => {
|
||||
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
|
||||
const lon = parseFloat(geofield.split(',')[0]);
|
||||
const lat = parseFloat(geofield.split(',')[1]);
|
||||
|
||||
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
|
||||
const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
|
||||
|
||||
site.setAttribute('transform', `translate(${x}, ${y})`);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
recalculateSitePositions();
|
||||
if (popup.style.display === 'block') {
|
||||
const currentPopupRect = popup.getBoundingClientRect();
|
||||
const rect = svgElement.getBoundingClientRect();
|
||||
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
|
||||
}
|
||||
});
|
||||
|
||||
// Gérer le clic ou le toucher des cercles
|
||||
function handleCircleClick(content) {
|
||||
showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
|
||||
}
|
||||
|
||||
// Écouter les événements de clic et de toucher sur le SVG
|
||||
svgElement.addEventListener('click', function(event) {
|
||||
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
|
||||
const content = event.target.getAttribute('data-content');
|
||||
handleCircleClick(content);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
///////////////////// page site point rouge quand sur page ///////////////////////
|
||||
|
||||
// Récupérer l'ID de la page depuis la classe du body
|
||||
const body = document.querySelector('body');
|
||||
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
|
||||
|
||||
// Sélectionner le groupe SVG qui a l'ID correspondant
|
||||
const matchingGroup = document.querySelector(`#site-${pageId}`);
|
||||
|
||||
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
|
||||
if (matchingGroup) {
|
||||
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
|
||||
if (circle) {
|
||||
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 80 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="2933 3781 107.091 110.044"
|
||||
fill="none"
|
||||
id="projet-$index"
|
||||
data-geofieldlon="$lon"
|
||||
data-geofieldlat="$lat"
|
||||
data-title="$title"
|
||||
data-place="$place"
|
||||
>
|
||||
<a href="$href">
|
||||
<path
|
||||
d="M2948.852 3798.42c-3.606 3.667-2.847 11.102-1.479 17.824 1.619 7.951 5.315 16.118 12.339 24.491 3.456 4.205 9.513 6.379 14.08 9.238-10.249-1.658-21.843 3.107-29.852 9.438-5.7 4.488-11.197 10.188-10.931 15.125.261 4.757 5.974 8.041 11.591 10.646 7.669 3.555 17.089 5.343 29.989 3.293 18.866-3.004 36.608-14.662 40.31-24.59 0 0 16.971 18.409 13.637 26.71 1.459.976 4.253.403 4.516-2.138.92-8.85-15.986-26.562-15.986-26.562 10.111-3.235 19.484-19.744 22.323-39.307 2.031-14.005-.579-24.218-4.883-31.774-2.606-4.576-5.279-9.628-9.507-9.809-4.109-.171-9.189 4.422-13.021 8.545-5.631 6.058-10.313 13.829-12.151 25.629-.431 2.766-.094 7.971-.201 8.514-1.077-3.802-.253-6.156-5.417-12.196-9.426-8.649-18.53-12.964-27.384-14.735-6.814-1.364-14.321-2.055-17.973 1.658Z"
|
||||
style="
|
||||
cursor: pointer;
|
||||
fill-rule: evenodd;
|
||||
stroke: none;
|
||||
fill: rgb(3, 135, 136);
|
||||
fill-opacity: 1;
|
||||
"
|
||||
class="fills"/>
|
||||
</a>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -16,7 +16,7 @@ use Drupal\Core\Render\Markup;
|
|||
* )
|
||||
*/
|
||||
class SitesMap extends BlockBase {
|
||||
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
|
|
@ -25,67 +25,33 @@ class SitesMap extends BlockBase {
|
|||
|
||||
$allSites = \Drupal::entityTypeManager()->getStorage('node')
|
||||
->loadByProperties(['type' => 'projet', 'status' => 1]);
|
||||
|
||||
|
||||
$sites_paths = "";
|
||||
|
||||
$vp_w = 600;
|
||||
$vp_h = 600;
|
||||
|
||||
// Coordonnées géographiques des coins de la carte (France)
|
||||
$latTop = 52.0; // Nord-Ouest (coin supérieur gauche)
|
||||
$lonLeft = -6.0;
|
||||
$latBottom = 40.0; // Sud-Est (coin inférieur droit)
|
||||
$lonRight = 11.0;
|
||||
|
||||
|
||||
foreach($allSites as $index => $site){
|
||||
$title = $site->get('title')->getString();
|
||||
$subtitle = $site->get('field_sous_titre')->getString();
|
||||
$place = $site->get('field_localisation_textuel')->getString();
|
||||
|
||||
$link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']];
|
||||
$site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options);
|
||||
$link = $site_link_object->toString()->getGeneratedLink();
|
||||
// $link = $site_link_object->toString()->getGeneratedLink();
|
||||
$href = $site_link_object->getUrl()->toString();
|
||||
|
||||
$datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
|
||||
// $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
|
||||
|
||||
$geofield = $site->get('field_carte')->get(0);
|
||||
$lon = $geofield->lon;
|
||||
$lat = $geofield->lat;
|
||||
$geofieldData = "$lon,$lat"; // Utiliser une chaîne pour stocker la position
|
||||
|
||||
$x = round(($lon - $lonLeft) / ($lonRight - $lonLeft) * $vp_w);
|
||||
$y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
|
||||
|
||||
$r = 10;
|
||||
$m = -$r+4;
|
||||
$l = $r*2-7;
|
||||
$sites_paths .= <<<SVGSITEPATH
|
||||
<g
|
||||
id="projet-$index"
|
||||
data-geofield="$geofieldData"
|
||||
transform="translate($x,$y)"
|
||||
style="cursor: pointer;" <!-- Change le curseur pour indiquer l'interaction -->
|
||||
>
|
||||
<rect width="10" height="10" transform="translate($x,$y)" fill="none" onclick="handleCircleClick('$datacontent')"></rect> <!-- Zone d'interaction invisible -->
|
||||
|
||||
<circle
|
||||
class="site-link"
|
||||
data-content="$datacontent"
|
||||
cx="0" cy="0" r="$r"
|
||||
style="fill-opacity:1;fill-rule:nonzero;" />
|
||||
<path
|
||||
id="path84"
|
||||
d="m 0,$m v $l"
|
||||
style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
id="path85"
|
||||
d="m $m,0 h $l"
|
||||
style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
||||
|
||||
</g>
|
||||
SVGSITEPATH;
|
||||
$svg_template_path = DRUPAL_ROOT . '/modules/custom/erable_mod/assets/svg/feuille.svg';
|
||||
$svg_template= file_get_contents($svg_template_path);
|
||||
$sites_paths .= str_replace(
|
||||
['$index', '$lon', '$lat', '$href', '$title', '$place'],
|
||||
[$index, $lon, $lat, $href, $title, $place],
|
||||
$svg_template
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
$return = [
|
||||
'#cache' => [
|
||||
|
|
@ -94,8 +60,6 @@ class SitesMap extends BlockBase {
|
|||
'svg_mapsites' => [
|
||||
'#theme' => 'svg_mapsites',
|
||||
'#sites' => $sites_paths,
|
||||
'#vpw' => $vp_w,
|
||||
'#vph' => $vp_h,
|
||||
'#attached' => [
|
||||
'library' => [
|
||||
'erable_mod/sites_map_block',
|
||||
|
|
@ -112,4 +76,4 @@ class SitesMap extends BlockBase {
|
|||
public function getCacheMaxAge() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,51 +2,13 @@
|
|||
{# <svg {{ svg_attributes }}>
|
||||
<path {{ path_attributes }}></path>
|
||||
</svg> #}
|
||||
<svg
|
||||
width="100%"
|
||||
height="auto"
|
||||
viewBox="0 0 {{ vpw }} {{ vph }}"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<img id="map_base" src="/modules/custom/erable_mod/assets/svg/carte.svg" alt="fond de carte des territoires Français métropolitains et ultramarins">
|
||||
<div id="projects_icons">
|
||||
{{ sites|raw }}
|
||||
</div>
|
||||
|
||||
<g
|
||||
id="layer1"
|
||||
width="auto"
|
||||
height="100%"
|
||||
transform="
|
||||
translate(-34,-43)
|
||||
scale(3 3)"
|
||||
>
|
||||
<g
|
||||
id="g87"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,-117.12499,-462.76799)"
|
||||
>
|
||||
<path
|
||||
d="M 22.94948,0 24.34889,-18.0149 0,-25.72302 5.65439,-72.56693 20.36713,-85.65977 31.67962,-51.59929 30.80613,-4.91625 Z"
|
||||
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1086.6494,2370.4282)"
|
||||
id="path86" />
|
||||
<path
|
||||
d="M 213.91022,-8.56159 245.88833,0 c 0,0 58.73522,-78.05274 188.63529,-102.77609 0,0 -13.72994,-23.9062 -20.7684,-68.77233 l -46.76509,-59.13289 22.59883,4.10628 9.98215,-59.15478 -15.22238,-6.69194 c 0,0 21.10627,-42.02694 33.11738,-51.15904 l -49.61728,-51.89156 c 0,0 -54.37257,40.3184 -83.08495,23.05862 -26.13166,-16.38332 -20.26669,-47.73592 -20.26669,-47.73592 l -84.48157,7.5286 -73.42912,23.87167 c 0,0 13.68285,68.86637 13.5616,120.85908 l 13.70164,-16.03089 -8.31311,25.90453 c -7.71795,24.04996 -30.44003,42.76792 -30.59939,44.58536 -3.6948,42.13802 -38.37183,51.8082 -82.82932,56.0101 L 0,-120.94655 l 48.38804,11.38921 63.90371,-13.15789 c 0,0 -1.62874,19.5427 -17.78042,51.54499 l 20.25382,7.61331 c 0,0 16.51357,-27.83033 25.80184,-26.51089 4.8781,0.69253 23.95695,21.70897 32.12568,26.76126 7.32295,4.5292 35.79484,10.58956 36.55389,13.534 2.94469,10.87069 4.66366,41.21097 4.66366,41.21097 z"
|
||||
style="fill:#11ff77;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
|
||||
id="path87" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="layer2">
|
||||
{{ sites|raw }}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Fond du modal -->
|
||||
<div id="modal-background" class="modal-background"></div>
|
||||
|
||||
<!-- Popup -->
|
||||
<div id="popup" class="popup">
|
||||
<p id="popup-content">Hello! I am a popup!</p>
|
||||
<!--<button onclick="closePopup()">Close</button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div id="popup">
|
||||
<h3>Titre</h3>
|
||||
<p>Localisation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,10 +58,6 @@ a {
|
|||
margin-top: calc(10vh + 3rem);
|
||||
}
|
||||
} */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -78,6 +74,9 @@ em {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* * {
|
||||
border: solid 1px red !important;
|
||||
} */
|
||||
/* PARTIALS */
|
||||
body.toolbar-tray-open header[role=banner] {
|
||||
left: 15rem !important;
|
||||
|
|
@ -352,7 +351,7 @@ body.toolbar-fixed header[role=banner] {
|
|||
}
|
||||
.layout-container #block-erabletheme-navigationprincipale {
|
||||
background: linear-gradient(to bottom, white, transparent);
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-top: 1rem;
|
||||
|
|
@ -423,10 +422,9 @@ body.toolbar-fixed header[role=banner] {
|
|||
}
|
||||
|
||||
.layout-container > footer {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
z-index: 99;
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
|
||||
margin-top: 50px;
|
||||
padding: 0 3vw;
|
||||
}
|
||||
|
|
@ -524,11 +522,13 @@ body.toolbar-fixed header[role=banner] {
|
|||
.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext {
|
||||
display: none;
|
||||
}
|
||||
.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li:last-of-type {
|
||||
margin-left: 25px;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.layout-container > footer #footer_middle #footer_section #footer_right {
|
||||
width: 25vw;
|
||||
padding-left: 15vw;
|
||||
padding-right: 3vw;
|
||||
width: auto;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
|
|
@ -542,54 +542,60 @@ body.toolbar-fixed header[role=banner] {
|
|||
}
|
||||
}
|
||||
|
||||
.slick-container {
|
||||
@media screen and (min-width: 760px) {
|
||||
.carousel_container {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
.carousel_container .slick-container {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
@media screen and (min-width: 760px) {
|
||||
.slick-container {
|
||||
.carousel_container .slick-container {
|
||||
width: 200vw;
|
||||
transform: translateX(-50vw);
|
||||
}
|
||||
}
|
||||
.slick-container div.views-row {
|
||||
.carousel_container .slick-container div.views-row {
|
||||
padding: 0 3vw;
|
||||
}
|
||||
@media screen and (min-width: 760px) {
|
||||
.slick-container div.views-row {
|
||||
.carousel_container .slick-container div.views-row {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
}
|
||||
.slick-container div.views-row > article {
|
||||
.carousel_container .slick-container div.views-row > article {
|
||||
width: 100%;
|
||||
}
|
||||
.slick-container div.views-row > article > div:first-of-type {
|
||||
.carousel_container .slick-container div.views-row > article > div:first-of-type {
|
||||
overflow-y: hidden;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slick-container div.views-row > article > div:first-of-type > div {
|
||||
.carousel_container .slick-container div.views-row > article > div:first-of-type > div {
|
||||
width: 100%;
|
||||
}
|
||||
.slick-container div.views-row > article > div:first-of-type > div > a {
|
||||
.carousel_container .slick-container div.views-row > article > div:first-of-type > div > a {
|
||||
max-width: 100%;
|
||||
}
|
||||
.slick-container div.views-row > article > div:first-of-type > div > a img {
|
||||
.carousel_container .slick-container div.views-row > article > div:first-of-type > div > a img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.slick-container div.views-row > article .preview_meta {
|
||||
.carousel_container .slick-container div.views-row > article .preview_meta {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.slick-container div.views-row > article h2, .slick-container div.views-row > article .preview_sous_titre {
|
||||
.carousel_container .slick-container div.views-row > article h2, .carousel_container .slick-container div.views-row > article .preview_sous_titre {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.slick-container .slick-arrow {
|
||||
.carousel_container .slick-container .slick-arrow {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
|
|
@ -599,19 +605,19 @@ body.toolbar-fixed header[role=banner] {
|
|||
bottom: calc(-25px - 4rem);
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.slick-container .slick-arrow {
|
||||
.carousel_container .slick-container .slick-arrow {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
bottom: calc(-25px - 6rem);
|
||||
}
|
||||
}
|
||||
.slick-container .slick-arrow:hover {
|
||||
.carousel_container .slick-container .slick-arrow:hover {
|
||||
background-color: white !important;
|
||||
}
|
||||
.slick-container .slick-arrow:hover::before {
|
||||
.carousel_container .slick-container .slick-arrow:hover::before {
|
||||
color: #038788;
|
||||
}
|
||||
.slick-container .slick-arrow::before {
|
||||
.carousel_container .slick-container .slick-arrow::before {
|
||||
opacity: 1 !important;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
|
@ -620,57 +626,57 @@ body.toolbar-fixed header[role=banner] {
|
|||
font-size: 0.8rem !important;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.slick-container .slick-arrow::before {
|
||||
.carousel_container .slick-container .slick-arrow::before {
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
}
|
||||
.slick-container .slick-prev {
|
||||
.carousel_container .slick-container .slick-prev {
|
||||
left: 20vw;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.slick-container .slick-prev {
|
||||
@media (min-width: 760px) {
|
||||
.carousel_container .slick-container .slick-prev {
|
||||
left: 85vw;
|
||||
}
|
||||
}
|
||||
.slick-container .slick-next {
|
||||
.carousel_container .slick-container .slick-next {
|
||||
right: 20vw;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.slick-container .slick-next {
|
||||
@media (min-width: 760px) {
|
||||
.carousel_container .slick-container .slick-next {
|
||||
right: 85vw;
|
||||
}
|
||||
}
|
||||
.slick-container > div > div > div:first-of-type {
|
||||
.carousel_container .slick-container > div > div > div:first-of-type {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.slick-container > div > div > div:first-of-type {
|
||||
.carousel_container .slick-container > div > div > div:first-of-type {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
.slick-container #carousel_dots {
|
||||
.carousel_container .slick-container #carousel_dots {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.slick-container #carousel_dots ul {
|
||||
.carousel_container .slick-container #carousel_dots ul {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
.slick-container #carousel_dots ul li.slick-active button::before {
|
||||
.carousel_container .slick-container #carousel_dots ul li.slick-active button::before {
|
||||
color: #038788;
|
||||
}
|
||||
.slick-container #carousel_dots ul li button::before {
|
||||
.carousel_container .slick-container #carousel_dots ul li button::before {
|
||||
color: rgb(0.9, 0.9, 0.9);
|
||||
}
|
||||
.slick-container footer {
|
||||
.carousel_container .slick-container footer {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.slick-container footer a {
|
||||
.carousel_container .slick-container footer a {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-family: "Marianne", sans-serif;
|
||||
|
|
@ -681,10 +687,10 @@ body.toolbar-fixed header[role=banner] {
|
|||
padding: 9px 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.slick-container footer a svg {
|
||||
.carousel_container .slick-container footer a svg {
|
||||
display: none;
|
||||
}
|
||||
.slick-container footer a:hover {
|
||||
.carousel_container .slick-container footer a:hover {
|
||||
background-color: #00ff80;
|
||||
}
|
||||
|
||||
|
|
@ -740,11 +746,11 @@ body.toolbar-fixed header[role=banner] {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
.actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
|
||||
margin-bottom: 1rem;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
|
||||
|
|
@ -844,13 +850,13 @@ body.toolbar-fixed header[role=banner] {
|
|||
}
|
||||
}
|
||||
.views-row article.actu-teaser h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.views-row article.actu-teaser h2 a {
|
||||
color: #038788;
|
||||
|
|
@ -1046,18 +1052,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
|
||||
.home_consultation {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
|
||||
}
|
||||
.home_consultation h2 {
|
||||
margin-bottom: 1.2rem;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.home_consultation h2 a {
|
||||
color: #038788;
|
||||
|
|
@ -1144,6 +1150,23 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
}
|
||||
}
|
||||
|
||||
#sites-map-container #popup h3 {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
#sites-map-container #popup h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
#sites-map-container #popup p {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.fullpage {
|
||||
margin-bottom: 10vh;
|
||||
margin-top: -3vh;
|
||||
|
|
@ -1152,12 +1175,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
position: relative;
|
||||
}
|
||||
.fullpage > h2 {
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 7vh;
|
||||
background-color: #fcf9ee;
|
||||
|
|
@ -1165,6 +1182,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.fullpage > h2 a {
|
||||
color: #038788;
|
||||
|
|
@ -1185,12 +1208,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
color: #314e41;
|
||||
}
|
||||
.fullpage .fullpage_content > h2 {
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #fcf9ee;
|
||||
|
|
@ -1198,6 +1215,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.fullpage .fullpage_content > h2 a {
|
||||
color: #038788;
|
||||
|
|
@ -1213,18 +1236,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
}
|
||||
}
|
||||
.fullpage .fullpage_content .sous_titre {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
}
|
||||
.fullpage .fullpage_content p {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.fullpage .fullpage_content p {
|
||||
padding: 0 3vw;
|
||||
margin-bottom: 2rem;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.fullpage .fullpage_content p:first-of-type {
|
||||
margin-top: 7vh;
|
||||
|
|
@ -1273,12 +1296,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
display: none;
|
||||
}
|
||||
.fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 3vw;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 3vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 {
|
||||
|
|
@ -1335,12 +1358,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
}
|
||||
.paragraph--type--membre-equipe > div:nth-of-type(2),
|
||||
.paragraph--type--membre-equipe > div:nth-of-type(3) {
|
||||
margin-bottom: 2vh;
|
||||
align-self: flex-end;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
margin-bottom: 2vh;
|
||||
align-self: flex-end;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.paragraph--type--membre-equipe > div:nth-of-type(2),
|
||||
|
|
@ -1352,10 +1375,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
.paragraph--type--membre-equipe > div:last-of-type {
|
||||
grid-column: 2/4;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
grid-column: 2/4;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.paragraph--type--membre-equipe {
|
||||
|
|
@ -1384,10 +1407,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
font-size: 1.6rem;
|
||||
}
|
||||
.content_gouvernance .views-row article > h2 + div > div {
|
||||
margin-bottom: 2em;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.content_gouvernance .views-row article > div:first-of-type {
|
||||
height: unset;
|
||||
|
|
@ -1666,10 +1689,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
background-color: white;
|
||||
}
|
||||
.fullpage.meetup > .meetup_list > .views-row > a > article > p, .fullpage.meetup > .meetup_list > .views-row > a > article > a, .fullpage.meetup > .meetup_list > .views-row > a > article > div, .fullpage.meetup > .meetup_list > .views-row > a > article > a > h2, .fullpage.meetup > .meetup_list > .views-row > article > p, .fullpage.meetup > .meetup_list > .views-row > article > a, .fullpage.meetup > .meetup_list > .views-row > article > div, .fullpage.meetup > .meetup_list > .views-row > article > a > h2 {
|
||||
padding: 0.2rem 0;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
.fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]), .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) {
|
||||
grid-column: 1;
|
||||
|
|
@ -1737,33 +1760,33 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
display: none !important;
|
||||
}
|
||||
.fullpage.meetup > .views-exposed-form {
|
||||
display: flex;
|
||||
margin-left: 3vw;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
margin-left: 3vw;
|
||||
}
|
||||
.fullpage.meetup > .views-exposed-form > div {
|
||||
width: auto;
|
||||
}
|
||||
.fullpage.meetup > .views-exposed-form > div > select {
|
||||
font-size: 0.8rem;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.fullpage.meetup > .views-exposed-form > div:last-of-type {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.fullpage.meetup > .views-exposed-form > div:last-of-type > input {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
font-size: 0.8rem;
|
||||
background-color: #038788;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.fullpage.meetup .ornements_top_over {
|
||||
top: -15vh;
|
||||
|
|
@ -1787,14 +1810,14 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
color: #038788;
|
||||
}
|
||||
.fullpage.meetup-offre > h2 {
|
||||
margin-bottom: 3vh;
|
||||
width: auto;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3vh;
|
||||
width: auto;
|
||||
}
|
||||
.fullpage.meetup-offre > h2 a {
|
||||
color: #038788;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,17 +5,17 @@
|
|||
@include beige_gradient();
|
||||
position: relative;
|
||||
> h2 {
|
||||
@include main_title();
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 7vh;
|
||||
background-color: $beige;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
background-color: unset;
|
||||
}
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 7vh;
|
||||
background-color: $beige;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
@include main_title();
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.legende {
|
||||
|
|
@ -26,29 +26,29 @@
|
|||
|
||||
.fullpage_content {
|
||||
> h2 {
|
||||
@include main_title();
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 1rem;
|
||||
background-color: $beige;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
background-color: unset;
|
||||
}
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 1rem;
|
||||
background-color: $beige;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
@include main_title();
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.sous_titre {
|
||||
@include main_text_content();
|
||||
font-size: $l_font_size;
|
||||
padding: 0 $x_margin;
|
||||
font-size: $l_font_size;
|
||||
padding: 0 $x_margin;
|
||||
@include main_text_content();
|
||||
}
|
||||
|
||||
p {
|
||||
@include main_text_content();
|
||||
padding: 0 $x_margin;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0 $x_margin;
|
||||
margin-bottom: 2rem;
|
||||
@include main_text_content();
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
|
|
@ -57,26 +57,26 @@
|
|||
|
||||
|
||||
.liens_fixed > div > div, .file_fixed > div > div {
|
||||
padding: 0 calc($x_margin / 2);
|
||||
text-align: right;
|
||||
margin: 2rem 0;
|
||||
@include fluo_button();
|
||||
padding: 0 calc($x_margin / 2);
|
||||
text-align: right;
|
||||
margin: 2rem 0;
|
||||
@include fluo_button();
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-bottom: 0 !important;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
left: 75vw;
|
||||
bottom: 10vh;
|
||||
> div {
|
||||
height: 3vh;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-bottom: 0 !important;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
left: 75vw;
|
||||
bottom: 10vh;
|
||||
> div {
|
||||
height: 3vh;
|
||||
}
|
||||
a {
|
||||
max-width: calc(25vw - $x_margin * 2);
|
||||
}
|
||||
max-width: calc(25vw - $x_margin * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.file_fixed span:last-of-type {
|
||||
display: none;
|
||||
|
|
@ -84,9 +84,9 @@
|
|||
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
@include sous_titre();
|
||||
margin-bottom: 1rem;
|
||||
padding-left: $x_margin;
|
||||
margin-bottom: 1rem;
|
||||
padding-left: $x_margin;
|
||||
@include sous_titre();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> div:nth-of-type(2),
|
||||
> div:nth-of-type(3) {
|
||||
@include sous_titre();
|
||||
margin-bottom: 2vh;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 2vh;
|
||||
align-self: flex-end;
|
||||
@include sous_titre();
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
}
|
||||
|
||||
> div:last-of-type {
|
||||
@include main_text_content();
|
||||
grid-column: 2 / 4;
|
||||
grid-column: 2 / 4;
|
||||
@include main_text_content();
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
grid-template-columns: 10vw auto 1fr;
|
||||
|
|
@ -60,19 +60,19 @@
|
|||
margin-bottom: 2vh;
|
||||
article {
|
||||
> h2 {
|
||||
margin-bottom: 2vh;
|
||||
@include sous_titre_alt();
|
||||
margin-bottom: 2vh;
|
||||
@include sous_titre_alt();
|
||||
}
|
||||
> h2 + div > div {
|
||||
@include main_text_content();
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 2em;
|
||||
@include main_text_content();
|
||||
}
|
||||
> div:first-of-type {
|
||||
height: unset;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@
|
|||
}
|
||||
}
|
||||
div.more-link {
|
||||
@include fluo_button();
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include fluo_button();
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
position: absolute;
|
||||
left:0;
|
||||
|
|
@ -69,19 +69,19 @@
|
|||
// plus sur l'accueil
|
||||
.home_consultation {
|
||||
position: relative;
|
||||
@include beige_gradient();
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
@include beige_gradient();
|
||||
h2 {
|
||||
@include main_title();
|
||||
margin-bottom: 1.2rem;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-left: 12.5vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
margin-bottom: 1.2rem;
|
||||
@include main_title();
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-left: 12.5vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
h2 + div {
|
||||
h2, h3, h4 {
|
||||
|
|
@ -121,3 +121,14 @@
|
|||
padding-right: 12.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
#sites-map-container {
|
||||
#popup {
|
||||
h3 {
|
||||
@include sous_titre();
|
||||
}
|
||||
p {
|
||||
@include main_text_content();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,8 +108,8 @@
|
|||
grid-template-rows: repeat(6, auto);
|
||||
background-color: white;
|
||||
> p, > a, > div, > a > h2 {
|
||||
@include main_text_content();
|
||||
padding: 0.2rem 0;
|
||||
padding: 0.2rem 0;
|
||||
@include main_text_content();
|
||||
}
|
||||
> a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) {
|
||||
grid-column: 1;
|
||||
|
|
@ -182,25 +182,25 @@
|
|||
}
|
||||
}
|
||||
> .views-exposed-form {
|
||||
@include main_text_content();
|
||||
display: flex;
|
||||
margin-left: $x_margin;
|
||||
> div {
|
||||
width: auto;
|
||||
> select {
|
||||
@include main_text_content();
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
display: flex;
|
||||
margin-left: $x_margin;
|
||||
@include main_text_content();
|
||||
> div {
|
||||
width: auto;
|
||||
> select {
|
||||
font-size: 0.8rem;
|
||||
@include main_text_content();
|
||||
}
|
||||
}
|
||||
> div:last-of-type {
|
||||
margin-left: 1rem;
|
||||
> input {
|
||||
@include main_text_content();
|
||||
font-size: 0.8rem;
|
||||
background-color: $teal;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 0.8rem;
|
||||
background-color: $teal;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
@include main_text_content();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -226,9 +226,9 @@
|
|||
}
|
||||
}
|
||||
> h2 {
|
||||
@include main_title();
|
||||
margin-bottom: 3vh;
|
||||
width: auto;
|
||||
margin-bottom: 3vh;
|
||||
width: auto;
|
||||
@include main_title();
|
||||
}
|
||||
> .offre-content {
|
||||
> div {
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
@include main_text_content();
|
||||
margin-bottom: 2rem;
|
||||
padding-left: $x_margin;
|
||||
}
|
||||
|
||||
|
||||
> div:last-of-type {
|
||||
grid-column: 1 / 3;
|
||||
width: 100%;
|
||||
|
|
@ -49,4 +49,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
}
|
||||
} */
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -25,3 +21,8 @@ em {
|
|||
#block-erabletheme-titredepage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// debug
|
||||
/* * {
|
||||
border: solid 1px red !important;
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -9,58 +9,58 @@ $title_size: 2.3rem;
|
|||
/* MIXINS */
|
||||
|
||||
@mixin main_title() {
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: $l_font_size;
|
||||
padding: 0 $x_margin;
|
||||
margin-top: 1rem;
|
||||
color: $teal;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: $teal;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $title_size;
|
||||
}
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: $l_font_size;
|
||||
padding: 0 $x_margin;
|
||||
margin-top: 1rem;
|
||||
color: $teal;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: $teal;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $title_size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin main_text_content() {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $main_font_size;
|
||||
line-height: 1.4;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $main_font_size;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@mixin sous_titre() {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $m_font_size;
|
||||
color: $teal;
|
||||
font-weight: 800;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size;
|
||||
}
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $m_font_size;
|
||||
color: $teal;
|
||||
font-weight: 800;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sous_titre_alt() {
|
||||
font-family: "Barlow", sans-serif;
|
||||
color: black;
|
||||
font-size: $xl_font_size;
|
||||
font-family: "Barlow", sans-serif;
|
||||
color: black;
|
||||
font-size: $xl_font_size;
|
||||
}
|
||||
|
||||
@mixin fluo_button() {
|
||||
a {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: $m_font_size;
|
||||
background-color: white;
|
||||
border: solid 2px $fluo_green;
|
||||
padding: 9px 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: $fluo_green;
|
||||
a {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: $m_font_size;
|
||||
background-color: white;
|
||||
border: solid 2px $fluo_green;
|
||||
padding: 9px 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: $fluo_green;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@
|
|||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
@include sous_titre();
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
@include sous_titre();
|
||||
}
|
||||
|
||||
.liens_fixed > div > div:nth-of-type(2), .file_fixed > div > div > div {
|
||||
|
|
@ -83,4 +83,4 @@
|
|||
.file_fixed span:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
}
|
||||
|
||||
h2 {
|
||||
@include main_title();
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@include main_title();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,115 +1,121 @@
|
|||
.slick-container {
|
||||
.carousel_container {
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
width: 200vw;
|
||||
transform: translateX(-50vw);
|
||||
}
|
||||
div.views-row {
|
||||
padding: 0 3vw;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
> article {
|
||||
width: 100%;
|
||||
> div:first-of-type { // container du lien image
|
||||
overflow-y: hidden;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 100%;
|
||||
> a {
|
||||
max-width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
.preview_meta {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
h2, .preview_sous_titre {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.slick-container {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
width: 200vw;
|
||||
transform: translateX(-50vw);
|
||||
}
|
||||
}
|
||||
.slick-arrow {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
background-color: $teal !important;
|
||||
transition: background-color 0.3s ease;
|
||||
top: unset !important;
|
||||
bottom: calc(-25px - 4rem);
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
bottom: calc(-25px - 6rem);
|
||||
}
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
&::before {
|
||||
color: $teal;
|
||||
div.views-row {
|
||||
padding: 0 3vw;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
> article {
|
||||
width: 100%;
|
||||
> div:first-of-type { // container du lien image
|
||||
overflow-y: hidden;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 100%;
|
||||
> a {
|
||||
max-width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
opacity: 1 !important;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
display: block;
|
||||
font-size: $sm_font_size !important;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size !important;
|
||||
.preview_meta {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
h2, .preview_sous_titre {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-prev {
|
||||
left: 20vw;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
left: calc(50vw + 35vw);
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
right: 20vw;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
right: calc(50vw + 35vw);
|
||||
}
|
||||
}
|
||||
> div > div > div:first-of-type {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
margin-bottom: 4rem;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
#carousel_dots {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: -15px;
|
||||
ul {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
li.slick-active button::before{
|
||||
.slick-arrow {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
background-color: $teal !important;
|
||||
transition: background-color 0.3s ease;
|
||||
top: unset !important;
|
||||
bottom: calc(-25px - 4rem);
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
bottom: calc(-25px - 6rem);
|
||||
}
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
&::before {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
li button::before{
|
||||
color: rgba(0.9, 0.9, 0.9, 1);
|
||||
&::before {
|
||||
opacity: 1 !important;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
display: block;
|
||||
font-size: $sm_font_size !important;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
@include fluo_button();
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
.slick-prev {
|
||||
left: 20vw;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
left: calc(50vw + 35vw);
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
right: 20vw;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
right: calc(50vw + 35vw);
|
||||
}
|
||||
}
|
||||
> div > div > div:first-of-type {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
#carousel_dots {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: -15px;
|
||||
ul {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
li.slick-active button::before{
|
||||
color: $teal;
|
||||
}
|
||||
li button::before{
|
||||
color: rgba(0.9, 0.9, 0.9, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
@include fluo_button();
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
.layout-container > footer {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
z-index: 99;
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
|
||||
margin-top: 50px;
|
||||
padding: 0 $x_margin;
|
||||
#footer_middle {
|
||||
|
|
@ -69,35 +68,39 @@
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#footer_right {
|
||||
width: 30%;
|
||||
#block-erabletheme-socialmedialinks-2 ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
li a {
|
||||
span {
|
||||
font-weight: lighter;
|
||||
font-size: 1.4rem;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1.1rem;
|
||||
color: white;
|
||||
background-color: $teal;
|
||||
}
|
||||
svg.ext {
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
a {
|
||||
span {
|
||||
font-weight: lighter;
|
||||
font-size: 1.4rem;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1.1rem;
|
||||
color: white;
|
||||
background-color: $teal;
|
||||
}
|
||||
svg.ext {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 25vw;
|
||||
padding-left: 15vw;
|
||||
padding-right: $x_margin;
|
||||
width: auto;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
display: flex;
|
||||
|
|
@ -106,4 +109,4 @@
|
|||
@media (min-width: $breakpoint_tablet) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ body.toolbar-fixed header[role="banner"] {
|
|||
}
|
||||
#block-erabletheme-navigationprincipale {
|
||||
background: linear-gradient(to bottom, white, transparent);
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-top: 1rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a block.
|
||||
*
|
||||
* Available variables:
|
||||
* - plugin_id: The ID of the block implementation.
|
||||
* - label: The configured label of the block if visible.
|
||||
* - configuration: A list of the block's configuration values.
|
||||
* - label: The configured label for the block.
|
||||
* - label_display: The display settings for the label.
|
||||
* - provider: The module or other provider that provided this block plugin.
|
||||
* - Block plugin specific settings will also be stored here.
|
||||
* - in_preview: Whether the plugin is being rendered in preview mode.
|
||||
* - content: The content of this block.
|
||||
* - attributes: array of HTML attributes populated by modules, intended to
|
||||
* be added to the main container tag of this template.
|
||||
* - id: A valid HTML ID and guaranteed unique.
|
||||
* - title_attributes: Same as attributes, except applied to the main title
|
||||
* tag that appears in the template.
|
||||
* - title_prefix: Additional output populated by modules, intended to be
|
||||
* displayed in front of the main title tag that appears in the template.
|
||||
* - title_suffix: Additional output populated by modules, intended to be
|
||||
* displayed after the main title tag that appears in the template.
|
||||
*
|
||||
* @see template_preprocess_block()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div{{ attributes }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
{% block content %}
|
||||
{{ content }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
Loading…
Reference in New Issue