modifs couleurs etc

user/themes/figureslibres-v2/css/theme.css

@@ -179,6 +179,7 @@ body {
   overflow-x: hidden;
   color: #0e1229;
   background-color: #f5f5f5;
+  transition: background-color 0.4s ease-out;
 }
 body header {
   position: fixed;
@@ -189,11 +190,12 @@ body header {
 }
 body header #nav-container {
   height: 7vh;
-  background-color: #f5f5f5;
   padding: 0 3vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background-color: #f5f5f5;
+  transition: background-color 0.4s ease-out;
 }
 body header #nav-container h1 {
   cursor: pointer;
@@ -211,7 +213,7 @@ body header nav {
   display: flex;
   align-items: center;
   opacity: 0;
-  transition: opacity 0.4s ease-out, top 0.7s ease-out;
+  transition: opacity 0.4s ease-out, top 0.7s ease-out, background-color 0.4s ease-out;
 }
 body header nav #crossMenu {
   position: absolute;
@@ -253,6 +255,11 @@ body header:after {
   width: 100%;
   height: 4vh;
   background: linear-gradient(to bottom, #f5f5f5, #f5f5f500);
+  opacity: 1;
+  transition: opacity 0.4s ease-out;
+}
+body header.plain_bg:after {
+  opacity: 0;
 }
 body main {
   position: relative;
@@ -274,7 +281,7 @@ body main .content h2 a, body main .content p a, body main .content ul a {
   transition: text-underline-offset 0.4s ease-out;
 }
 body main .content h2 a:hover, body main .content p a:hover, body main .content ul a:hover {
-  text-underline-offset: 0.15em;
+  text-underline-offset: 0.15em !important;
 }
 body main .content .projet-card {
   cursor: pointer;
@@ -331,6 +338,9 @@ body main #index-content {
   flex-direction: column;
   align-items: center;
 }
+body main #index-content .animateText {
+  text-decoration: underline 1px;
+}
 body main #index-content #loader-index {
   position: absolute;
   height: 80vh;
@@ -362,14 +372,10 @@ body main #index-content #main-p-index #culturelle {
   font-weight: bold;
   font-style: italic;
 }
-body main #index-content #main-p-index #logicielslibres {
-  font-family: Rumeur, sans-serif;
-  font-weight: bold;
-}
 body main #index-content #extrait-projets > div {
   max-height: 0vh;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2, 1fr);
   gap: 0px 20px;
   align-items: flex-start;
 }
@@ -433,7 +439,7 @@ body main #index-content #second-p-index #projets {
 body main #index-content #commanditaires-grid {
   width: 85vw;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2, 1fr);
   gap: 25px 40px;
   align-items: center;
 }
@@ -472,28 +478,45 @@ body main #projets-index #filter-index {
   text-align: center;
   width: 100%;
   margin-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 body main #projets-index #filter-index .filter-button {
   cursor: pointer;
+  filter: grayscale(1);
   opacity: 0.4;
-  transition: opacity 0.4s ease-out;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.95em;
+  min-height: 1.25em;
+  display: inline-block;
+  transition: opacity 0.4s ease-out, filter 0.4s ease-out;
+}
+body main #projets-index #filter-index .filter-button:hover {
+  filter: grayscale(0) !important;
+  opacity: 1 !important;
 }
 body main #projets-index #filter-index p {
-  margin-bottom: 0;
+  margin-bottom: 1rem;
 }
 body main #projets-index #filter-index #publique-filter {
   font-family: PlayfairDisplay, serif;
   font-style: italic;
+  background-color: #ffaeab;
 }
 body main #projets-index #filter-index #sociale-filter {
   font-family: ManifontGrotesk, sans-serif;
   font-weight: bold;
   font-style: italic;
+  background-color: #71ff94;
 }
 body main #projets-index #filter-index #culturelle-filter {
   font-family: Avara, serif;
   font-weight: bold;
   font-style: italic;
+  background-color: #feff74;
 }
 body main #projets-index hr {
   width: 66%;
@@ -561,31 +584,18 @@ body main #reader #header-project {
   position: fixed;
   height: 6vh;
   width: 100%;
-  background-color: #f5f5f5;
-  top: -9vh;
+  top: -4vh;
   transition: top 0.4s ease-out;
 }
-body main #reader #header-project .info-project-publique span {
-  font-family: PlayfairDisplay, serif;
-  font-style: italic;
-}
-body main #reader #header-project .info-project-sociale span {
-  font-family: ManifontGrotesk, sans-serif;
-  font-weight: bold;
-  font-style: italic;
-}
-body main #reader #header-project .info-project-culturelle span {
-  font-family: Avara, serif;
-  font-weight: bold;
-  font-style: italic;
-}
 body main #reader #header-project h2 {
+  margin: 0;
   overflow: hidden;
   position: absolute;
-  width: 80%;
+  width: 100%;
+  height: 100%;
   padding: 3px 0;
-  margin-top: 1.8vh;
-  margin-left: 3vw;
+  padding-top: 1.8vh;
+  padding-left: 3vw;
   font-size: 1.2em;
 }
 body main #reader #header-project h2 span {
@@ -598,6 +608,29 @@ body main #reader #header-project h2 .scrollText:after {
   padding-left: 20px;
   white-space: nowrap;
 }
+body main #reader #header-project h2.info-project-publique {
+  background: linear-gradient(to bottom, #ffaeab, #ffaeab 60%, rgba(255, 174, 171, 0));
+}
+body main #reader #header-project h2.info-project-publique span {
+  font-family: PlayfairDisplay, serif;
+  font-style: italic;
+}
+body main #reader #header-project h2.info-project-sociale {
+  background: linear-gradient(to bottom, #71ff94, #71ff94 60%, rgba(113, 255, 148, 0));
+}
+body main #reader #header-project h2.info-project-sociale span {
+  font-family: ManifontGrotesk, sans-serif;
+  font-weight: bold;
+  font-style: italic;
+}
+body main #reader #header-project h2.info-project-culturelle {
+  background: linear-gradient(to bottom, #feff74, #feff74 60%, rgba(254, 255, 116, 0));
+}
+body main #reader #header-project h2.info-project-culturelle span {
+  font-family: Avara, serif;
+  font-weight: bold;
+  font-style: italic;
+}
 body main #reader #header-project #gradient-long-title {
   position: absolute;
   height: 4vh;
@@ -606,14 +639,6 @@ body main #reader #header-project #gradient-long-title {
   right: 16.5%;
   background: linear-gradient(to left, #f5f5f5, #f5f5f500);
 }
-body main #reader #header-project:after {
-  position: absolute;
-  top: 6vh;
-  content: "";
-  height: 4vh;
-  width: 100%;
-  background: linear-gradient(#f5f5f5, rgba(245, 245, 245, 0));
-}
 body main #reader #header-project + a {
   z-index: 2;
 }
@@ -624,13 +649,54 @@ body main #reader #close-project {
   width: calc(25px - 5px);
   height: calc(23px - 5px);
 }
