reset size of avatars and move o 4 columns to minimize page length

_data/1kcontributor-list.yaml

@@ -4290,11 +4290,6 @@ links:
   name: Eduardo Ramirez
   avatar: "https://avatars.githubusercontent.com/u/42619854?u=a0c124d69e39fd34fc565a2bfa1585a15a53583b&v=4"
 
-- login: protean-bot
-  url: https://github.com/protean-bot
-  name: Not Provided
-  avatar: "https://avatars.githubusercontent.com/u/43053909?v=4"
-
 - login: 0SkillAllLuck
   url: https://github.com/0SkillAllLuck
   name: Cedric Lewe
@@ -4621,11 +4616,6 @@ links:
   name: Lars
   avatar: "https://avatars.githubusercontent.com/u/60571459?v=4"
 
-- login: quarkusbot
-  url: https://github.com/quarkusbot
-  name: quarkusbot
-  avatar: "https://avatars.githubusercontent.com/u/61254497?u=c06c010bbbf0caac2d0090bcb1560e4524f5c11a&v=4"
-
 - login: wiebeck
   url: https://github.com/wiebeck
   name: Oliver \"sLoP\" Wiebeck

_includes/1kcontributor-list-band.html

@@ -14,15 +14,16 @@ <h2 class="mt-0">Quarkus is 1000% for the community </h2>
     <h2>The Amazing 1000 Contributors</h2>
     <p>We'd like to recognize and thank these 1000 contributors who've dedicated their time and efforts to take Quarkus from just an idea to the one of the best Java frameworks in open source.</p>
 </div>
-  <div class="grid-wrapper click-cards">
+  <div class="grid-wrapper contrib-cards">
   {% for item in site.data.1kcontributor-list.links %}
       <div class="card">
         <a href="{{ item.url }}" target="_blank"></a>
         <div>
-          <img src="{{ item.avatar }}">
-          <p><strong>{{ item.name }}</strong><br/>
-            Github: {{ item.login }}
-          </p>
+          <img class="headshot" src="{{ item.avatar }}">
+        </div>
+        <div>
+          <p class="title">{{ item.name }}</p>
+          <p class="description">Github: {{ item.login }}</p>
         </div>
       </div>
   {% endfor %}

_sass/includes/contributor_list.scss

@@ -0,0 +1,75 @@
+.contrib-cards {
+
+
+    a, a:hover, a:focus {
+      text-decoration: none;
+    }
+
+    ul.list-item {
+    grid-gap: 1.5em;
+    list-style: none;
+    padding: 0;
+    margin-top: 0;
+    }
+
+    ul.list, ul.list-item {
+      list-style: none;
+      padding: 0;
+    }
+
+    .card {
+      border: 1px solid var(--card-outline);
+      border-radius: 10px;
+      padding: 1rem;
+      position: relative;
+      height: calc(100% - 2rem);
+      grid-column: span 3;
+      display: flex;
+      flex-direction: row;
+
+        @media screen and (max-width: 1300px) {
+         grid-column: span 6;
+        }
+
+        @media screen and (max-width: 768px) {
+          grid-column: span 12;
+        }
+
+        @media screen and (max-width: 480px) {
+          grid-column: span 12;
+        }
+
+      > a {
+        position: absolute;
+        top: 0; left: 0;
+        height: 100%; width: 100%;
+        }
+
+      .headshot {
+        max-width: 3rem;
+        max-height: 3rem;
+        margin-right: .75rem;
+        }
+
+      .title {
+        font-weight: 600;
+        margin: 0;
+        }
+
+      .description {
+        margin: 0;       
+        }
+
+      .content-highlights p {
+        font-size: .7rem;
+        line-height: .8rem;
+        opacity: 0.8;
+      }
+
+      &:hover, &:focus {
+        background-color: var(--card-background-color-hover);
+        border:1px solid var(--card-background-color-hover);
+      }
+    }
+
+}

assets/css/main.scss

@@ -65,5 +65,6 @@ $baseurl: "{{ site.baseurl }}";
 @import "includes/tooltip";
 @import "includes/language-band.scss";
 @import "includes/homepage-userstory-callout";
+@import "includes/contributor_list.scss";
 @import "includes/brand";