diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-12-30 18:01:32 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-12-30 18:01:32 +0100 |
| commit | 74a28fd0f2ccab43a51430dd29093053f9e366ea (patch) | |
| tree | a9465ff2f356c5db6e8274524aa8210d10a58a08 | |
| parent | 14b5e582b2def4c4b04adef62f35903e486bda04 (diff) | |
| download | quatuorbellefeuille.com-74a28fd0f2ccab43a51430dd29093053f9e366ea.tar.xz | |
Make photos square in gallery
height: 0; padding-bottom: 100%; name a more iconic duo.
| -rw-r--r-- | gallerie.css | 23 | ||||
| -rw-r--r-- | gallerie.html | 10 |
2 files changed, 28 insertions, 5 deletions
diff --git a/gallerie.css b/gallerie.css index ef7c60b..cdb0fae 100644 --- a/gallerie.css +++ b/gallerie.css @@ -7,14 +7,26 @@ main { .mosaic { display: grid; - grid-template-columns: repeat(auto-fill, minmax(25em, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr)); grid-gap: 0.8em; } .mosaic.photos { - grid-auto-rows: 14em; + --mosaic-side: 14em; +} +.mosaic .photo { + position: relative; + width: 100%; + height: 0; + padding-bottom: 100%; +} +.mosaic .photo > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } - .mosaic img { object-position: center; object-fit: cover; @@ -23,18 +35,19 @@ main { transition: filter 0.5s; filter: grayscale(0.8) brightness(0.4); } - .mosaic img:hover { filter: none; } +.mosaic.videos { + --mosaic-side: 25em; +} .mosaic .video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 9/16 */ } - .mosaic .video .yt { position: absolute; top: 0; diff --git a/gallerie.html b/gallerie.html index ceb61ba..c6528e6 100644 --- a/gallerie.html +++ b/gallerie.html @@ -64,6 +64,16 @@ <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg"> </a> </div> + <div class="photo"> + <a href="https://v3.goldensun-world.com/img/wallpapers/wallpaper1.jpg"> + <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg"> + </a> + </div> + <div class="photo"> + <a href="https://i.redd.it/snvwn43xm9951.png"> + <img src="https://preview.redd.it/snvwn43xm9951.png?width=517&auto=webp&s=ffe4c47873bb42e8a62bf678d076ebc7f2bdc880"> + </a> + </div> </div> <h1>Vidéos</h1> <div class="mosaic videos"> |