Use native lazy loading and a two-column pictures grid

2026-09-19 14:34:57 +03:30
parent ec8acc0eef
commit 86dcfd71cb
3 changed files with 41 additions and 9 deletions
@@ -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;