mobile carroussel actus

This commit is contained in:
ouidade 2024-07-08 12:08:14 +02:00
parent 39bef4b27a
commit 92ce397036
8 changed files with 228 additions and 76 deletions

File diff suppressed because one or more lines are too long

View File

@ -232,7 +232,7 @@ header {
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */ /* Classes for scroll effect */
} }
@media (max-width: 700px) { @media (max-width: 500px) {
header { header {
height: 110px; height: 110px;
} }
@ -345,6 +345,11 @@ header .header_nav_container {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: -1; z-index: -1;
} }
@media (max-width: 500px) {
header .header_nav_container {
flex: 0 0 40%;
}
}
header .header_nav_container #block-quartiers-de-demain-entete h2 { header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none; display: none;
} }
@ -363,7 +368,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 27.5px; top: 27.5px;
} }
} }
@media (max-width: 500px) { @media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li { header .header_nav_container #block-quartiers-de-demain-entete ul li {
padding-top: 0.3rem; padding-top: 0.3rem;
} }
@ -373,11 +378,17 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a {
color: white; color: white;
font-size: 0.5rem; font-size: 0.5rem;
} }
@media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a {
font-size: 0.9rem;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a { header .header_nav_container #block-quartiers-de-demain-entete ul li a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
font-size: 0.6rem;
} }
} }
header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after { header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
@ -681,6 +692,7 @@ footer {
.slick-next { .slick-next {
position: absolute; position: absolute;
display: block; display: block;
z-index: 99;
height: 20px; height: 20px;
width: 20px; width: 20px;
line-height: 0px; line-height: 0px;
@ -921,18 +933,35 @@ footer {
background-size: contain; background-size: contain;
background-position-x: -20%; background-position-x: -20%;
} }
@media (max-width: 1090px) {
#home .config_pages--type--deroulement {
cursor: grab;
}
}
#home .timeline { #home .timeline {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-top: 10rem; padding-top: 10rem;
padding-bottom: 4rem; padding-bottom: 4rem;
} }
@media (max-width: 1090px) {
#home .timeline {
padding-top: 18rem;
overflow: scroll;
}
}
#home .timeline .__timeline-arrows { #home .timeline .__timeline-arrows {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; position: relative;
top: -115px; top: -115px;
} }
@media (max-width: 1090px) {
#home .timeline .__timeline-arrows {
top: -211px;
display: none;
}
}
#home .timeline .__timeline-arrows button { #home .timeline .__timeline-arrows button {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -966,10 +995,10 @@ footer {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 101%; left: 100%;
bottom: 0; bottom: 0;
width: 12px; width: 17px;
height: 12px; height: 17px;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: 50%; border-radius: 50%;
background: black; background: black;
@ -988,6 +1017,12 @@ footer {
flex-direction: row; flex-direction: row;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
padding-left: 0rem;
}
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: fit-content; width: fit-content;
@ -1002,12 +1037,23 @@ footer {
font-size: 2rem; font-size: 2rem;
line-height: 0.3rem; line-height: 0.3rem;
} }
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 3rem;
line-height: 1.3rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 3rem; font-size: 3rem;
display: inline-flex; display: inline-flex;
} }
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
font-size: 4rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after {
content: "."; content: ".";
} }
@ -1018,6 +1064,11 @@ footer {
position: relative; position: relative;
top: -10px; top: -10px;
} }
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee {
font-size: 1.2rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1047,16 +1098,25 @@ footer {
border: solid rgb(7, 50, 194) 1px; border: solid rgb(7, 50, 194) 1px;
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
width: fit-content;
min-width: 50%; min-width: 50%;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.6rem; font-size: 0.6rem;
} }
@media (max-width: 700px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 1rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 0.5rem !important; font-size: 0.5rem !important;
margin: 0; margin: 0;
} }
@media (max-width: 700px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 1rem !important;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
display: none; display: none;
} }
@ -1094,6 +1154,11 @@ footer {
width: 500px !important; width: 500px !important;
padding: 1rem; padding: 1rem;
} }
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row {
width: 296px !important;
}
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
-moz-border-radius: 9px; /* pour Mozilla */ -moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
@ -1103,12 +1168,22 @@ footer {
height: 250px; height: 250px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
height: 170px;
}
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
width: 100%; width: 100%;
height: fit-content; height: fit-content;
max-height: 250px; max-height: 250px;
object-fit: cover; object-fit: cover;
} }
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
max-height: 170px;
}
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite {
text-transform: uppercase; text-transform: uppercase;
color: red; color: red;
@ -1497,7 +1572,8 @@ footer {
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
grid-row: 4; grid-row: 4;
grid-column: 1; grid-column: 2;
margin: auto;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
@ -1506,7 +1582,7 @@ footer {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 9; grid-row: 8;
grid-column: 1; grid-column: 1;
} }
} }
@ -1533,8 +1609,8 @@ footer {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 5; grid-row: 4;
grid-column: 1; grid-column: 1/span 2;
width: 315px; width: 315px;
} }
} }
@ -1544,7 +1620,7 @@ footer {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 9/span 9; grid-row: 8;
grid-column: 1/span 2; grid-column: 1/span 2;
width: 315px; width: 315px;
} }
@ -1568,7 +1644,7 @@ footer {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 8; grid-row: 9;
grid-column: 1/span 2; grid-column: 1/span 2;
} }
} }

