From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 23 Jul 2024 06:57:42 +0000 (-0700)
Subject: Set precise card heights
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=25dc3329bbe951dddae9eee9ad43bff2f4a422ab;p=ardislu.dev

Set precise card heights

This change removes excessive padding in some cards to improve the masonry layout. Setting max-block-size is required when there are not enough cards to fill the screen height (e.g. on search).
---

diff --git a/script.js b/script.js
index 5cc6af3..5770d61 100644
--- a/script.js
+++ b/script.js
@@ -88,13 +88,11 @@ function buildHomeComponent(metadata) {
 
   // Sets grid-row-end for each card when the homepage is resized. Required to implement masonry layout.
   new ResizeObserver(_ => {
-    const halfRemHeight = parseFloat(getComputedStyle(document.documentElement).fontSize) / 2;
-    for (let card of home.children) {
-      let contentHeight = 0;
-      for (let child of card.children) {
-        contentHeight += child.clientHeight;
-      }
-      card.style.gridRowEnd = `span ${Math.ceil(contentHeight / halfRemHeight)}`;
+    for (const card of home.children) {
+      const contentHeight = Array.from(card.children).reduce((acc, cur) => acc + cur.clientHeight, 0);
+      const cardHeight = contentHeight + 128; // 6 * 16px gaps + 2 * 16px padding
+      card.style.gridRowEnd = `span ${Math.ceil(cardHeight / 16)}`; // 16px grid gap
+      card.style.maxBlockSize = `${cardHeight}px`;
     }
   }).observe(home);