diff options
| author | Oscar Najera <hi@oscarnajera.com> | 2023-10-19 04:08:37 +0200 |
|---|---|---|
| committer | Oscar Najera <hi@oscarnajera.com> | 2023-10-19 15:15:45 +0200 |
| commit | 2a1b0bf3e757812f230dc769426b804389c797e0 (patch) | |
| tree | d5559033320d2c7172596ff31be3a6222ccd3d12 /assets | |
| parent | 61b0a3b49513b95d90fa9201f625e744a5d3fc27 (diff) | |
| download | hugo-minimalist-theme-2a1b0bf3e757812f230dc769426b804389c797e0.tar.gz hugo-minimalist-theme-2a1b0bf3e757812f230dc769426b804389c797e0.tar.bz2 hugo-minimalist-theme-2a1b0bf3e757812f230dc769426b804389c797e0.zip | |
Image gallery
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/scss/style.scss | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 164d05c..fcf5218 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -244,3 +244,52 @@ table { @extend .ph3, .pv2; } } +// gallery +// https://lubna.dev/articles/create-css-only-image-gallery/ +* { + 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; + } + } + } +} |