diff --git a/styles.css b/styles.css index 23f57ee..a7b1fea 100644 --- a/styles.css +++ b/styles.css @@ -425,29 +425,35 @@ body { .gallery-item img { width: 100%; - height: 100%; - object-fit: cover; + height: auto; + object-fit: contain; display: block; transition: transform 0.3s ease; } -.gallery-item-wide { - grid-column: span 2; -} - +.gallery-item-wide, .gallery-item-tall { - grid-row: span 2; + grid-column: 1; + grid-row: auto; } .gallery-item-top { - /* Contour bleu */ - border: 4px solid #2196f3; - /* Animation subtile au survol */ + border: none; position: relative; z-index: 2; 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 { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(33, 150, 243, 0.3); @@ -734,13 +740,21 @@ body { } .gallery-item { - width: calc((100% - (2 * 20px)) / 3); + min-height: unset; + width: 100%; + border-radius: 0.5rem; + overflow: hidden; } .gallery-grid { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; padding: 1rem; + max-width: 500px; + margin: 0 auto; + width: 100%; } .gallery-header { diff --git a/version.txt b/version.txt index e6d5cb8..a6a3a43 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -1.0.2 \ No newline at end of file +1.0.4 \ No newline at end of file