diff options
| -rw-r--r-- | internal/glightbox/html_renderer.go | 4 | ||||
| -rw-r--r-- | static/input.css | 26 |
2 files changed, 24 insertions, 6 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index deafb4d..7022793 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 m-1"> +<div class="justify-content-center display-block"> <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(), 300); + imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 100); } imgLoad_%s.on('progress', initMasonryLayout_%s); diff --git a/static/input.css b/static/input.css index 836d840..4fcadd1 100644 --- a/static/input.css +++ b/static/input.css @@ -445,12 +445,18 @@ a:hover, .linklike:hover { border-color: transparent transparent var(--background-dark-color) transparent; } -.grid-item, .grid-sizer { +.grid-item { position: relative; display: inline-block; width: 10rem; } +.grid-sizer { + position: relative; + display: inline-block; + width: 10.1rem; +} + .grid-item-index { visibility: visible; opacity: 1; @@ -475,30 +481,42 @@ a:hover, .linklike:hover { } @container main (width >= 40rem) { - .grid-item, .grid-sizer { + .grid-item { width: 12rem; } + .grid-sizer { + width: 12.1rem; + } + .grid-item-2x { width: 24rem; } } @container main (width >= 76rem) { - .grid-item, .grid-sizer { + .grid-item { width: 18rem; } + .grid-sizer { + width: 18.1rem; + } + .grid-item-2x { width: 36rem; } } @container main (width >= 128rem) { - .grid-item, .grid-sizer { + .grid-item { width: 24rem; } + .grid-sizer { + width: 24.1rem; + } + .grid-item-2x { width: 48rem; } |