diff --git a/_plugins/lazy_images.rb b/_plugins/lazy_images.rb new file mode 100644 index 0000000..355b79b --- /dev/null +++ b/_plugins/lazy_images.rb @@ -0,0 +1,11 @@ +require 'nokogiri' + +module LazyImages + def lazy_images(content) + fragment = Nokogiri::HTML::DocumentFragment.parse(content) + fragment.css('img').each { |image| image['loading'] = 'lazy' } + fragment.to_html + end +end + +Liquid::Template.register_filter(LazyImages) diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 649a098..50f71f2 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -219,6 +219,35 @@ hr { display: block; } +.art .post-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: $spacing-unit; + align-items: start; + + > li { + min-width: 0; + margin-top: 0; + } + + .post-content > p:last-child { + margin-bottom: 0; + } + + img { + display: block; + width: 100%; + height: auto; + margin: 0; + // Reserve space before lazy images load, then use their natural proportions. + aspect-ratio: auto 3 / 2; + } + + @include media-query($on-palm) { + grid-template-columns: 1fr; + } +} + .art .image-details { position: absolute; top: 10px; diff --git a/art.html b/art.html index f419501..6dc580d 100644 --- a/art.html +++ b/art.html @@ -33,19 +33,11 @@ layout: default {% continue %} {% endif %}