responsive slide ressources

This commit is contained in:
2025-06-08 22:08:11 +02:00
parent c30d886bb7
commit 8c365d816a
5 changed files with 122 additions and 63 deletions
@@ -20,7 +20,7 @@
margin-left: 28%;
@media (max-width:810px) {
margin-left: 0;
margin-left: 2rem;
text-align: left;
line-height: 4rem;
}
@@ -43,19 +43,20 @@
margin: auto;
margin-left: 28%;
@media (max-width:810px) {
margin-left: 0;
width: 90%;
margin-left: 2rem;
width: 85%;
}
@media (max-width:479px) {
order: 1;
margin-left: 0;
margin-left: 2rem;
// margin-right: 2rem;
}
.config_pages--base-de-donnees--full{
grid-column: 1 / span 5;
@media (max-width: 810px){
padding-top: 1rem;
padding-left: 2rem;
// padding-left: 2rem;
margin-top:1rem;
}
@media (max-width: 479px){
@@ -486,6 +487,9 @@
height: 100%;
width: 110vw;
z-index: 0;
@media (max-width: 810px){
left: 0;
}
}
> * {
position: relative;
@@ -505,6 +509,10 @@
margin-block: 0em;
@media (max-width: 810px){
padding-left: 2rem;
width: 70%;
}
@media (max-width: 479px){
width: 65% !important;
}
}
h3.type-publications-issues-du-programme-eqld {
@@ -518,6 +526,7 @@
&:before{
content:url("../images/pictos/picto-ressource-paroleslaureats.svg");
padding-right: 1rem;
}
}
h3.type-les-projets-en-images {
@@ -525,12 +534,14 @@
&:before{
content:url("../images/pictos/picto-ressource-projetsimages.svg");
padding-right: 1rem;
}
}
h3.type-presse {
&:before{
content:url("../images/pictos/picto-ressource-presse.svg");
padding-right: 1rem;
}
}
@@ -557,7 +568,11 @@
}
@media (max-width: 810px){
left: 81vw;
top: -4.3rem;
// top: -4.3rem;
}
@media (max-width: 479px){
left: 76vw;
top: -1.5rem;
}
}
@@ -580,19 +595,29 @@
padding-left: 2rem;
flex-direction: column;
.views-row{
width: 100%;
width: 100% !important;
}
}
.slick-next::before{
content:url("../images/pictos/fleche-droite-dans-rond.png");
display: block;
// display: block;
display: inline-block;
@media (max-width: 810px){
transform: scale(0.5); /* Réduction à 50% */
transform-origin: top left; /* Point dancrage du redimensionnement */
}
}
.slick-prev::before{
content:url("../images/pictos/fleche-droite-dans-rond.png");
display: block;
display: inline-block;
transform: scaleX(-1);
// display: none;
@media (max-width: 810px){
transform: scale(-0.5, 0.5);
transform-origin: top right; /* Point dancrage du redimensionnement */
}
}
.slick-prev.slick-disabled::before,
.slick-next.slick-disabled::before{
@@ -601,6 +626,20 @@
.slick-next {
right: 10%;
}
@media (max-width: 810px){
.slick-prev {
left: -10%;
}
.slick-next{
right: 2%;
}
}
@media (max-width: 479px){
.slick-prev {
left: -15%;
}
}
}
}
}
@@ -1,7 +1,9 @@
article.node-type-ressource{
margin-bottom: 1rem ;
padding-right: 1rem;
h2{text-align: left !important}
h2{
text-align: left !important;
}
.ext{
color: black;
}
@@ -55,7 +57,9 @@ article.node-type-ressource{
font-weight: 900;
font-style: normal;
}
@media (max-width: 810px) {
line-height: 0 !important;
}
}
}
.field--name-field-auteur-s-{
@@ -253,45 +257,9 @@ article.node-type-ressource{
}
}
// &.type-les-projets-en-images{
// width: 500px !important;
// .wrapper-ressource{
// display: grid;
// grid-template-columns: 3fr 1fr;
// // grid-template-rows: repeat(5, 1fr);
// .field--name-field-type-de-ressource{
// order: 2;
// grid-row: 2;
// grid-column: 1 /span 2;
// margin-bottom: 0.5rem;
// }
// .field--name-field-type-de-media{
// order: 1;
// grid-row: 1;
// grid-column: 1 /span 2;
// }
// .field--name-field-images{
// order: 3;
// grid-column: 1 ;
// grid-row: 3 /span 5;
// height: auto;
// // width: 90%;
// width: 400px !important;
// img{
// height: auto;
// width: 90%;
// border: 1px solid #a3a3a3;
// }
// }
// .field--name-title,
// .field--name-field-sous-titre,
// .field--name-field-auteur-s-,
// .field--name-field-edition,
// .field--name-field-date-de-parution,
// .field--name-field-mots-clefs{
// grid-column: 2;
// }
article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
display: flex;
background: lawngreen;
}
// }
// }
}