correction de l'affichage des galeries sur mobile

This commit is contained in:
Esenjin 2025-01-06 19:31:19 +01:00
parent 89af226893
commit d4cf2c0434
2 changed files with 28 additions and 14 deletions

View File

@ -425,29 +425,35 @@ body {
.gallery-item img { .gallery-item img {
width: 100%; width: 100%;
height: 100%; height: auto;
object-fit: cover; object-fit: contain;
display: block; display: block;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.gallery-item-wide { .gallery-item-wide,
grid-column: span 2;
}
.gallery-item-tall { .gallery-item-tall {
grid-row: span 2; grid-column: 1;
grid-row: auto;
} }
.gallery-item-top { .gallery-item-top {
/* Contour bleu */ border: none;
border: 4px solid #2196f3;
/* Animation subtile au survol */
position: relative; position: relative;
z-index: 2; z-index: 2;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.gallery-item-top::before {
content: '';
position: absolute;
inset: 0;
border: 4px solid #2196f3;
border-radius: 0.5rem;
pointer-events: none;
z-index: 1;
}
.gallery-item-top:hover { .gallery-item-top:hover {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(33, 150, 243, 0.3); box-shadow: 0 12px 24px rgba(33, 150, 243, 0.3);
@ -734,13 +740,21 @@ body {
} }
.gallery-item { .gallery-item {
width: calc((100% - (2 * 20px)) / 3); min-height: unset;
width: 100%;
border-radius: 0.5rem;
overflow: hidden;
} }
.gallery-grid { .gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); display: flex;
gap: 0.5rem; flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 1rem; padding: 1rem;
max-width: 500px;
margin: 0 auto;
width: 100%;
} }
.gallery-header { .gallery-header {

View File

@ -1 +1 @@
1.0.2 1.0.4