From 86dcfd71cb23e439a749e41569106540f31fd5e9 Mon Sep 17 00:00:00 2001
From: Mahdi Dibaiee <mdibaiee@pm.me>
Date: Sat, 19 Sep 2026 14:34:57 +0330
Subject: [PATCH] Use native lazy loading and a two-column pictures grid

---
 _plugins/lazy_images.rb | 11 +++++++++++
 _sass/_layout.scss      | 29 +++++++++++++++++++++++++++++
 art.html                | 10 +---------
 3 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 _plugins/lazy_images.rb

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 %}
       <li class='lang-{% if post.lang %}{{ post.lang }}{% else %}en{% endif %}'>
-        <h2>
-          <!--<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>-->
-
-          <!--<p class="post-meta">
-            <span>{{ post.date | date: "%b %-d, %Y" }}</span>
-            {% if post.meta %} • <span>{{ post.meta }}</span>{% endif %}
-          </p>-->
-
         <article class='post-content'>
           {% if post.anchor %}
           <span id='{{ post.title }}'></span>
           {% endif %}
-          {{ post.content | markdownify }}
+          {{ post.content | markdownify | lazy_images }}
         </article>
       </li>
     {% endfor %}