Corrections index projets et diaporama

- Vidéo en média d'en-tête de la fiche projet quand elle existe
  (comme la vignette d'index), sinon première image. La grille inclut
  la 1re image quand l'en-tête est une vidéo pour ne pas la perdre.
- Diaporama : images en HD (srcset @Nx via jquery.lazy) au lieu de la
  version SD 640px ; affichage plein écran sans rognage (object-fit
  contain, dimensions viewport).
- Diaporama : clic sur le fond ferme, navigation clavier (flèches +
  Échap). Indexation robuste par URL (data-src/src) corrigeant
  l'ouverture systématique sur l'image d'en-tête.
- Cartes projet mobile/tablette : titre ferré à gauche sous l'image
  au lieu d'être centré.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-09-11 17:02:22 +02:00
co-authored by Claude Opus 4.8
parent 4550a43fcd
commit b579febb87
6 changed files with 74 additions and 28 deletions
+15 -8
View File
@@ -362,7 +362,7 @@ body main .content .projet-card .loader {
body main .content .projet-card a {
width: 100%;
display: flex;
justify-content: center;
justify-content: flex-start;
}
body main .content .projet-card a figcaption {
color: #0e1229;
@@ -371,6 +371,7 @@ body main .content .projet-card a figcaption {
margin-top: 5px;
position: relative;
font-size: 0.95em;
text-align: left;
transition: opacity 0.4s ease-out;
}
body main .content .projet-card a figcaption .publique-title {
@@ -721,14 +722,20 @@ 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 {
body main #reader figure#cover-image-mobile img, body main #reader figure#cover-image-mobile video,
body main #reader figure#cover-image img,
body main #reader figure#cover-image video {
display: block;
width: 100%;
height: auto;
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 {
body main #reader figure#cover-image:hover img,
body main #reader figure#cover-image-mobile:hover video,
body main #reader figure#cover-image:hover video {
filter: grayscale(1);
mix-blend-mode: darken;
}
@@ -873,16 +880,16 @@ body main #reader .swiper .swiper-wrapper {
align-items: center;
}
body main #reader .swiper .swiper-wrapper .swiper-slide {
height: 100%;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body main #reader .swiper .swiper-wrapper .swiper-slide img {
max-height: 90%;
max-width: 90%;
object-fit: cover;
width: 90vw;
height: 90vh;
object-fit: contain;
}
body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
color: #0e1229;
File diff suppressed because one or more lines are too long