From 29b9f94d2ba0fbd0380d3aa52b5c3e8b8272f5ac Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 7 Apr 2018 12:34:27 +0300
Subject: [PATCH] Add top contributors to landing page

---
 docs/mini/flavor.scss   | 18 ++++++++++++++++++
 static-parts/index.html | 40 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
index 9a74715c7..ad5296d12 100644
--- a/docs/mini/flavor.scss
+++ b/docs/mini/flavor.scss
@@ -640,3 +640,21 @@ ul#links {
     }
   }
 }
+
+.card.contributor {
+  height: calc(100% - 1rem);
+  justify-content: left;
+  > .section.media {
+    height: auto;
+  }
+  > .section.button {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-align: center;
+    transition: color 0.3s;
+    &:hover, &:focus {
+      color: var(--a-l-col);
+      background: #f8f8f8;
+    }
+  }
+}
diff --git a/static-parts/index.html b/static-parts/index.html
index 6f2010aa6..781f74a69 100644
--- a/static-parts/index.html
+++ b/static-parts/index.html
@@ -100,11 +100,45 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
-      <h2 class="index-section">Top contributors</h2>
-      <p style="text-align: justify">TODO using Github API</p><br/>
+  <div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
+    <h2 class="index-section">Top contributors</h2>
+      <div class="row">
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/Chalarangelo.png"/>
+          <a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/fejes713.png"/>
+          <a href="https://github.com/fejes713" class="section button">Stefan Feješ</a>
+          </div></div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/flxwu.png"/>
+          <a href="https://github.com/flxwu" class="section button">Felix Wu</a>
+          </div></div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/atomiks.png"/>
+          <a href="https://github.com/atomiks" class="section button">atomiks</a>
+          </div></div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/kingdavidmartins.png"/>
+          <a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
+          </div></div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/kriadmin.png"/>
+          <a href="https://github.com/kriadmin" class="section button">Rohit Tanwar</a>
+          </div></div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/iamsoorena.png"/>
+          <a href="https://github.com/iamsoorena" class="section button">Soorena Soleimani</a>
+          </div></div>
+        <div class="col-sm-6 col-md-3 col-lg no-padding"><div class="card fluid contributor">
+          <img class="section media" src="https://github.com/skatcat31.png"/>
+          <a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
+          </div></div>
     </div>
   </div>
+</div>
   <div class="row">
     <div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
       <h2 class="index-section">How to contribute</h2>