From 63932c7be1ec12872f9409c5dfaf9bdfb0597620 Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Mon, 6 Jan 2025 08:17:59 +0100
Subject: Gallery to tailwind

---
 assets/scss/input.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'assets/scss/input.css')

diff --git a/assets/scss/input.css b/assets/scss/input.css
index 35c345f..6243110 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -176,6 +176,21 @@ blockquote::before {
       }
     }
   }
+
+  /* https://lubna.dev/articles/create-css-only-image-gallery/ */
+  .gallery {
+    --max-img-width: 72rem;
+    --max-img-height: 48rem;
+    max-width: var(--max-img-width);
+    padding-top: min(66%, var(--max-img-height));
+
+    input:checked + img {
+      opacity: 1;
+    }
+    input:checked ~ label > img {
+      @apply shadow-md shadow-lime-500;
+    }
+  }
 }
 
 @layer utilities {
-- 
cgit v1.2.3