1 files changed, 68 insertions, 0 deletions
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;
+    }
+}