-body main #reader #cover-image-mobile {
+body main #reader figure#cover-image-mobile {
   margin-top: -2vh;
   margin-bottom: 2vh;
 }
-body main #reader #cover-image {
+body main #reader figure#cover-image {
   display: none;
 }
+body main #reader figure#cover-image-mobile,
+body main #reader figure#cover-image {
+  position: relative;
+  margin-top: 3vh;
+}
+body main #reader figure#cover-image-mobile img,
+body main #reader figure#cover-image img {
+  filter: grayscale(0);
+  transition: filter 0.4s ease-out;
+  mix-blend-mode: normal;
+}
+body main #reader figure#cover-image-mobile:hover img,
+body main #reader figure#cover-image:hover img {
+  filter: grayscale(1);
+  mix-blend-mode: darken;
+}
+body main #reader figure#cover-image-mobile::before,
+body main #reader figure#cover-image::before {
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.4s ease-out;
+}
+body main #reader figure#cover-image-mobile:hover::before,
+body main #reader figure#cover-image:hover::before {
+  opacity: 1;
+}
+body main #reader figure#cover-image-mobile.sociale:hover::before,
+body main #reader figure#cover-image.sociale:hover::before {
+  background-color: #71ff94;
+}
+body main #reader figure#cover-image-mobile.culturelle:hover::before,
+body main #reader figure#cover-image.culturelle:hover::before {
+  background-color: #feff74;
+}
+body main #reader figure#cover-image-mobile.publique:hover::before,
+body main #reader figure#cover-image.publique:hover::before {
+  background-color: #ffaeab;
+}
 body main #reader #info-project {
   align-self: flex-start;
 }
@@ -664,8 +730,38 @@ body main #reader #project-description {
   margin-top: 2.2vh;
 }
 body main #reader #project-images-grid figure {
+  position: relative;
   margin-top: 3vh;
 }
+body main #reader #project-images-grid figure img {
+  filter: grayscale(0);
+  transition: filter 0.4s ease-out;
+  mix-blend-mode: normal;
+}
+body main #reader #project-images-grid figure:hover img {
+  filter: grayscale(1);
+  mix-blend-mode: darken;
+}
+body main #reader #project-images-grid figure::before {
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.4s ease-out;
+}
+body main #reader #project-images-grid figure:hover::before {
+  opacity: 1;
+}
+body main #reader #project-images-grid figure:hover.sociale::before {
+  background-color: #71ff94;
+}
+body main #reader #project-images-grid figure:hover.publique::before {
+  background-color: #ffaeab;
+}
+body main #reader #project-images-grid figure:hover.culturelle::before {
+  background-color: #feff74;
+}
 body main #reader hr {
   margin-bottom: 2vh;
   width: 66%;
@@ -688,12 +784,15 @@ body main #reader #related-pages h3 {
   margin-top: 2vh;
 }
 body main #reader #related-pages #related-grid {
-  margin-bottom: 5vh;
   width: 80%;
 }
 body main #reader #related-pages #related-grid .card-displayed {
   margin-top: 1.5vh;
 }
+body main #reader #related-pages p {
+  margin-top: 3vh;
+  margin-bottom: 5vh;
+}
 body main #reader .swiper {
   position: fixed;
   top: 0;
@@ -721,8 +820,8 @@ body main #reader .swiper .swiper-wrapper .swiper-slide {
   justify-content: center;
 }
 body main #reader .swiper .swiper-wrapper .swiper-slide img {
-  max-height: 100%;
-  max-width: 100%;
+  max-height: 90%;
+  max-width: 90%;
   object-fit: cover;
 }
 body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
@@ -769,22 +868,6 @@ body footer p a {
   body header nav {
     height: 100vh;
   }
-  body .content .card-displayed figure a figcaption {
-    opacity: 0;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px;
-    background: #0e1229;
-    color: #f5f5f5;
-    font-size: 0.75em;
-    border-radius: 0 0 10px 10px;
-  }
-  body .card-displayed:hover figure a figcaption {
-    opacity: 1;
-  }
   body main #index-content {
     min-height: 80vh;
     display: flex;
@@ -792,12 +875,12 @@ body footer p a {
     justify-content: center;
   }
   body main #index-content #extrait-projets > div {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
   body main #index-content #extrait-projets > div div:last-of-type {
     overflow-x: hidden;
     text-align: right;
-    grid-column-end: span 4;
+    grid-column-end: span 2;
   }
   body main #index-content #extrait-projets > div div:last-of-type p {
     display: inline-block;
@@ -811,13 +894,13 @@ body footer p a {
   }
   body main #index-content #commanditaires-grid {
     width: auto;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(5, 1fr);
   }
   body main #projets-index {
     width: auto;
   }
   body main #projets-index #filter-index {
-    display: flex;
+    justify-content: start;
     flex-direction: row;
     max-width: 100%;
   }
@@ -831,15 +914,13 @@ body footer p a {
   body main #projets-index .projets-grid {
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
     gap: 0 10px;
+    align-items: start;
   }
   body main #projets-index .projets-grid > div {
     width: 100%;
   }
-  body main #reader #header-project h2 {
-    margin-top: 1vh;
-  }
   body main #reader #close-project {
     width: 12px;
     height: 10px;
@@ -869,7 +950,7 @@ body footer p a {
   body main #reader #project-images-grid {
     width: auto;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
     grid-gap: 1em;
   }
   body main #reader #project-images-grid figure {
@@ -885,19 +966,22 @@ body footer p a {
   body main #reader #project-images-grid figure:last-child:nth-child(odd) {
     grid-column: span 2;
   }
-  body main #reader #related-grid {
+  body main #reader #related-pages #related-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
     width: auto !important;
     grid-column-gap: 10%;
-    margin-bottom: 6vh !important;
   }
-  body main #reader #related-grid .card-displayed {
+  body main #reader #related-pages #related-grid .card-displayed {
     margin-top: 2vh !important;
+    width: 100%;
   }
-  body main #reader #related-grid .card-displayed figure {
+  body main #reader #related-pages #related-grid .card-displayed figure {
     min-height: 80px !important;
-    min-width: 15vw;
+  }
+  body main #reader #related-pages p {
+    margin-top: 3vh;
+    margin-bottom: 6vh !important;
   }
   body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
     bottom: unset;
@@ -928,11 +1012,11 @@ body footer p a {
     display: none;
   }
   body header nav {
+    background-color: #f5f5f5;
     position: relative;
     top: 0;
     opacity: 1;
     height: 7vh;
-    background-color: #f5f5f5;
     justify-content: center;
   }
   body header nav #crossMenu {
@@ -989,18 +1073,52 @@ body footer p a {
     justify-content: center;
     margin-top: calc(7vh + 2vh + 30px);
   }
+  body main #index-content > #extrait-projets figure a figcaption {
+    background-color: #0e1229;
+    color: #f5f5f5;
+  }
   body main .content {
     width: 65vw;
     padding: 0;
   }
