More tweaks

_plugins/dco.md

@@ -3,16 +3,15 @@ title: Certificate of Origin
 description: Enforce the DCO on Pull Requests
 slug: dco
 octicon: law
-color: 89A4C7
-background: http://media.istockphoto.com/vectors/coming-soon-vector-id616221958
 screenshots:
 - https://cloud.githubusercontent.com/assets/173/24482273/a35dc23e-14b5-11e7-9371-fd241873e2c3.png
-stars: 142
-installs: 48
 organizations:
 - linuxfoundation
 - kubernetes
 - nodejs
+stars: 142
+installs: 48
+author: bkeepers
 ---
 
 

_plugins/duplicate-issues.md

@@ -2,7 +2,7 @@
 title: Duplicate Issues
 description: Identify duplicate issues
 slug: dup
-octicon: issue-closed
-color: FEF9EB
-background: http://media.istockphoto.com/vectors/umbrella-vector-id518180852
+stars: 14
+installs: 4
+author: MarshallOfSound
 ---

_plugins/settings.md

@@ -7,6 +7,9 @@ color: F0B446
 background: http://media.istockphoto.com/vectors/human-hands-clapping-vector-id610140086
 topics:
 - administration
+stars: 114
+installs: 38
+author: bkeepers
 ---
 
 This GitHub Integration syncs repository settings defined in `.github/config.yml` to GitHub, enabling Pull Requests for repository settings.

_plugins/snooze.md

@@ -5,4 +5,6 @@ slug: snooze
 color: D96858
 background: http://media.istockphoto.com/vectors/working-vector-id515684016
 author: jbjonesjr
+stars: 2
+installs: 5
 ---

_plugins/stale.md

@@ -17,7 +17,9 @@ organizations:
 - exercism
 - github
 - npm
-author: github
+author: bkeepers
+stars: 112
+installs: 305
 ---
 
 After installing the integration, create `.github/stale.yml` in the default branch to enable it:

_plugins/wip.md

@@ -5,4 +5,7 @@ slug: wip
 octicon: alert
 color: D96858
 background: http://media.istockphoto.com/vectors/hanging-light-bulbs-with-glowing-one-on-yellow-background-vector-id516323432
+author: gr2m
+stars: 4
+installs: 7
 ---

assets/css/index.scss

@@ -4,6 +4,11 @@
 @import "primer-css/index.scss";
 @import "colors.scss";
 
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .featurette {
   padding-top: $spacer * 10;
   padding-bottom: $spacer * 10;
@@ -43,7 +48,6 @@
   z-index: 0;
 }
 
-
 figure {
   margin: 0;
   padding: $spacer-3;

index.html

@@ -14,14 +14,14 @@ layout: default
     <header class="py-6">
       <div class="pb-0 pt-md-4 py-lg-6">
         <div class="d-flex flex-items-center flex-justify-center">
-          <div class="flex-column col-3 text-right pr-4">
-            <img height="200" src="/assets/logo.png">
+          <div class="col-3 text-right p-4">
+            <img src="/assets/logo.png">
           </div>
           <div class="flex-column col-9">
             <h1 class="alt-h2 text-uppercase lh-condensed text-gray">Probot</h1>
             <h2 class="alt-h1 lh-condensed">
-              Stop relying on a human<br>
-              to do the work of a robot.
+              Why should a human<br>
+              do the work of a robot?
             </h2>
             <div class="alt-lead text-gray">GitHub Apps to automate and improve your workflow</div>
           </div>
@@ -31,23 +31,35 @@ layout: default
   </div>
 </div>
 <div id="explore">
-  <div class="container-lg px-3 py-6">
+  <div class="container-lg px-3 featurette">
     <h2 class="alt-h2 text-center">Explore</h2>
-    <p class="alt-lead text-center">Find all the things to do all the things.</p>
+    <p class="lead text-center col-md-8 col-sm-10 mx-auto">Replace this with a pitch about all the awesome apps built by the community that you can just use.</p>
 
     <div class="d-md-flex flex-wrap gutter flex-auto">
       {% for plugin in site.plugins limit:6 %}
-        <div class="flex-column col-lg-4 col-md-6 anim-fade-in mb-3 mt-3">
-          <a href="{{ plugin.url }}" class="d-block bg-white rounded-1 box-shadow border text-inherit no-underline" style="height:100%">
-            <div class="cover text-center position-relative p-4">
-              <div class="cover-bg" style="background-image: url({{ plugin.background }});"></div>
+        <div class="col-lg-4 col-md-6 mb-3 mt-3">
+          <a href="{{ plugin.url }}" class="d-flex flex-column bg-white rounded-1 box-shadow border text-inherit no-underline" style="height:100%">
+            <h3 class="h4 px-3 pt-3">{{ plugin.title }}</h3>
+            <p class="text-gray lh-condensed px-3 pb-3">{{ plugin.description }}</p>
+            <div class="text-gray-light pl-3 pr-2 py-2 bg-gray-light border-top" style="margin-top: auto;">
+              <div class="d-flex flex-row">
+                <div class="col-3 tooltipped tooltipped-s" aria-label="{{ plugin.installs }} installations">{% octicon cloud-download width:14 class:"v-align-middle" %} <span class="">{{ plugin.installs }}</span></div>
+                <div class="col-3 tooltipped tooltipped-s" aria-label="{{ plugin.stars }} stars">{% octicon star heigh:16 class:"v-align-middle" %} <span class="">{{ plugin.stars }}</span></div>
+                <div class="col-6 text-right" style="margin-top: auto;">
+                  <img class="avatar tooltipped tooltipped-s" aria-label="Made by {{ plugin.author }}" height="24" src="https://github.com/{{ plugin.author }}.png">
+                </div>
+              </div>
             </div>
-            <h3 class="lh-condensed px-3 pt-3">{{ plugin.title }}</h3>
-            <p class="lh-condensed px-3 pb-3">{{ plugin.description }}</p>
           </a>
         </div>
       {% endfor %}
     </div>
+
+    <div class="text-center my-6">
+      <h3 class="alt-h2">By the community, for the community</h3>
+      <p class="lead mx-auto col-md-8">Find a bunch of really cool plugins built by other people in the community, just for you.</p>
+      <a class="btn btn-outline">Explore more plugins</a>
+    </div>
   </div>
 </div>
 
@@ -88,8 +100,6 @@ module.exports = robot => {
         </div>
       </div>
 
-
-
       <div class="mt-6">
         <div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center my-4">
           <div class="col-6 d-flex flex-column pr-6">