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 ++++++++++++++
assets/scss/style.scss | 51 ------------------------------------------------
assets/scss/tailwind.css | 40 +++++++++++++++++++++++++++++++++++++
3 files changed, 55 insertions(+), 51 deletions(-)
(limited to 'assets')
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";
--
cgit v1.2.3