diff options
author | Oscar Najera <hi@oscarnajera.com> | 2025-01-06 08:17:59 +0100 |
---|---|---|
committer | Oscar Najera <hi@oscarnajera.com> | 2025-01-06 08:17:59 +0100 |
commit | 63932c7be1ec12872f9409c5dfaf9bdfb0597620 (patch) | |
tree | df189406dd9f8ad4c6676b7da5ca215c585e3ba6 /assets/scss/input.css | |
parent | 08c15544a1a5c4dc36d0ba6c84b5ba65476b0687 (diff) | |
download | hugo-minimalist-theme-63932c7be1ec12872f9409c5dfaf9bdfb0597620.tar.gz hugo-minimalist-theme-63932c7be1ec12872f9409c5dfaf9bdfb0597620.tar.bz2 hugo-minimalist-theme-63932c7be1ec12872f9409c5dfaf9bdfb0597620.zip |
Gallery to tailwind
Diffstat (limited to 'assets/scss/input.css')
-rw-r--r-- | assets/scss/input.css | 15 |
1 files changed, 15 insertions, 0 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 { |