diff options
| -rw-r--r-- | gallerie.css | 28 | ||||
| -rw-r--r-- | gallerie.html | 24 |
2 files changed, 46 insertions, 6 deletions
diff --git a/gallerie.css b/gallerie.css index 6706c28..face887 100644 --- a/gallerie.css +++ b/gallerie.css @@ -6,14 +6,17 @@ main > div { overflow: auto; } -.photos { +.mosaic { display: grid; - grid-auto-rows: 14em; - grid-template-columns: repeat(auto-fit, 40%); + grid-template-columns: repeat(auto-fit, 30em); grid-gap: 0.8em; } -.photo img { +.mosaic.photos { + grid-auto-rows: 14em; +} + +.mosaic img { object-position: center; object-fit: cover; height: 100%; @@ -22,6 +25,21 @@ main > div { filter: grayscale(0.8) brightness(0.4); } -.photo img:hover { +.mosaic img:hover { filter: none; } + +.mosaic .video { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; /* 9/16 */ +} + +.mosaic .video .yt { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/gallerie.html b/gallerie.html index eeceeaf..9deb2c4 100644 --- a/gallerie.html +++ b/gallerie.html @@ -34,7 +34,7 @@ <main> <h1>Photos</h1> - <div class="photos"> + <div class="mosaic photos"> <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"> @@ -57,6 +57,28 @@ </div> </div> <h1>Vidéos</h1> + <div class="mosaic videos"> + <div class="video"> + <iframe src="https://www.youtube.com/embed/rl16-7wZmFY" + frameborder="0" allowfullscreen class="yt"> + </iframe> + </div> + <div class="video"> + <iframe src="https://www.youtube.com/embed/QpYo0lAwQ2g" + frameborder="0" allowfullscreen class="yt"> + </iframe> + </div> + <div class="video"> + <iframe src="https://www.youtube.com/embed/1SJsDCMyU9c" + frameborder="0" allowfullscreen class="yt"> + </iframe> + </div> + <div class="video"> + <iframe src="https://www.youtube.com/embed/9yxEPZ1vCnM" + frameborder="0" allowfullscreen class="yt"> + </iframe> + </div> + </div> </div> </main> |