From 40d193b330443ea074f42674ed18f463fc8e422e Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 7 Feb 2021 19:20:16 +0100
Subject: Move images and stylesheets in subfolders

---
 stylesheets/gallerie.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 stylesheets/gallerie.css

(limited to 'stylesheets/gallerie.css')

diff --git a/stylesheets/gallerie.css b/stylesheets/gallerie.css
new file mode 100644
index 0000000..a75faf7
--- /dev/null
+++ b/stylesheets/gallerie.css
@@ -0,0 +1,68 @@
+.mosaic {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr));
+    grid-gap: 0.8em;
+}
+
+.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;
+    height: 100%;
+    width: 100%;
+    transition: filter 0.5s;
+    filter: grayscale(0.8) brightness(0.4);
+}
+.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%;
+}
+
+@media (min-width: 40em) {
+    main {
+        padding-top: 2%;
+        padding-bottom: 2%;
+        padding-right: 2%;
+    }
+
+    .mosaic.photos {
+        --mosaic-side: 14em;
+    }
+    .mosaic.videos {
+        --mosaic-side: 25em;
+    }
+}
+
+@media (max-width: 40em) {
+    .mosaic.photos {
+        --mosaic-side: 8em;
+    }
+    .mosaic.videos {
+        --mosaic-side: 10em;
+    }
+}
-- 
cgit v1.2.3