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

mobile

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-08 14:06:57 +02:00
parent 92ce397036
commit 561dfbb315
13 changed files with 215 additions and 90 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

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

@@ -181,9 +181,9 @@ h3 {
width: 100%; width: 100%;
padding-top: 320px; padding-top: 320px;
} }
@media (max-width: 500px) { @media (max-width: 810px) {
.layout-container main { .layout-container main {
padding-top: 110px; padding-top: 180px;
} }
} }
@@ -232,9 +232,9 @@ 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: 500px) { @media (max-width: 810px) {
header { header {
height: 110px; height: 170px;
} }
} }
header .contextual-region { header .contextual-region {
@@ -363,7 +363,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
padding-right: 1rem; padding-right: 1rem;
margin: 0; margin: 0;
} }
@media (max-width: 500px) { @media (max-width: 810px) {
header .header_nav_container #block-quartiers-de-demain-entete ul { header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 27.5px; top: 27.5px;
} }
@@ -700,15 +700,24 @@ footer {
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
top: -20px; top: -1rem;
-webkit-transform: translate(0, -20px); -webkit-transform: translate(0, -1rem);
-ms-transform: translate(0, -20px); -ms-transform: translate(0, -1rem);
transform: translate(0, -20px); transform: translate(0, -1rem);
padding: 0; padding: 0;
padding-bottom: 2rem; padding-bottom: 2rem;
border: none; border: none;
outline: none; outline: none;
} }
@media (max-width: 810px) {
.slick-prev,
.slick-next {
top: -30px;
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
transform: translate(0, -30px);
}
}
.slick-prev:hover, .slick-prev:focus, .slick-prev:hover, .slick-prev:focus,
.slick-next:hover, .slick-next:hover,
.slick-next:focus { .slick-next:focus {
@@ -737,31 +746,41 @@ footer {
} }
.slick-prev { .slick-prev {
left: 45%; left: 46%;
}
@media (max-width: 810px) {
.slick-prev {
left: 36%;
}
} }
[dir=rtl] .slick-prev { [dir=rtl] .slick-prev {
left: auto; left: auto;
right: -25px; right: -25px;
} }
.slick-prev:before { .slick-prev:before {
content: "←"; content: url("../img/prev.svg ");
} }
[dir=rtl] .slick-prev:before { [dir=rtl] .slick-prev:before {
content: "→"; content: url("../img/next.svg ");
} }
.slick-next { .slick-next {
right: 45%; right: 48%;
}
@media (max-width: 810px) {
.slick-next {
right: 42%;
}
} }
[dir=rtl] .slick-next { [dir=rtl] .slick-next {
left: -25px; left: -25px;
right: auto; right: auto;
} }
.slick-next:before { .slick-next:before {
content: "→"; content: url("../img/next.svg ");
} }
[dir=rtl] .slick-next:before { [dir=rtl] .slick-next:before {
content: "←"; content: url("../img/prev.svg ");
} }
/* Dots */ /* Dots */
@@ -1064,7 +1083,7 @@ footer {
position: relative; position: relative;
top: -10px; top: -10px;
} }
@media (max-width: 550px) { @media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee {
font-size: 1.2rem; font-size: 1.2rem;
} }
@@ -1098,12 +1117,12 @@ 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;
min-width: 50%; min-width: 65%;
} }
#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.5rem;
} }
@media (max-width: 700px) { @media (max-width: 10900px) {
#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: 1rem; font-size: 1rem;
} }
@@ -1112,7 +1131,7 @@ footer {
font-size: 0.5rem !important; font-size: 0.5rem !important;
margin: 0; margin: 0;
} }
@media (max-width: 700px) { @media (max-width: 1090px) {
#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: 1rem !important; font-size: 1rem !important;
} }
@@ -1126,23 +1145,13 @@ footer {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
#actus-caroussel .__timeline-arrows {
width: fit-content;
margin: auto;
}
#actus-caroussel .__timeline-arrows button {
background-color: transparent;
border: none;
}
#actus-caroussel .__timeline-arrows button:hover {
opacity: 0.5;
}
#actus-caroussel .__timeline-arrows button svg {
padding: 0.5rem;
}
#actus-caroussel h2 { #actus-caroussel h2 {
width: fit-content; width: fit-content;
padding-bottom: 2rem; padding-bottom: 1rem;
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.7rem;
font-weight: bold;
} }
#actus-caroussel .content-actus .view { #actus-caroussel .content-actus .view {
display: flex; display: flex;
@@ -1164,7 +1173,6 @@ footer {
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */ -webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */ border-radius: 9px; /* CSS3 */
background-color: red;
height: 250px; height: 250px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
@@ -1178,6 +1186,10 @@ footer {
height: fit-content; height: fit-content;
max-height: 250px; max-height: 250px;
object-fit: cover; object-fit: cover;
-moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */
} }
@media (max-width: 550px) { @media (max-width: 550px) {
#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 {
@@ -1189,9 +1201,21 @@ footer {
color: red; color: red;
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 600; font-weight: 600;
display: inline-flex;
align-items: center;
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite::before {
content: url("../img/type-actu.svg");
padding-right: 0.4rem;
} }
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date {
color: red; color: red;
display: inline-flex;
align-items: center;
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date::before {
content: url("../img/date-actu.svg");
padding-right: 0.4rem;
} }
#actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 { #actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 {
margin: 0; margin: 0;
@@ -1228,7 +1252,7 @@ footer {
flex: 1 100%; flex: 1 100%;
font-size: 1.5rem; font-size: 1.5rem;
} }
@media (max-width: 500px) { @media (max-width: 1090px) {
#home article.node-type-static .field_body > p:nth-child(1) { #home article.node-type-static .field_body > p:nth-child(1) {
font-size: 1.3rem; font-size: 1.3rem;
} }
@@ -1238,16 +1262,17 @@ footer {
flex: 1; flex: 1;
padding: 1rem; padding: 1rem;
} }
@media (max-width: 500px) { @media (max-width: 1090px) {
#home article.node-type-static .field_body > p:nth-child(2), #home article.node-type-static .field_body > p:nth-child(2),
#home article.node-type-static .field_body p:nth-child(3) { #home article.node-type-static .field_body p:nth-child(3) {
padding-left: 0; padding-left: 0;
font-size: 1rem;
} }
} }
#home article.node-type-static .field_body > p:nth-child(2) { #home article.node-type-static .field_body > p:nth-child(2) {
padding-left: 15rem; padding-left: 15rem;
} }
@media (max-width: 500px) { @media (max-width: 1090px) {
#home article.node-type-static .field_body > p:nth-child(2) { #home article.node-type-static .field_body > p:nth-child(2) {
padding-left: 0; padding-left: 0;
} }
@@ -1269,7 +1294,7 @@ footer {
width: 50%; width: 50%;
margin: auto; margin: auto;
} }
@media (max-width: 500px) { @media (max-width: 1090px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte { #home article.node-type-static #paragraph-id--1 .field_field_texte {
width: 80%; width: 80%;
} }
@@ -1298,11 +1323,12 @@ footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media (max-width: 500px) { @media (max-width: 1090px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
padding-right: 1rem; padding-right: 1rem;
flex: 1 30%; flex: 1 30%;
max-width: 50%; max-width: 50%;
font-size: 0.9rem;
} }
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {

33
web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg vendored Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="31.925354"
height="31.926758"
viewBox="0 0 31.925354 31.926757"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath413">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-660.80651,-626.49002)"
id="path413" />
</clipPath>
</defs>
<g
id="g1"
transform="translate(-880.49597,-11148.717)">
<path
id="path412"
d="m 0,0 c 0,6.372 5.166,11.538 11.538,11.538 6.371,0 11.537,-5.166 11.537,-11.538 0,-6.372 -5.166,-11.538 -11.537,-11.538 C 5.166,-11.538 0,-6.372 0,0 Z m 11.114,0.606 c 0.281,0.281 0.736,0.281 1.017,0 0.281,-0.28 0.281,-0.735 0,-1.016 -0.281,-0.28 -0.736,-0.28 -1.017,0 -0.28,0.281 -0.28,0.736 0,1.016 z m 0.424,-0.521 6.218,6.219 m -6.218,-6.219 4.945,-4.946"
style="fill:none;stroke:#f7002b;stroke-width:0.869;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,881.07533,11164.68)"
clip-path="url(#clipPath413)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg vendored
View File

@@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="90.491943" width="55"
height="90.492188" height="55"
viewBox="0 0 90.491943 90.492186" viewBox="0 0 90.491943 90.492186"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg vendored
View File

@@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="90.490723" width="55"
height="90.492188" height="55"
viewBox="0 0 90.490723 90.492186" viewBox="0 0 90.490723 90.492186"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

33
web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg vendored Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="33.440002"
height="38.374023"
viewBox="0 0 33.440002 38.374023"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath411">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-673.14941,-649.48952)"
id="path411" />
</clipPath>
</defs>
<g
id="g1"
transform="translate(-880.49585,-11096.22)">
<path
id="path410"
d="M 0,0 V 2.406 L 9.495,12.03 11.868,9.624 2.374,0 Z M 7.121,9.624 9.495,7.218 M 7.596,13.474 V 23.82 c 0,0.665 -0.532,1.203 -1.187,1.203 H 3.086 m -10.682,0 h -3.56 c -0.656,0 -1.187,-0.538 -1.187,-1.203 V 1.203 C -12.343,0.539 -11.812,0 -11.156,0 h 8.308 m 3.797,26.948 h -1.986 c -0.196,0.559 -0.717,0.963 -1.337,0.963 -0.619,0 -1.14,-0.404 -1.337,-0.963 h -1.986 c -1.048,0 -1.899,-0.862 -1.899,-1.925 V 24.061 H 2.848 v 0.962 c 0,1.063 -0.85,1.925 -1.899,1.925 z"
style="fill:none;stroke:#f7002b;stroke-width:0.869;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,897.53253,11134.014)"
clip-path="url(#clipPath411)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

6
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -190,10 +190,10 @@ document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const totalSlides = slides.length; const totalSlides = slides.length;
const visibleSlides = getVisibleSlides(); const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides; const maxSlide = totalSlides - visibleSlides + 1;
// Adjust the index to ensure it stays within bounds // Adjust the index to ensure it stays within bounds
currentSlide = Math.max(1, Math.min(index, maxSlide)); currentSlide = Math.max(0.6, Math.min(index, maxSlide));
// Calculate the offset for the transform // Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides; const offset = currentSlide * -70 / visibleSlides;
@@ -273,7 +273,7 @@ document.addEventListener('DOMContentLoaded', function() {
breakpoint: 810, breakpoint: 810,
settings: { settings: {
slidesToShow: 1, slidesToShow: 1,
adaptiveHeight: true, adaptiveHeight: false,
arrows: true, arrows: true,
draggable: true, draggable: true,
centerMode: true, centerMode: true,

4
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
View File

@@ -38,8 +38,8 @@ $width-menu-slidedown : 550px;
padding-top: $header-height; padding-top: $header-height;
// display: grid; // display: grid;
// grid-template-columns: repeat(12, 1fr); // grid-template-columns: repeat(12, 1fr);
@media(max-width: 500px){ @media(max-width: 810px){
padding-top: $header-height-pad; padding-top: 180px;
} }
} }
// .content_container{ // .content_container{

12
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -19,7 +19,7 @@
margin-bottom: 0; margin-bottom: 0;
flex: 1 100%; flex: 1 100%;
font-size: 1.5rem; font-size: 1.5rem;
@media(max-width: 500px){ @media(max-width: 1090px){
font-size: 1.3rem; font-size: 1.3rem;
} }
} }
@@ -27,13 +27,14 @@
p:nth-child(3){ p:nth-child(3){
flex: 1 ; flex: 1 ;
padding: 1rem; padding: 1rem;
@media(max-width: 500px){ @media(max-width: 1090px){
padding-left: 0 ; padding-left: 0 ;
font-size: 1rem;
} }
} }
> p:nth-child(2){ > p:nth-child(2){
padding-left: 15rem; padding-left: 15rem;
@media(max-width: 500px){ @media(max-width: 1090px){
padding-left: 0 ; padding-left: 0 ;
} }
} }
@@ -53,7 +54,7 @@
.field_field_texte{ .field_field_texte{
width: 50%; width: 50%;
margin: auto; margin: auto;
@media(max-width: 500px){ @media(max-width: 1090px){
width: 80%; width: 80%;
} }
.colone-picto{ .colone-picto{
@@ -82,10 +83,11 @@
max-width: 30%; max-width: 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media(max-width: 500px){ @media(max-width: 1090px){
padding-right: 1rem; padding-right: 1rem;
flex: 1 30%; flex: 1 30%;
max-width: 50%; max-width: 50%;
font-size: 0.9rem;
} }
&:nth-of-type(1)::before{ &:nth-of-type(1)::before{
background-image: url("../img/fanion.svg"); background-image: url("../img/fanion.svg");

51
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@@ -2,25 +2,29 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.__timeline-arrows{ // .__timeline-arrows{
width: fit-content; // width: fit-content;
margin: auto; // margin: auto;
button{ // button{
background-color: transparent; // background-color: transparent;
border: none; // border: none;
&:hover{ // &:hover{
opacity: 0.5; // opacity: 0.5;
} // }
svg{ // svg{
padding: 0.5rem; // padding: 0.5rem;
} // }
} // }
} // }
h2{ h2{
width: fit-content; width: fit-content;
padding-bottom: 2rem; padding-bottom: 1rem;
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.7rem;
font-weight: bold;
} }
.content-actus{ .content-actus{
.view{ .view{
@@ -42,7 +46,6 @@
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */ -webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */ border-radius: 9px; /* CSS3 */
background-color: red;
height: 250px; height: 250px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
@media(max-width: 550px){ @media(max-width: 550px){
@@ -53,6 +56,10 @@
height: fit-content; height: fit-content;
max-height: 250px; max-height: 250px;
object-fit: cover; object-fit: cover;
-moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */
@media(max-width: 550px){ @media(max-width: 550px){
max-height: 170px; max-height: 170px;
} }
@@ -63,9 +70,21 @@
color: red; color: red;
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 600; font-weight: 600;
display: inline-flex;
align-items: center;
&::before{
content: url('../img/type-actu.svg');
padding-right: 0.4rem;
}
} }
.field_field_date{ .field_field_date{
color: red; color: red;
display: inline-flex;
align-items: center;
&::before{
content: url('../img/date-actu.svg');
padding-right: 0.4rem;
}
} }
.field_title{ .field_title{
h2{ h2{

6
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@@ -9,8 +9,8 @@ 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: 500px){ @media(max-width: 810px){
height: $header-height-pad; height: 170px;
} }
.contextual-region{ .contextual-region{
@@ -123,7 +123,7 @@ header{
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
margin: 0; margin: 0;
@media(max-width: 500px){ @media(max-width: 810px){
top: calc($header-height-pad / 4 ); top: calc($header-height-pad / 4 );
} }
li{ li{

32
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@@ -13,11 +13,11 @@ $slick-loader-path: "./" !default;
$slick-arrow-color: black !default; $slick-arrow-color: black !default;
$slick-dot-color: black !default; $slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default; $slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default; // $slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default; // $slick-next-character: "\2192" !default;
// $slick-prev-character: url('../../img/prev.svg ') !default;
$slick-prev-character: url('../img/prev.svg ') !default;
$slick-next-character: url('../img/next.svg ') !default;
$slick-dot-character: "\2022" !default; $slick-dot-character: "\2022" !default;
$slick-dot-size: 6px !default; $slick-dot-size: 6px !default;
@@ -76,14 +76,20 @@ $slick-opacity-not-active: 0.25 !default;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
top: -20px; top: -1rem;
-webkit-transform: translate(0, -20px); -webkit-transform: translate(0, -1rem);
-ms-transform: translate(0, -20px); -ms-transform: translate(0, -1rem);
transform: translate(0, -20px); transform: translate(0, -1rem);
padding: 0; padding: 0;
padding-bottom: 2rem; padding-bottom: 2rem;
border: none; border: none;
outline: none; outline: none;
@media(max-width:810px){
top: -30px;
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
transform: translate(0, -30px);
}
&:hover, &:focus { &:hover, &:focus {
outline: none; outline: none;
background: transparent; background: transparent;
@@ -107,7 +113,10 @@ $slick-opacity-not-active: 0.25 !default;
} }
.slick-prev { .slick-prev {
left: 45%; left: 46%;
@media(max-width:810px){
left: 36%;
}
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
right: -25px; right: -25px;
@@ -121,7 +130,10 @@ $slick-opacity-not-active: 0.25 !default;
} }
.slick-next { .slick-next {
right: 45%; right: 48%;
@media(max-width:810px){
right: 42%;
}
[dir="rtl"] & { [dir="rtl"] & {
left: -25px; left: -25px;
right: auto; right: auto;

10
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -131,7 +131,7 @@
font-size: 0.6rem; font-size: 0.6rem;
position: relative; position: relative;
top: -10px; top: -10px;
@media(max-width:550px){ @media(max-width:1090px){
font-size: 1.2rem; font-size: 1.2rem;
} }
.field_field_date_de_annee{ .field_field_date_de_annee{
@@ -176,10 +176,10 @@
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: 65%;
.field_field_titre{ .field_field_titre{
font-size: 0.6rem; font-size: 0.5rem;
@media(max-width:700px){ @media(max-width:10900px){
font-size: 1rem; font-size: 1rem;
} }
} }
@@ -187,7 +187,7 @@
p{ p{
font-size: 0.5rem !important; font-size: 0.5rem !important;
margin: 0; margin: 0;
@media(max-width:700px){ @media(max-width:1090px){
font-size: 1rem !important; font-size: 1rem !important;
} }
} }