+  body main .content .card-displayed figure a figcaption {
+    opacity: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    color: #0e1229;
+    font-size: 0.75em;
+    border-radius: 0 0 10px 10px;
+  }
+  body main .content .culturelle-card figure a figcaption {
+    background-color: #feff74;
+  }
+  body main .content .sociale-card figure a figcaption {
+    background-color: #71ff94;
+  }
+  body main .content .publique-card figure a figcaption {
+    background-color: #ffaeab;
+  }
+  body main .card-displayed:hover figure a figcaption {
+    opacity: 1;
+  }
+  body main #index-content #extrait-projets > div {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  body main #index-content #extrait-projets > div div:last-of-type {
+    grid-column-end: span 4;
+  }
   body main #index-content #commanditaires-grid {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(8, 1fr);
   }
   body main #projets-index {
     width: 65vw;
   }
-  body main #projets-index #filter-index .filter-button:hover {
-    opacity: 1 !important;
+  body main #projets-index .projets-grid {
+    grid-template-columns: repeat(4, 1fr);
   }
   body main #text-content .text-item {
     width: 70%;
@@ -1017,30 +1135,37 @@ body footer p a {
   }
   body main #reader {
     margin-top: -10vh;
-    width: 40vw;
+    width: 60vw;
   }
   body main #reader #header-project {
     width: 100%;
   }
   body main #reader #header-project h2 {
-    width: 35vw;
-    margin-left: 29.5vw;
+    width: 100%;
     padding: 0;
   }
   body main #reader #header-project h2 span {
+    padding-left: 20vw;
+    padding-top: 1.4vh;
     height: 1.25em;
-    padding-top: 5px;
   }
   body main #reader #header-project #gradient-long-title {
     right: 34.2vw;
   }
+  body main #reader #cover-image {
+    width: 66.666%;
+    box-sizing: border-box;
+    margin: 0 10vw;
+  }
   body main #reader #info-project {
     width: 100%;
+    box-sizing: border-box;
+    padding: 0 10vw;
     margin-top: 2vh;
     margin-bottom: 4vh;
   }
   body main #reader #info-project h2 {
-    min-width: 100%;
+    min-width: 95%;
     border-right: solid 1px rgba(0, 0, 0, 0.4);
     margin-top: 0;
     margin-bottom: 1vh;
@@ -1054,17 +1179,18 @@ body footer p a {
   body main #reader #close-project {
     width: 25px;
     height: 23px;
-    top: 6vh;
+    top: calc(4vh + 11.5px);
     right: calc(30vw - 25px - 2vw);
     transform: scale(1, 1);
     transition: top 0.4s ease-out, right 0.4s ease-out, transform 0.4s ease-out;
   }
   body main #reader .scrolled-cross {
     top: 1.4vh !important;
-    right: 30vw !important;
+    right: 20vw !important;
     transform: scale(0.7, 0.7) !important;
   }
   body main #reader #project-description {
+    padding: 0 10vw;
     align-self: flex-start;
   }
   body main #reader #project-images-grid {
@@ -1081,11 +1207,15 @@ body footer p a {
     margin-top: 0;
   }
   body main #reader #related-pages #related-grid {
+    width: 100%;
     grid-column-gap: 3%;
   }
   body main #reader #related-pages #related-grid div figure {
     min-width: 10vw;
   }
+  body main #reader #related-pages p {
+    align-self: flex-end;
+  }
   body footer {
     height: 4vh;
     width: auto;
@@ -1110,7 +1240,12 @@ body footer p a {
     height: 54px;
   }
   body main #projets-index .projets-grid {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    column-gap: 2em;
+    grid-template-columns: repeat(4, 1fr);
+  }
+  body main #reader #related-pages {
+    padding: 0 10vw;
+    box-sizing: border-box;
   }
 }
 

user/themes/figureslibres-v2/js/script.js

