From 76f2142d831128dae1b7148acb3e0ba9f6782100 Mon Sep 17 00:00:00 2001
From: Christopher Hiller <boneskull@boneskull.com>
Date: Mon, 18 May 2020 14:51:28 -0700
Subject: [PATCH] use smaller imgs for backers

---
 docs/_data/supporters.js | 17 ++++++++++++-----
 docs/css/style.css       |  7 ++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/docs/_data/supporters.js b/docs/_data/supporters.js
index f4c9cdc296..975d8f46a1 100644
--- a/docs/_data/supporters.js
+++ b/docs/_data/supporters.js
@@ -18,7 +18,8 @@ const query = `query account($limit: Int, $offset: Int, $slug: String) {
           name
           slug
           website
-          avatar: imageUrl(height:64)
+          imgUrlMed: imageUrl(height:64)
+          imgUrlSmall: imageUrl(height:32)
           type
         }
         totalDonations {
@@ -36,7 +37,8 @@ const nodeToSupporter = node => ({
   name: node.fromAccount.name,
   slug: node.fromAccount.slug,
   website: node.fromAccount.website,
-  avatar: node.fromAccount.avatar,
+  imgUrlMed: node.fromAccount.imgUrlMed,
+  imgUrlSmall: node.fromAccount.imgUrlSmall,
   firstDonation: node.createdAt,
   totalDonations: node.totalDonations.value * 100,
   type: node.fromAccount.type
@@ -97,9 +99,14 @@ module.exports = async () => {
     .sort((a, b) => b.totalDonations - a.totalDonations)
     .reduce(
       (supporters, supporter) => {
-        supporters[
-          supporter.type === 'INDIVIDUAL' ? 'backers' : 'sponsors'
-        ].push(supporter);
+        if (supporter.type === 'INDIVIDUAL') {
+          supporters.backers.push({
+            ...supporter,
+            avatar: supporter.imgUrlSmall
+          });
+        } else {
+          supporters.sponsors.push({...supporter, avatar: supporter.imgUrlMed});
+        }
         return supporters;
       },
       {sponsors: [], backers: []}
diff --git a/docs/css/style.css b/docs/css/style.css
index 5ec74e4d6a..fba287b739 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -103,9 +103,10 @@ ul.image-list li img {
 }
 
 ul#backers.image-list li img {
-  width: 64px;
-  height: 64px;
-  clip-path: inset(0, 0, 64px, 64px);
+  width: 32px;
+  height: 32px;
+  /* clip images to 32x32 */
+  clip-path: inset(0, 0, 32px, 32px);
 }
 
 .faded-images img {