diff options
| -rw-r--r-- | assets/scss/style.scss | 49 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/partials/image-gallery.html | 25 |
3 files changed, 76 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; + } + } + } +} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 1f3156a..076e4e7 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -49,6 +49,8 @@ <div class="main-content mw7 center lh-copy f5 f4-ns ph1"> {{ .Content }} </div> + {{ partial "image-gallery" . }} + {{ if .Site.Params.tipping }} {{ partial "tipping" . }} {{ end }} diff --git a/layouts/partials/image-gallery.html b/layouts/partials/image-gallery.html new file mode 100644 index 0000000..5e5b874 --- /dev/null +++ b/layouts/partials/image-gallery.html @@ -0,0 +1,25 @@ +{{ with .Params.album }} + <section class="gallery"> + {{ 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"> + <input + type="radio" + id="img-{{ $id }}" + checked + name="gallery" + class="gallery__selector" + /> + <img + class="gallery__img" + src="{{ (.Fill "1152x768").Permalink }}" + alt="" + /> + <label for="img-{{ $id }}" class="gallery__thumb"> + <img src="{{ (.Fill "150x100").Permalink }}" alt="" /> + </label> + </div> + {{ end }} + {{ end }} + </section> +{{ end }} |