@@ -32,7 +32,7 @@ let isMobileNavOpen = false,
 // MAIN FUNCTIONS
 function initBarba() {
   barba.init({
-    prefetchIgnore: true,
+    //prefetchIgnore: true,
     transitions: [{
       name: 'opacity-transition',
       leave(data) {
@@ -51,13 +51,12 @@ function initBarba() {
     if (isMobileNavOpen) { toggleMobileNav() }
     if ($(data.current.container).attr('id') == 'projets-index') { resetFilters() }
     if ($(data.current.container).attr('id') == 'text-content' ) { hideFooter() }
+    setBgColor(color_bg)
   })
   barba.hooks.afterLeave((data) => {
-    if ($(data.current.container).attr('id') == 'reader') {
-      if ($(data.next.container).attr('id') != 'reader') {
-        leaveReader()
-        $('#nav-container h1').empty().append(currentPage.text())
-      }
+    if ($(data.current.container).attr('id') == 'reader' && $(data.next.container).attr('id') != 'reader') {
+      leaveReader()
+      $('#nav-container h1').empty().append(currentPage.text())
     }
   })
   barba.hooks.beforeEnter((data) => {
@@ -100,7 +99,7 @@ function initBarba() {
     }
     if ($(data.next.container).attr('id') == 'reader') {
      displayReader()
-   }
+    }
   })
 }
 
@@ -163,6 +162,22 @@ function refreshUiOnResize() {
   hideFooterOnResize()
   hideMobileNavOnResize()
   checkTitleAutoScroll()
+  function menuViewJustChanged(callback) {
+    let prevDeviceIsDesktop = isDesktopDevice;
+    setTimeout(() => callback(!(isDesktopDevice === prevDeviceIsDesktop)), 50);
+  }
+  menuViewJustChanged(result => {
+    if (result) {
+      currentColor = $('body').css('background-color')
+      if (isDesktopDevice) {
+        $('nav').css('background-color', currentColor)
+        $('#nav-container').css('background-color', color_bg)
+      } else {
+        $('nav').css('background-color', color_main)
+        $('#nav-container').css('background-color', currentColor)
+      }
+    }
+  })
 }
 
 function triggerLazyLoading() {
@@ -237,32 +252,82 @@ function changeMobileTitle() {
   $('#nav-container h1').empty().append(currentPage.text())
 }
 
+
+
+const color_publique = "#ffaeab";
+const color_sociale = "#71ff94";
+const color_culturelle = "#feff74";
+const color_commanditaire = "#fabbde";
+const color_figureslibres = "#82f8ee";
+const color_projets = "#4bffc9";
+
+const color_bg = "#f5f5f5";
+const color_main = "#0e1229";
+
+let isExtraitOpen = false,
+isCommanditairesOpen = false,
+quelExtrait
+
+function setBgColor(color) {
+  $('body').css('background-color', color);
+  if (isDesktopDevice) {
+    $('nav').css('background-color', color)
+  } else {
+    $('#nav-container').css('background-color', color)
+  }
+  if (color === color_bg) {
+    $('header').removeClass('plain_bg');
+  } else {
+    $('header').addClass('plain_bg');
+  }
+}
+
+
+
 // index interaction
 function toggleIndexContent(closeEverything) {
-  let isTextOpen = false,
-      isCommanditairesOpen = false,
-      isExtraitOpen = false,
-      quelExtrait
+  let isTextOpen = false
 
   if (closeEverything) {
     closeEverything()
   }
 
-  $('#second-p-index, #commanditaires-grid, #extrait-publique, #extrait-social, #extrait-culturelle').children().fadeOut()
+  $('#figureslibres, #publique, #sociale, #culturelle, #commanditaires, #projets')
+  .on('mouseleave', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_bg) : null)
+
+  $('#figureslibres')
+  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_figureslibres) : null)
+
+  $('#publique')
+  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_publique) : null)
+
+  $('#sociale')
+  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_sociale) : null)
+
+  $('#culturelle')
+  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_culturelle) : null)
+
+  $('#commanditaires')
+  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_commanditaire) : null)
+
+  $('#projets')
+  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_projets) : null)
+
+  $('#second-p-index, #commanditaires-grid, #extrait-publique, #extrait-social, #extrait-culturelle')
+  .children().fadeOut()
 
   $('#arrowIndex').click( () => {
     if (!isTextOpen && !isExtraitOpen) {
-      if (isDesktopDevice) {
-        displayContent($('#second-p-index'), '70vh')
-      } else {
-        displayContent($('#second-p-index'), '90vh')
-      }
+      displayContent($('#second-p-index'), isDesktopDevice ? '70vh' : '90vh')
       turnArrow('down')
       isTextOpen = true
     } else {
       if (isExtraitOpen) {
         hideContent($('#extrait-' + quelExtrait))
-        $('#' + quelExtrait).css('text-decoration', 'none')
+        $('#' + quelExtrait).css({
+          'text-underline-offset': '0.1em',
+          'text-decoration-thickness': '1px',
+        })
         isExtraitOpen = false
         turnArrow('top')
       }
@@ -273,7 +338,9 @@ function toggleIndexContent(closeEverything) {
       }
       if (isCommanditairesOpen) {
         hideContent($('#commanditaires-grid'))
-        $('#commanditaires').css('text-decoration', 'none')
+        $('#commanditaires').css({
+          'text-underline-offset': '0.1em',
+          'text-decoration-thickness': '1px',})
         isCommanditairesOpen = false
       }
     }
@@ -292,18 +359,20 @@ function toggleIndexContent(closeEverything) {
           case 'figureslibres':
             changeMenuSelected($('nav li a[href$=collectif]').parent())
             break
-          case 'logicielslibres':
+/*           case 'logicielslibres':
             changeMenuSelected($('nav li a[href$=logiciels-libres]').parent())
             break
-          case 'projets':
+ */          case 'projets':
             changeMenuSelected($('nav li a[href$=projets]').parent())
             break
         }
+        setBgColor(color_bg)
     }
   })
 
   $('#extrait-projets .projets-link-filter').click(() => {
     changeMenuSelected($('nav li a[href$=projets]').parent())
+    setBgColor(color_bg)
   })
 
   function toggleExtrait(category) {
@@ -314,38 +383,65 @@ function toggleIndexContent(closeEverything) {
       }
       if (isCommanditairesOpen) {
         hideContent($('#commanditaires-grid'))
-        $('#commanditaires').css('text-decoration', 'none')
+        $('#commanditaires').css({
+          'text-underline-offset': '0.1em',
+          'text-decoration-thickness': '1px',
+        })
         isCommanditairesOpen = false
       }
-      displayContent($('#extrait-' + category), '80vh')
+      displayContent($('#extrait-' + category), '100vh')
       turnArrow('down')
-      $('#' + category).css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'})
+      $('#' + category).css({
+        'text-underline-offset': '0.3em',
+        'text-decoration-thickness': '2px',
+      })
+
       isExtraitOpen = true
       quelExtrait = category
-    } else if (isExtraitOpen && quelExtrait != category) {
-      hideContent($('#extrait-' + quelExtrait))
-      $('#' + category).css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'})
-      $('#' + quelExtrait).css('text-decoration', 'none')
-      setTimeout(() => {
-        displayContent($('#extrait-' + category), '80vh')
-        quelExtrait = category
-      }, 1000)
-    } else if (isExtraitOpen && quelExtrait == category) {
-      hideContent($('#extrait-' + category))
-      turnArrow('top')
-      $('#' + category).css('text-decoration', 'none')
-      isExtraitOpen = false
+    } else {
+      if (quelExtrait != category) {
+        hideContent($('#extrait-' + quelExtrait))
+        $('#' + category).css({
+          'text-underline-offset': '0.3em',
+          'text-decoration-thickness': '2px',
+        })
+        $('#' + quelExtrait).css({
+          'text-underline-offset': '0.1em',
+          'text-decoration-thickness': '1px',
+        })
+        setTimeout(() => {
+          displayContent($('#extrait-' + category), '80vh')
+          quelExtrait = category
+        }, 1000)
+      } else {
+        hideContent($('#extrait-' + category))
+        turnArrow('top')
+        $('#' + category).css({
+          'text-underline-offset': '0.1em',
+          'text-decoration-thickness': '1px',
+        })
+        setBgColor(color_bg)
+        isExtraitOpen = false
+      }
     }
   }
 
   function toggleCommanditaires() {
     if (!isCommanditairesOpen) {
       displayContent($('#commanditaires-grid'), '150vh')
-      $('#commanditaires').css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'})
+      $('#commanditaires').css({
+        'text-underline-offset': '0.3em',
+        'text-decoration-thickness': '2px',
+      })
+      setBgColor(color_commanditaire)
       isCommanditairesOpen = true
     } else {
       hideContent($('#commanditaires-grid'))
-      $('#commanditaires').css('text-decoration', 'none')
+      $('#commanditaires').css({
+        'text-underline-offset': '0.1em',
+        'text-decoration-thickness': '1px',
+      })
+      setBgColor(color_bg)
       isCommanditairesOpen = false
     }
   }
@@ -357,16 +453,24 @@ function toggleIndexContent(closeEverything) {
     }
     if (isExtraitOpen) {
       hideContent($('#extrait-' + quelExtrait))
-      $('#' + quelExtrait).css('text-decoration', 'none')
+      $('#' + quelExtrait).css({
+        'text-underline-offset': '0.1em',
+        'text-decoration-thickness': '1px',
+      })
       isExtraitOpen = false
     }
     if (isCommanditairesOpen) {
       hideContent($('#commanditaires-grid'))
-      $('#commanditaires').css('text-decoration', 'none')
+      $('#commanditaires').css({
+        'text-underline-offset': '0.1em',
+        'text-decoration-thickness': '1px',
+      })
       isCommanditairesOpen = false
     }
     turnArrow('top')
+    setBgColor(color_bg);
   }
+
 }
 
 function turnArrow(direction) {
@@ -382,10 +486,25 @@ function turnArrow(direction) {
         'margin-bottom': '0vh'
     })
     $('#arrow-container .picto').attr('id', 'arrowIndex')
