From 2a1b0bf3e757812f230dc769426b804389c797e0 Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Thu, 19 Oct 2023 04:08:37 +0200
Subject: Image gallery

---
 assets/scss/style.scss | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

(limited to 'assets/scss/style.scss')

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 164d05c..fcf5218 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -244,3 +244,52 @@ table {
     @extend .ph3, .pv2;
   }
 }
+// gallery
+// https://lubna.dev/articles/create-css-only-image-gallery/
+* {
+  box-sizing: border-box;
+}
+
+$max-img-width: 72rem;
+$max-img-height: 48rem;
+
+.gallery {
+  display: flex;
+  margin: 10px auto;
+  max-width: $max-img-width;
+  position: relative;
+  padding-top: $max-img-height/$max-img-width * 100%;
+
+  @media screen and (min-width: $max-img-width) {
+    padding-top: $max-img-height;
+  }
+
+  &__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &__thumb {
+    padding-top: 6px;
+    margin: 6px;
+    display: block;
+  }
+
+  &__selector {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+
+    &:checked {
+      + .gallery__img {
+        opacity: 1;
+      }
+      ~ .gallery__thumb > img {
+        box-shadow: 0 0 0 3px #0be2f6;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3