View File

@ -39,9 +39,9 @@
//////// header //////////// //////// header ////////////
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const headerNavContainer = document.querySelector('.header_nav_container'); const headerNavContainer = document.querySelector('.header_nav_container');
const headerLeftContainer = document.querySelector('header');
let lastScrollTop = 0; let lastScrollTop = 0;
let threshold = 100; // Change this value as needed let threshold = 100; // Change this value as needed
let isHidden = false; let isHidden = false;
@ -80,31 +80,39 @@
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
} }
window.addEventListener('scroll', function() { function handleTouchAndMouseEnter() {
handleScroll(); if (isHidden) {
}); slideIn();
const headerLeftContainer = document.querySelector('header');
headerLeftContainer.addEventListener('mouseenter', function() {
slideIn(); // Slide out on mouse enter
});
headerLeftContainer.addEventListener('mouseleave', function() {
if (lastScrollTop <= threshold) {
slideOut(); // Slide in on mouse leave if not scrolled down
} }
}); }
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
slideIn();
} else {
slideOut();
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
slideOut();
}
}
window.addEventListener('scroll', handleScroll);
// Mouse events for desktop
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
slideIn();
} else {
slideOut();
}
}); });
// ///////////////// // /////////////////
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header //// ancre dans texte au click parragraphe correspondant arrive en dessous du header
@ -164,52 +172,71 @@ $( document ).ready(function() {
////////////////// Timeline /////////////////////// ////////////////// Timeline ///////////////////////
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0; let currentSlide = 0;
function showSlides(index) { function getVisibleSlides() {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); if (window.innerWidth <= 600) {
const totalSlides = slides.length; return 1; // Show 1 slide on small screens
const visibleSlides = 3; // Number of slides to show at a time } else if (window.innerWidth <= 900) {
const maxSlide = totalSlides - visibleSlides; return 2; // Show 2 slides on medium screens
} else {
// Adjust the index to ensure it stays within bounds return 3; // Show 3 slides on large screens
currentSlide = Math.max(0, Math.min(index, maxSlide)); }
// Calculate the offset for the transform
const offset = currentSlide * -100 / visibleSlides;
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0;
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
} }
function showSlides(index) {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const totalSlides = slides.length;
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(1, Math.min(index, maxSlide));
// Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides;
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0;
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
}
function prevSlide() { function prevSlide() {
showSlides(currentSlide - 1); showSlides(currentSlide - 1);
} }
function nextSlide() { function nextSlide() {
showSlides(currentSlide + 1); showSlides(currentSlide + 1);
} }
// Attach event listeners // Attach event listeners
document.getElementById('arrowPrev').addEventListener('click', prevSlide); document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide); document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Initialize the first view of the slides
showSlides(currentSlide);
// Check and replace empty day fields // Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const dateElement = paragraph.querySelector('.date');
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
const monthText = monthField.textContent.trim(); if (monthField) {
if (monthText.length >= 3) { const monthText = monthField.textContent.trim();
monthField.textContent = monthText.slice(0, 3); if (monthText.length >= 3) {
console.log(monthField) monthField.textContent = monthText.slice(0, 3);
}
} }
}); });
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize // Initialize
showSlides(currentSlide); showSlides(currentSlide);
}); });
@ -247,7 +274,7 @@ document.addEventListener('DOMContentLoaded', function() {
settings: { settings: {
slidesToShow: 1, slidesToShow: 1,
adaptiveHeight: true, adaptiveHeight: true,
arrows: false, arrows: true,
draggable: true, draggable: true,
centerMode: true, centerMode: true,
} }

View File

@ -330,14 +330,15 @@
grid-column: 3; grid-column: 3;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 4; grid-row: 4;
grid-column: 1; grid-column: 2;
margin: auto;
} }
} }
h5:nth-of-type(3){ h5:nth-of-type(3){
grid-row: 1; grid-row: 1;
grid-column: 5; grid-column: 5;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 9; grid-row: 8;
grid-column: 1; grid-column: 1;
} }
} }
@ -360,8 +361,8 @@
grid-row: 3; grid-row: 3;
grid-column: inherit; grid-column: inherit;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 5; grid-row: 4;
grid-column: 1 ; grid-column: 1 /span 2 ;
width: 315px; width: 315px;
} }
} }
@ -369,7 +370,7 @@
grid-row: 1 /span 2; grid-row: 1 /span 2;
grid-column: 5 /span 6; grid-column: 5 /span 6;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 9/span 9; grid-row: 8 ;
grid-column: 1 /span 2; grid-column: 1 /span 2;
width: 315px; width: 315px;
} }
@ -389,7 +390,7 @@
grid-row: 3; grid-row: 3;
grid-column: 5; grid-column: 5;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 8; grid-row: 9;
grid-column: 1 /span 2; grid-column: 1 /span 2;
} }
} }