+    setBgColor(color_bg);
   }
 }
 
 function displayContent(content, maxHeight) {
+  switch (content[0].id) {
+    case 'extrait-publique':
+      setBgColor(color_publique)
+      break
+    case 'extrait-sociale':
+      setBgColor(color_sociale)
+      break
+    case 'extrait-culturelle':
+      setBgColor(color_culturelle)
+      break
+    default:
+      break
+  }
+
   content.children().fadeIn()
   setTimeout( () => {
     content.css({
@@ -475,7 +594,10 @@ function filterCards(utilite) {
       }
     })
 
-    $('#' + utilite + '-filter').css('opacity', 1)
+    $('#' + utilite + '-filter').css({
+      'opacity': 1,
+      'filter': 'grayscale(0)'
+    })
 
     Object.keys(filterObj).forEach(v => filterObj[v] = false)
 
@@ -487,12 +609,18 @@ function filterCards(utilite) {
     checkFilter()
 
     if (filterIsOn) {
-      $('#' + utilite + '-filter').css('opacity', 0.4)
+      $('#' + utilite + '-filter').css({
+        'opacity': 0.4,
+        'filter': 'grayscale(1)'
+      })
       $('.projets-grid div').each(function () { // display all cards
         $(this).removeClass('card-hidden').addClass('card-displayed')
       })
     } else {
-      $('#' + utilite + '-filter').css('opacity', 1)
+      $('#' + utilite + '-filter').css({
+        'opacity': 1,
+        'filter': 'grayscale(0)'
+      })
       $('.' + utilite + '-card').each(function () { // only display cards from selected category
         $(this).removeClass('card-hidden').addClass('card-displayed')
       })
@@ -504,13 +632,19 @@ function filterCards(utilite) {
     checkFilter()
 
     if (filterIsOn) {
-      $('#' + utilite + '-filter').css('opacity', 0.4)
+      $('#' + utilite + '-filter').css({
+        'opacity': 0.4,
+        'filter': 'grayscale(1)'
+      })
       $('.' + utilite + '-card').each(function () { // only display cards from selected category
         $(this).removeClass('card-displayed').addClass('card-hidden')
       })
     } else {
       $('.filter-button').each(function() {
-        $(this).css('opacity', 0.4)
+        $(this).css({
+          'opacity': 0.4,
+          'filter': 'grayscale(1)'
+        })
       })
       $('.projets-grid div').each(function () { // hide all cards
         $(this).removeClass('card-hidden').addClass('card-displayed')
@@ -565,6 +699,9 @@ function filterWhenEntering() {
 
 // display reader
 function displayReader() {
+  $('header').fadeOut()
+  projectTitleIsScrolling = false
+  checkTitleAutoScroll()
   const swiper = new Swiper('.swiper', {
     // Optional parameters
     loop: true,
@@ -596,9 +733,6 @@ function displayReader() {
       swiper.el.style.display = "none";
     }, 300);
   })
-  $('header').fadeOut()
-  projectTitleIsScrolling = false
-  checkTitleAutoScroll()
 
 
 
@@ -612,7 +746,7 @@ function displayReader() {
       }
       isProjectHeaderDisplayed = true
     } else if ($(window).scrollTop() < $('#main-project-title').offset().top && isProjectHeaderDisplayed) {
-      $('#header-project').css('top', '-9vh')
+      $('#header-project').css('top', '-4vh')
       if (isDesktopDevice) {
         $('#close-project').removeClass('scrolled-cross')
       }

user/themes/figureslibres-v2/scss/configuration/_variable.scss

@@ -22,10 +22,6 @@
     font-family: Syne, sans-serif;
     font-weight: bold;
   }
-  @mixin logiciels-libres-font {
-    font-family: Rumeur, sans-serif;
-    font-weight: bold;
-  }
   @mixin commanditaires-font {
     font-family: Moche, sans-serif;
     font-weight: bold;
@@ -60,6 +56,13 @@
   $mainColor: #0e1229;
   $mainColorSoft: #1f2429;
   $bgColor: #f5f5f5;
+
+  $color_publique: #ffaeab;
+  $color_sociale: #71ff94;
+  $color_culturelle: #feff74;
+  $color_commanditaire: #fabbde;
+  $color_figureslibres: #82f8ee;
+  $color_projets: #4bffc9;
 // colors - gradient
   $bgGradientToBottom: linear-gradient(to bottom, #{$bgColor}, #{$bgColor}00);
   $bgGradientToLeft: linear-gradient(to left, #{$bgColor}, #{$bgColor}00);

user/themes/figureslibres-v2/scss/style.scss

@@ -32,6 +32,7 @@
     overflow-x: hidden;
     color: $mainColor;
     background-color: $bgColor;
+    @include transition-ease-out(background-color);
     header {
       position: fixed;
       top: 0;
@@ -40,11 +41,12 @@
       box-sizing: border-box;
       #nav-container {
         height: $navHeight;
-        background-color: $bgColor;
         padding: 0 $bodyMarginMobile;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        background-color: $bgColor;
+        @include transition-ease-out(background-color);
         h1 {
           cursor: pointer;
         }
@@ -62,7 +64,7 @@
         display: flex;
         align-items: center;
         opacity: 0;
-        @include transition-ease-out(opacity, top 0.7s);
+        @include transition-ease-out(opacity, top 0.7s, background-color);
         #crossMenu {
           position: absolute;
           top: 2vh;
@@ -104,7 +106,12 @@
       display: block;
       width: 100%;
       height: $navGradientHeightMobile;
-      background: $bgGradientToBottom
+      background: $bgGradientToBottom;
+      opacity: 1;
+      @include transition-ease-out(opacity);
+    }
+    header.plain_bg:after {
+      opacity: 0;
     }
     main {
       position: relative;
@@ -123,7 +130,7 @@
             @include transition-ease-out(text-underline-offset);
           }
           a:hover {
-            text-underline-offset: 0.15em;
+            text-underline-offset: 0.15em !important;
           }
         }
         .projet-card {
@@ -177,6 +184,9 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        .animateText {
+          text-decoration: underline 1px;
+        }
         #loader-index {
           position: absolute;
           height: 80vh;
@@ -203,15 +213,12 @@
           #culturelle {
             @include culturelle-font;
           }
-          #logicielslibres {
-            @include logiciels-libres-font;
-          }
         }
         #extrait-projets {
           >div {
             max-height: 0vh;
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: repeat(2, 1fr);
             gap: 0px 20px;
             align-items: flex-start;
             div {
@@ -273,7 +280,7 @@
         #commanditaires-grid {
           width: 85vw;
           display: grid;
-          grid-template-columns: 1fr 1fr;
+          grid-template-columns: repeat(2, 1fr);
           gap: 25px 40px;
           align-items: center;
           img {
@@ -312,22 +319,39 @@
           text-align: center;
           width: 100%;
           margin-bottom: $sectionSpacing;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
           .filter-button {
             cursor: pointer;
+            filter: grayscale(1);
             opacity: $transparency;
-            @include transition-ease-out(opacity);
+            padding: 0.25rem 0.75rem;
+            border-radius: 1rem;
+            font-size: $smallSize;
+            min-height: $currentLineHeight;
+            display: inline-block;
+            @include transition-ease-out(opacity, filter);
+          }
+          .filter-button:hover {
+            filter: grayscale(0) !important;
+            opacity: 1 !important;
           }
           p {
-            margin-bottom: 0;
+            margin-bottom: 1rem;
           }
           #publique-filter {
             @include publique-font;
+            background-color: $color_publique;
           }
           #sociale-filter {
             @include sociale-font;
+            background-color: $color_sociale;
           }
           #culturelle-filter {
             @include culturelle-font;
+            background-color: $color_culturelle;
           }
         }
         hr {
@@ -396,31 +420,18 @@
           position: fixed;
           height: 6vh;
           width: 100%;
-          background-color: $bgColor;
-          top: -9vh;
+          // background-color: $bgColor;
+          top: -4vh;
           @include transition-ease-out(top);
-          .info-project-publique {
-            span {
-              @include publique-font;
-            }
-          }
-          .info-project-sociale {
-            span  {
-              @include sociale-font;
-            }
-          }
-          .info-project-culturelle {
-            span {
-              @include culturelle-font;
-            }
-          }
           h2 {
+            margin: 0;
             overflow: hidden;
             position: absolute;
-            width: 80%;
+            width: 100%;
+            height: 100%;
             padding: 3px 0;
-            margin-top: 1.8vh;
-            margin-left: $bodyMarginMobile;
+            padding-top: 1.8vh;
+            padding-left: $bodyMarginMobile;
             font-size: $currentSize;
             span {
               transform: translate(0, 0);
@@ -433,6 +444,24 @@
               white-space: nowrap;
             }
           }
+          h2.info-project-publique {
+            background: linear-gradient(to bottom, $color_publique, $color_publique 60%, rgba($color_publique, 0));
+            span {
+              @include publique-font;
+            }
+          }
+          h2.info-project-sociale {
+            background: linear-gradient(to bottom, $color_sociale, $color_sociale 60%, rgba($color_sociale, 0));
+            span  {
+              @include sociale-font;
+            }
+          }
+          h2.info-project-culturelle {
+            background: linear-gradient(to bottom, $color_culturelle, $color_culturelle 60%, rgba($color_culturelle, 0));
+            span {
+              @include culturelle-font;
+            }
+          }
           #gradient-long-title {
             position: absolute;
             height: 4vh;
@@ -442,14 +471,6 @@
             background: $bgGradientToLeft;
           }
         }
-        #header-project:after {
-          position: absolute;
-          top: 6vh;
-          content: '';
-          height: 4vh;
-          width: 100%;
-          background: linear-gradient($bgColor, rgba($bgColor, 0));
-        }
         #header-project + a {
           z-index: 2;
         }
@@ -460,13 +481,53 @@
           width: calc(#{$pictoSmallWidth} - 5px);
           height: calc(#{$pictoSmallHeight} - 5px);
         }
-        #cover-image-mobile {
+        figure#cover-image-mobile {
           margin-top: -2vh;
           margin-bottom: 2vh;
         }
-        #cover-image {
+        figure#cover-image {
           display: none;
         }
+        figure#cover-image-mobile,
+        figure#cover-image {
+          position: relative;
+          margin-top: 3vh;
+          img {
+            filter: grayscale(0);
+            @include transition-ease-out(filter);
+            mix-blend-mode: normal;
+          }
+        }
+        figure#cover-image-mobile:hover img,
+        figure#cover-image:hover img {
+          filter: grayscale(1);
+          mix-blend-mode: darken;
+        }
+        figure#cover-image-mobile::before,
+        figure#cover-image::before {
+          position: absolute;
+          content: '';
+          height: 100%;
+          width: 100%;
+          opacity: 0;
+          @include transition-ease-out(opacity);
+        }
+        figure#cover-image-mobile:hover::before,
+        figure#cover-image:hover::before {
+          opacity: 1;
+        }
+        figure#cover-image-mobile.sociale:hover::before,
+        figure#cover-image.sociale:hover::before {
+          background-color: $color_sociale;
+        }
+        figure#cover-image-mobile.culturelle:hover::before,
+        figure#cover-image.culturelle:hover::before {
+          background-color: $color_culturelle;
+        }
+        figure#cover-image-mobile.publique:hover::before,
+        figure#cover-image.publique:hover::before {
+          background-color: $color_publique;
+        }
         #info-project {
           align-self: flex-start;
           h2 {
@@ -502,7 +563,37 @@
         }
         #project-images-grid {
           figure {
+            position: relative;
             margin-top: 3vh;
+            img {
+              filter: grayscale(0);
+              @include transition-ease-out(filter);
+              mix-blend-mode: normal;
+            }
+          }
+          figure:hover img {
+            filter: grayscale(1);
+            mix-blend-mode: darken;
+          }
+          figure::before {
+            position: absolute;
+            content: '';
+            height: 100%;
+            width: 100%;
+            opacity: 0;
+            @include transition-ease-out(opacity);
+          }
+          figure:hover::before {
+            opacity: 1;
+          }
+          figure:hover.sociale::before {
+            background-color: $color_sociale;
+          }
+          figure:hover.publique::before {
+            background-color: $color_publique;
+          }
+          figure:hover.culturelle::before {
+            background-color: $color_culturelle;
           }
         }
         hr {
@@ -526,12 +617,15 @@
             margin-top: 2vh;
           }
           #related-grid {
