use smaller imgs for backers

mochajs · May 18, 2020 · 76f2142 · 76f2142
1 parent 18b1745
commit 76f2142
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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 {