diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss index ab4b238..aa76b7d 100644 --- a/assets/scss/components/_images.scss +++ b/assets/scss/components/_images.scss @@ -25,3 +25,42 @@ figcaption { margin-top: 0.5rem; font-style: italic; } + +/* CSS-only lightbox. See https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25 */ +.lightbox { + display: none; + + position: fixed; + z-index: 99999; + top: 0; + left: 0; + right: 0; + bottom: 0; + + padding: 1em; + + background: rgba(0, 0, 0, 0.85); + + /* center that thang, ya get me? */ + justify-content: center; + align-items: center; + text-align: center; + white-space: nowrap; +} + +/* Unhide the lightbox when it's the target */ +.lightbox:target { + display: flex; +} + +.lightbox span { + /* Full width and height */ + display: block; + width: 100%; + height: 100%; + + /* Size and position background image */ + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 2f084ea..4f5d8d7 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -108,7 +108,17 @@ {{- end }} {{- end }} +{{- $lightbox := true }} +{{- if $u.RawQuery }} + {{- if $u.Query.Has "lightbox" }} + {{- $lightbox = ne ($u.Query.Get "lightbox") "false" }} + {{- end }} +{{- end }} + {{- /* Render image element. */ -}} +{{- if $lightbox -}} + +{{- end }} +{{- if $lightbox -}} + + + + +{{- end }}