-            margin-bottom: 5vh;
             width: 80%;
             .card-displayed {
               margin-top: 1.5vh;
             }
           }
+          p {
+            margin-top: 3vh;
+            margin-bottom: 5vh;
+          }
         }
         .swiper {
           position: fixed;
@@ -557,8 +651,8 @@
               align-items: center;
               justify-content: center;
               img {
-                max-height: 100%;
-                max-width: 100%;
+                max-height: 90%;
+                max-width: 90%;
                 object-fit: cover;
               }
             }
@@ -614,24 +708,6 @@
           height: 100vh;
         }
       }
-      .content {
-        .card-displayed figure a figcaption {
-          opacity: 0;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          box-sizing: border-box;
-          padding: 10px;
-          background: $mainColor;
-          color: $bgColor;
-          font-size: $tinySize;
-          border-radius: 0 0 10px 10px;
-        }
-      }
-      .card-displayed:hover figure a figcaption {
-        opacity: 1;
-      }
       main {
         #index-content {
           min-height: 80vh;
@@ -640,11 +716,11 @@
           justify-content: center;
           #extrait-projets {
             >div {
-              grid-template-columns: 1fr 1fr 1fr 1fr;
+              grid-template-columns: repeat(2, 1fr);
               div:last-of-type {
                 overflow-x: hidden;
                 text-align: right;
-                grid-column-end: span 4;
+                grid-column-end: span 2;
                 p {
                   display: inline-block;
                   .picto {
@@ -660,13 +736,13 @@
           }
           #commanditaires-grid {
             width: auto;
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: repeat(5, 1fr);
           }
         }
         #projets-index {
           width: auto;
           #filter-index {
-            display: flex;
+            justify-content: start;
             flex-direction: row;
             max-width: 100%;
             p:last-of-type {
@@ -680,19 +756,15 @@
           .projets-grid {
             width: 100%;
             display: grid;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
+            grid-template-columns: repeat(3, 1fr);
             gap: 0 10px;
+            align-items: start;
             >div {
               width: 100%;
             }
           }
         }
         #reader {
-          #header-project {
-            h2 {
-              margin-top: 1vh;
-            }
-          }
           #close-project {
             width: $pictoInlineWidth;
             height: $pictoInlineHeight;
@@ -722,7 +794,7 @@
           #project-images-grid {
             width: auto;
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: repeat(2, 1fr);
             grid-gap: 1em;
             figure {
               margin-top: 0;
@@ -738,19 +810,24 @@
               grid-column: span 2;
             }
           }
