| -rw-r--r-- | internal/lightgallery/html_renderer.go | 20 | ||||
| -rw-r--r-- | static/input.css | 24 |
2 files changed, 19 insertions, 25 deletions
diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go index 849759e..7ecad44 100644 --- a/internal/lightgallery/html_renderer.go +++ b/internal/lightgallery/html_renderer.go @@ -83,15 +83,15 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [ thumb: "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp", subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions"> - <p class="grow !text-[1vmax]/[1] text-left font-spectral text-main-dark">%s</p> - <p class="!text-[1vmax]/[1] text-right font-spectral text-secondary">%s</p> + <p class="grow !text-[1vmax]/[0.9] text-left font-spectral text-main-dark">%s</p> + <p class="!text-[1vmax]/[0.9] text-right font-spectral text-secondary">%s</p> </div>`+"`"+` }`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00"))) } w.WriteString(fmt.Sprintf(` <script> -function createLightGallery%s() { +function createLightLibrary%s() { const $lgContainer = document.getElementById('lg-%s'); const inlineGallery = lightGallery($lgContainer, { container: $lgContainer, @@ -116,8 +116,18 @@ function createLightGallery%s() { }, 200); } -document.addEventListener('DOMContentLoaded', createLightGallery%s); -</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID)) +document.addEventListener('DOMContentLoaded', createLightLibrary%s); + +let resizeTimer%s; +window.addEventListener("resize", () => { + clearTimeout(resizeTimer%s); + resizeTimer%s = setTimeout(() => { + const $lgContainer = document.getElementById('lg-%s'); + $lgContainer.innerHTML = ""; + createLightLibrary%s(); + }, 1000); +}); +</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) } return ast.WalkContinue, nil diff --git a/static/input.css b/static/input.css index 8c0069b..0d6e786 100644 --- a/static/input.css +++ b/static/input.css @@ -323,21 +323,14 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { } .lg-content { - top: 2.5vmax !important; - bottom: calc(10vmin + 5vmax) !important; -} - -.lg-thumb-item { - width: 10vmin !important; - height: 10vmin !important; + top: 3vmax !important; } .lg-container:not([class~="lg-inline"]) .lg-content { top: 4vmax !important; } -.lg-toolbar .lg-icon, -.lg-content .lg-icon { +.lg-toolbar .lg-icon { padding: 0 0.7vmax; font-size: 1.5vmax !important; height: 1.5vmax; @@ -345,20 +338,11 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { color: var(--main-dark-color); } -.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon, -.lg-container:not([class~="lg-inline"]) .lg-content .lg-icon { +.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon { font-size: 3vmax !important; height: 3vmax; } -.lg-prev { - left: 0 !important; -} - -.lg-next { - right: 0 !important; -} - .lg-toolbar .lg-icon:hover { color: var(--main-medium-color); } @@ -378,7 +362,7 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { .inline-gallery-container { width: 80%; - height: 70vmin; + height: 60vmin; } .light-gallery-captions { |