diff options
| -rw-r--r-- | assets/scss/input.css | 15 | ||||
| -rw-r--r-- | assets/scss/style.scss | 51 | ||||
| -rw-r--r-- | assets/scss/tailwind.css | 40 | ||||
| -rw-r--r-- | layouts/partials/image-gallery.html | 10 |
4 files changed, 60 insertions, 56 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"; diff --git a/layouts/partials/image-gallery.html b/layouts/partials/image-gallery.html index 943370c..3825f16 100644 --- a/layouts/partials/image-gallery.html +++ b/layouts/partials/image-gallery.html @@ -1,22 +1,22 @@ {{ with .Params.album }} - <section class="gallery"> + <section class="gallery flex relative my-3 mx-auto"> {{ range $id, $val := readDir (printf "/assets/media/albums/%s" (string .)) }} {{ with resources.Get (printf "media/albums/%s/%s" $.Params.album $val.Name) }} - <div class="gallery__item"> + <div class=""> <input type="radio" id="img-{{ $id }}" checked name="gallery" - class="gallery__selector" + class="absolute hidden" /> <img - class="gallery__img" + class="transition-opacity duration-300 absolute top-0 left-0 opacity-0" src="{{ (.Fill "1152x768").RelPermalink }}" alt="" loading="lazy" /> - <label for="img-{{ $id }}" class="gallery__thumb"> + <label for="img-{{ $id }}" class="block m-2 p-2"> <img src="{{ (.Fill "150x100").RelPermalink }}" alt="" |