-          #related-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            width: auto !important;
-            grid-column-gap: 10%;
-            margin-bottom: 6vh !important;
-            .card-displayed {
-              margin-top: 2vh !important;
-              figure {
-                min-height: 80px !important;
-                min-width: 15vw;
+          #related-pages {
+            #related-grid {
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              width: auto !important;
+              grid-column-gap: 10%;
+              .card-displayed {
+                margin-top: 2vh !important;
+                width: 100%;
+                figure {
+                  min-height: 80px !important;
+                }
               }
             }
+            p {
+              margin-top: 3vh;
+              margin-bottom: 6vh !important;
+            }
           }
           .swiper {
             .swiper-button-next, .swiper-button-prev {
@@ -789,11 +866,11 @@
           display: none;
         }
         nav {
+          background-color: $bgColor;
           position: relative;
           top: 0;
           opacity: 1;
           height: $navHeight;
-          background-color: $bgColor;
           justify-content: center;
           #crossMenu {
             display: none;
@@ -850,25 +927,61 @@
       header:after {
         height: $navGradientHeightDesktop;
       }
+      
       main {
         display: flex;
         justify-content: center;
         margin-top: calc(#{$navHeight} + #{$navGradientHeightDesktop} + #{$sectionSpacing});
-        .content {
-          width: $bodyWidth;
-          padding: 0;
+
+      #index-content > #extrait-projets figure a figcaption {
+        background-color: $mainColor;
+        color: $bgColor;
+      }
+      .content {
+        width: $bodyWidth;
+        padding: 0;
+        .card-displayed figure a figcaption {
+          opacity: 0;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 10px;
+          color: $mainColor;
+          font-size: $tinySize;
+          border-radius: 0 0 10px 10px;
+        }
+        .culturelle-card figure a figcaption {
+          background-color: $color_culturelle;
+        }
+        .sociale-card figure a figcaption {
+          background-color: $color_sociale;
         }
+        .publique-card figure a figcaption {
+          background-color: $color_publique;
+        }
+      }
+      .card-displayed:hover figure a figcaption {
+        opacity: 1;
+      }
         #index-content {
+          #extrait-projets {
+            >div {
+              grid-template-columns: repeat(4, 1fr);
+              div:last-of-type {
+                grid-column-end: span 4;
+              }
+            }
+          }
           #commanditaires-grid {
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: repeat(8, 1fr);
           }
         }
         #projets-index {
           width: $bodyWidth;
-          #filter-index {
-            .filter-button:hover {
-              opacity: 1 !important;
-            }
+          .projets-grid {
+            grid-template-columns: repeat(4, 1fr);
           }
         }
         #text-content {
@@ -888,28 +1001,35 @@
         }
         #reader {
           margin-top: -10vh;
-          width: 40vw;
+          width: 60vw;
           #header-project {
             width: 100%;
             h2 {
-              width: 35vw;
-              margin-left: 29.5vw;
+              width: 100%;
               padding: 0;
               span {
+                padding-left: 20vw;
+                padding-top: 1.4vh;
                 height: $currentLineHeight;
-                padding-top: 5px;
               }
             }
             #gradient-long-title {
               right: 34.2vw;
             }
           }
+          #cover-image {
+            width: 66.666%;
+            box-sizing: border-box;
+            margin: 0 10vw;
+          }
           #info-project {
             width: 100%;
+            box-sizing: border-box;
+            padding: 0 10vw;
             margin-top: 2vh;
             margin-bottom: 4vh;
             h2 {
-              min-width: 100%;
+              min-width: 95%;
               border-right: solid 1px rgba(0, 0, 0, $transparency);
               margin-top: 0;
               margin-bottom: 1vh;
@@ -926,17 +1046,18 @@
           #close-project {
             width: $pictoSmallWidth;
             height: $pictoSmallHeight;
-            top: 6vh;
+            top: calc(4vh + $pictoSmallHeight / 2);
             right: calc(30vw - #{$pictoSmallWidth} - 2vw);
             transform: scale(1, 1);
             @include transition-ease-out(top, right, transform);
           }
           .scrolled-cross {
             top: 1.4vh !important;
-            right: 30vw !important;
+            right: 20vw !important;
             transform: scale(0.7, 0.7) !important;
           }
           #project-description {
+            padding: 0 10vw;
             align-self: flex-start;
           }
           #project-images-grid {
@@ -954,11 +1075,15 @@
               margin-top: 0;
             }
             #related-grid {
+              width: 100%;
               grid-column-gap: 3%;
               div figure {
                 min-width: 10vw;
               }
             }
+            p {
+              align-self: flex-end;
+            }
           }
         }
       }
@@ -995,7 +1120,14 @@
         }
         #projets-index {
           .projets-grid {
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            column-gap: 2em;
+            grid-template-columns: repeat(4, 1fr);
+          }
+        }
+        #reader {
+          #related-pages {
+            padding: 0 10vw;
+            box-sizing: border-box;
           }
         }
       }

user/themes/figureslibres-v2/templates/partials/relatedpages.html.twig

@@ -1,50 +1,50 @@
-<div id="related-pages">
-  <hr>
-  <h3>Voir aussi</h3>
+{% macro recursivePages(amount, page, page1, page2) %}
+  {% import _self as self %}
+  {% set index = amount - 1 %}
+  {% if index >= 0 %}
+    {% set random_utilite = random(page.find('/projets').children) %}
+    {% set p = random(random_utilite.children) %}
 
-  <div id="related-grid">
-  {% set category = random(page.taxonomy.category) %}
-  {% set p = random(taxonomy.findTaxonomy({'category': category}))%}
-  {% if p == page %}
-    {% set category = random(page.taxonomy.category) %}
-    {% set p = random(taxonomy.findTaxonomy({'category': category}))%}
-    {% if p == page %}
-      {% set category = random(page.taxonomy.category) %}
-      {% set p = random(taxonomy.findTaxonomy({'category': category}))%}
+    {% if not page1 %}
       {% if p == page %}
