Gallery to tailwind

3 files changed, 55 insertions, 51 deletions

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 {
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index fdb706a..0fd428b 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -166,54 +166,3 @@ table:not(.u-legend) {
     @extend .ph3, .pv2;
   }
 }
-
-/* gallery
-// https://lubna.dev/articles/create-css-only-image-gallery/
-// box-sizing setup is part of tachyons
-// * {
-//   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;
-      }
-    }
-  }
-}
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";