View File

@ -32,6 +32,9 @@
} }
.views-row{ .views-row{
width: 500px !important; width: 500px !important;
@media(max-width: 550px){
width: 296px !important;
}
padding: 1rem; padding: 1rem;
.node-type-actualite{ .node-type-actualite{
.field_field_images{ .field_field_images{
@ -42,11 +45,17 @@
background-color: red; background-color: red;
height: 250px; height: 250px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
@media(max-width: 550px){
height: 170px;
}
img{ img{
width: 100%; width: 100%;
height: fit-content; height: fit-content;
max-height: 250px; max-height: 250px;
object-fit: cover; object-fit: cover;
@media(max-width: 550px){
max-height: 170px;
}
} }
} }
.field_field_type_d_actualite{ .field_field_type_d_actualite{

View File

@ -9,7 +9,7 @@ header{
position: fixed; position: fixed;
top: 0; top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
@media(max-width: 700px){ @media(max-width: 500px){
height: $header-height-pad; height: $header-height-pad;
} }
@ -106,7 +106,9 @@ header{
transform: translateX(0); transform: translateX(0);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: -1 ; z-index: -1 ;
@media(max-width: 500px){
flex: 0 0 40%;
}
#block-quartiers-de-demain-entete{ #block-quartiers-de-demain-entete{
h2{ h2{
display: none; display: none;
@ -125,7 +127,7 @@ header{
top: calc($header-height-pad / 4 ); top: calc($header-height-pad / 4 );
} }
li{ li{
@media(max-width: 500px){ @media(max-width: 1090px){
padding-top: 0.3rem; padding-top: 0.3rem;
} }
a{ a{
@ -133,11 +135,16 @@ header{
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
font-size: 0.5rem; font-size: 0.5rem;
@media(max-width:1090px){
font-size: 0.9rem;
}
@media(max-width: 500px){ @media(max-width: 500px){
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
font-size: 0.6rem;
} }
} }
&:not(:last-of-type){ &:not(:last-of-type){
::after{ ::after{

View File

@ -68,6 +68,7 @@ $slick-opacity-not-active: 0.25 !default;
.slick-next { .slick-next {
position: absolute; position: absolute;
display: block; display: block;
z-index: 99;
height: 20px; height: 20px;
width: 20px; width: 20px;
line-height: 0px; line-height: 0px;

View File

@ -10,6 +10,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position-x: -20%; background-position-x: -20%;
@media(max-width:1090px){
cursor:grab;
}
} }
.timeline { .timeline {
@ -17,11 +20,19 @@
overflow: hidden; overflow: hidden;
padding-top: 10rem; padding-top: 10rem;
padding-bottom: 4rem; padding-bottom: 4rem;
@media(max-width:1090px){
padding-top: 18rem;
overflow: scroll;
}
.__timeline-arrows{ .__timeline-arrows{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; position: relative;
top: -115px; top: -115px;
@media(max-width:1090px){
top: -211px;
display: none;
}
button{ button{
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -59,14 +70,15 @@
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 101%; left: 100%;
bottom: 0; bottom: 0;
width: 12px; width: 17px;
height: 12px; height: 17px;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: 50%; border-radius: 50%;
background: black; background: black;
} }
.paragraph--type--phase-deroulement{ .paragraph--type--phase-deroulement{
position: absolute; position: absolute;
left: 65%; left: 65%;
@ -81,6 +93,10 @@
flex-direction: row; flex-direction: row;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem;
@media(max-width:550px){
padding-left: 0rem;
}
.date{ .date{
width: fit-content; width: fit-content;
display: flex; display: flex;
@ -92,12 +108,19 @@
.field_field_date_de_jour{ .field_field_date_de_jour{
font-size: 2rem; font-size: 2rem;
line-height: 0.3rem; line-height: 0.3rem;
@media(max-width:550px){
font-size: 3rem;
line-height: 1.3rem;
}
} }
.field_field_date_de_moi{ .field_field_date_de_moi{
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 3rem; font-size: 3rem;
display: inline-flex; display: inline-flex;
@media(max-width:550px){
font-size: 4rem;
}
&::after{ &::after{
content: '.'; content: '.';
} }
@ -108,6 +131,9 @@
font-size: 0.6rem; font-size: 0.6rem;
position: relative; position: relative;
top: -10px; top: -10px;
@media(max-width:550px){
font-size: 1.2rem;
}
.field_field_date_de_annee{ .field_field_date_de_annee{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -149,16 +175,21 @@
border: solid $blue_QDD 1px; border: solid $blue_QDD 1px;
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
// width: fit-content;
width: fit-content;
min-width: 50%; min-width: 50%;
.field_field_titre{ .field_field_titre{
font-size: 0.6rem; font-size: 0.6rem;
@media(max-width:700px){
font-size: 1rem;
}
} }
.field_field_description{ .field_field_description{
p{ p{
font-size: 0.5rem !important; font-size: 0.5rem !important;
margin: 0; margin: 0;
@media(max-width:700px){
font-size: 1rem !important;
}
} }
.field--label-above{ .field--label-above{
display: none; display: none;