Gallery to tailwind

1 files changed, 40 insertions, 0 deletions

diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index 95d03f9..180961b 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -890,6 +890,27 @@ h6 {
   }
 }
 
+/* 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 {
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+  input:checked ~ label > img {
+    --tw-shadow-color: #84cc16;
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+}
+
 .collapse {
   visibility: collapse;
 }
@@ -971,6 +992,11 @@ h6 {
   margin-bottom: 0.5rem;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1336,6 +1362,10 @@ h6 {
           text-decoration-line: underline;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .outline-2 {
   outline-width: 2px;
 }
@@ -1357,6 +1387,16 @@ h6 {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 @font-face {
   font-family: "BerkshireSwash-Regular";