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

avancées centre de ressources

Browse Source
This commit is contained in:
Valentin Le Moign
2025-03-28 15:10:03 +01:00
parent a1916e3219
commit d805ef35b1
14 changed files with 380 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -959,7 +959,8 @@ body{
.partie-title,
> .chiffres-cles,
> .entretien,
> .gallerie {
> .gallerie,
&.related-ressources {
> h3 {
position: relative;
display: inline-block;
@@ -1228,7 +1229,12 @@ body{
}
#centre-de-ressource {
> .intro {
font-size: $sm-font-size-mobile;
width: 66%;
margin-bottom: 4rem;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
> .type-section {
> h3 {
@@ -1245,46 +1251,6 @@ body{
font-size: $l-font-size-desktop;
}
}
> .ressource-list > div {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: start;
gap: 2rem;
margin-bottom: 2.5rem;
> .ressource-item {
display: flex;
gap: 1.5rem;
cursor: pointer;
transform: scale(1);
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.05);
}
> figure {
width: 40%;
margin: 0;
}
> div {
width: 50%;
> h4 {
font-size: $m-font-size-mobile;
font-family: 'Joost', sans-serif;
margin: 0;
margin-bottom: 0.5rem;
@media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop;
}
}
> p {
margin: 0;
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
}
}
}
> .button-container {
display: flex;
justify-content: center;
@@ -1410,15 +1376,27 @@ body{
background-size: 300px;
background-size: repeat;
}
.related-etape-label {
display: inline-block;
padding: 0.5rem 1rem;
padding-left: calc($modale-x-padding / 2);
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
.related-etape-links {
position: absolute;
//bottom: calc(($modale-bottom-padding / 2) * -1);
width: 100%;
box-sizing: border-box;
padding: 0 calc($modale-x-padding / 2);
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
width: 75%;
&:not(:has(.solo)) {
width: 100%;
position: absolute;
grid-template-rows: 1fr 1fr;
}
@media screen and (min-width: $desktop-min-width) {
grid-template-columns: 1fr 1fr;
margin-top: 2.5rem;
@@ -1508,6 +1486,60 @@ body{
}
}
}
.ressource-list > div:not(.ressource-item),
.ressource-list.sm-ressource-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: start;
gap: 2rem;
margin-bottom: 2.5rem;
&.sm-ressource-list {
margin-top: 2rem;
grid-template-columns: repeat(2, 1fr);
}
> .ressource-item > div {
display: flex;
gap: 1.5rem;
cursor: pointer;
transform: scale(1);
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.05);
}
> figure {
width: 40%;
margin: 0;
}
> div {
width: 50%;
> h4 {
font-size: $m-font-size-mobile;
font-family: 'Joost', sans-serif;
margin: 0;
margin-bottom: 0.5rem;
@media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop;
}
}
> p {
margin: 0;
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
}
}
}
}
> #animation-toggle {
transition: opacity 0.3s ease-out;