-        {% set category = random(page.taxonomy.category) %}
-        {% set p = random(taxonomy.findTaxonomy({'category': category}))%}
+        {% set index = amount + 1 %}
+        {{ self.recursivePages(index, page) }}
+      {% else %}
+        {% include 'partials/projet_card.html.twig' with { p } %}
+        {{ self.recursivePages(index, page, p) }}
       {% endif %}
-    {% endif %}
-  {% endif %}
-  {% include 'partials/projet_card.html.twig' %}
-
-  {% set p = random(page.parent.children) %}
-  {% if p == page or p == related_category_page %}
-    {% set p = random(page.parent.children) %}
-    {% if p == page or p == related_category_page %}
-      {% set p = random(page.parent.children) %}
-      {% if p == page or p == related_category_page %}
-        {% set p = random(page.parent.children) %}
+
+    {% elseif not page2 %}
+      {% if p == page or p == page1 %}
+        {% set index = amount + 1 %}
+        {{ self.recursivePages(index, page, page1) }}
+      {% else %}
+        {% include 'partials/projet_card.html.twig' with { p } %}
+        {{ self.recursivePages(index, page, page1, p) }}
       {% endif %}
-    {% endif %}
-  {% endif %}
-  {% include 'partials/projet_card.html.twig' %}
 
-  {% set random_utilite = random(page.find('/projets').children) %}
-  {% set p = random(random_utilite.children) %}
-  {% if p == page or p == related_utilite_page or p == related_category_page %}
-    {% set random_utilite = random(page.find('/projets').children) %}
-    {% set p = random(random_utilite.children) %}
-    {% if p == page or p == related_utilite_page or p == related_category_page %}
-      {% set random_utilite = random(page.find('/projets').children) %}
-      {% set p = random(random_utilite.children) %}
-      {% if p == page or p == related_utilite_page or p == related_category_page %}
-        {% set random_utilite = random(page.find('/projets').children) %}
-        {% set p = random(random_utilite.children) %}
+    {% elseif not page3 %}
+      {% if p == page or p == page1 or p == page2 %}
+        {% set index = amount + 1 %}
+        {{ self.recursivePages(index, page, page1, page2) }}
+      {% else %}
+        {% include 'partials/projet_card.html.twig' with { p } %}
       {% endif %}
+
     {% endif %}
+
   {% endif %}
-  {% include 'partials/projet_card.html.twig' %}
+{% endmacro %}
+
+{% import _self as self %}
+
+<div id="related-pages">
+  <hr>
+  <h3>Voir aussi</h3>
+
+  <div id="related-grid">
+    {% set relatedAmount = 3 %}
+    {{ self.recursivePages(relatedAmount, page) }}
   </div>
+  <p><a href="{{ page.parent.parent.url }}">Retour à la liste des projets</a></p>
 </div>

user/themes/figureslibres-v2/templates/projets-index.html.twig

@@ -6,8 +6,8 @@
     <div id="filter-index">
       <p>Consulter les projets d'utilité</p>
       <p>
-        <span id="publique-filter" class="filter-button" onClick="filterCards('publique')">publique</span>,
-        <span id="sociale-filter" class="filter-button" onClick="filterCards('sociale')">sociale</span>,
+        <span id="publique-filter" class="filter-button" onClick="filterCards('publique')">publique</span>
+        <span id="sociale-filter" class="filter-button" onClick="filterCards('sociale')">sociale</span>
         <span id="culturelle-filter" class="filter-button" onClick="filterCards('culturelle')">culturelle</span>
       </p>
     </div>

user/themes/figureslibres-v2/templates/reader.html.twig

@@ -1,61 +1,49 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
-    <div id="reader" class="content" data-barba="container" data-barba-namespace="reader">
-        <div id="header-project">
-        {% switch page.parent.title %}
-          {% case 'Publique' %}
-            <h2 class="info-project-publique">
-          {% case 'Sociale' %}
-            <h2 class="info-project-sociale">
-          {% case 'Culturelle' %}
-            <h2 class="info-project-culturelle">
-        {% endswitch %}
-            <span data-text="{{ page.title }}">{{ page.title }}</span></h2>
-        </div>
-        <a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a>
-        <figure id="cover-image-mobile">
-          <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
-        </figure>
-        {% switch page.parent.title %}
-          {% case 'Publique' %}
-            <div id="info-project" class="info-project-publique">
-          {% case 'Sociale' %}
-            <div id="info-project" class="info-project-sociale">
-          {% case 'Culturelle' %}
-            <div id="info-project" class="info-project-culturelle">
-        {% endswitch %}
-          <h2 id="main-project-title">{{ page.title }}</h2>
-          <div>
-              {% for tag in page.taxonomy.tag %}
-                {{ tag }},
-              {% endfor %}
-              {{ page.date|date("Y") }}
-          </div>
-        </div>
-        <figure id="cover-image">
-          <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
-        </figure>
-        <hr>
-        <div id="project-description">
-            {{ page.content|raw }}
+  {% set class_suffix = page.parent.title|lower %}
+  <div id="reader" class="content" data-barba="container" data-barba-namespace="reader">
+      <div id="header-project">
+        <h2 class="info-project-{{ class_suffix }}">
+          <span data-text="{{ page.title }}">{{ page.title }}</span>
+        </h2>
+      </div>
+      <a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a>
+      <figure id="cover-image-mobile" class="{{ class_suffix }}">
+        <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
+      </figure>
+      <div id="info-project" class="info-project-{{ class_suffix }}">
+        <h2 id="main-project-title">{{ page.title }}</h2>
+        <div>
+            {% for tag in page.taxonomy.tag %}
+              {{ tag }},
+            {% endfor %}
+            {{ page.date|date("Y") }}
         </div>
+      </div>
+      <figure id="cover-image" class="{{ class_suffix }}">
+        <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
+      </figure>
+      <hr>
+      <div id="project-description">
+          {{ page.content|raw }}
+      </div>
 
-        <div id="project-images-grid">
-          {% for image in page.media.images %}
-              {% if image != page.media.images | first %}
-                <figure>
-                  <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
-                </figure>
-              {% endif %}
-          {% endfor %}
+      <div id="project-images-grid">
+        {% for image in page.media.images %}
+            {% if image != page.media.images | first %}
+              <figure class="{{ class_suffix }}">
+                <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
+              </figure>
+            {% endif %}
+        {% endfor %}
+      </div>
 
-        </div>
-        {% block related_pages %}
-          {% include 'partials/relatedpages.html.twig' %}
-        {% endblock %}
-        {% block carousel %}
-          {% include 'partials/carousel.html.twig' %}
-        {% endblock %}
-    </div>
+      {% block related_pages %}
+        {% include 'partials/relatedpages.html.twig' %}
+      {% endblock %}
+      {% block carousel %}
+        {% include 'partials/carousel.html.twig' %}
+      {% endblock %}
+  </div>
 {% endblock %}