bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile carroussel actus

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-08 12:08:14 +02:00
parent 39bef4b27a
commit 92ce397036
8 changed files with 228 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

100
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

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