| -rw-r--r-- | internal/glightbox/html_renderer.go | 4 | ||||
| -rw-r--r-- | static/input.css | 26 |
2 files changed, 6 insertions, 24 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index 7022793..deafb4d 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -133,7 +133,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, } w.WriteString(fmt.Sprintf(` -<div class="justify-content-center display-block"> +<div class="justify-content-center display-block m-1"> <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto"> <div class="grid masonry-grid-%s mx-auto"> <div class="grid-sizer grid-sizer-%s"></div> @@ -156,7 +156,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, function initMasonryLayout_%s(tm) { clearTimeout(imgLoad_%s_timer); - imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 100); + imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 300); } imgLoad_%s.on('progress', initMasonryLayout_%s); diff --git a/static/input.css b/static/input.css index 4fcadd1..836d840 100644 --- a/static/input.css +++ b/static/input.css @@ -445,18 +445,12 @@ a:hover, .linklike:hover { border-color: transparent transparent var(--background-dark-color) transparent; } -.grid-item { +.grid-item, .grid-sizer { position: relative; display: inline-block; width: 10rem; } -.grid-sizer { - position: relative; - display: inline-block; - width: 10.1rem; -} - .grid-item-index { visibility: visible; opacity: 1; @@ -481,42 +475,30 @@ a:hover, .linklike:hover { } @container main (width >= 40rem) { - .grid-item { + .grid-item, .grid-sizer { width: 12rem; } - .grid-sizer { - width: 12.1rem; - } - .grid-item-2x { width: 24rem; } } @container main (width >= 76rem) { - .grid-item { + .grid-item, .grid-sizer { width: 18rem; } - .grid-sizer { - width: 18.1rem; - } - .grid-item-2x { width: 36rem; } } @container main (width >= 128rem) { - .grid-item { + .grid-item, .grid-sizer { width: 24rem; } - .grid-sizer { - width: 24.1rem; - } - .grid-item-2x { width: 48rem; } |