Move to Open Collective

* Sponsor & backers section on front page + donate button
* Fetch backers from Open Collective API every 24 hours
* Add sponsors page
* Remove Facebook social icon + link
* Add Open Collective (social) icons + links
* Mention Open Collective on "get involved" page
* In footer, replace Lightbend's "professional support" with "Professional support"

Author: mkurz

app/assets/css/modules/_buttons.styl

@@ -20,3 +20,11 @@ button(color, size= big)
         box-shadow: inset 0 -5px 0 color - #222, inset 0 -7px 5px rgba(#fff, .3), 0 1px 3px rgba(#000, .2)
         text-shadow: 1px 2px 1px color - #222
 
+.donate-button
+    text-align: center
+    a
+        button: green
+        display: inline-block
+    a:hover
+        text-decoration: none
+        color: #fff

app/assets/css/modules/_footer.styl

@@ -95,7 +95,7 @@ body > footer
             retina("support/community.png", auto 50px)
         &.professional
             margin-left: 50px
-            background: image("support/lightbend-icon-reverse.svg") no-repeat
+            background: image("support/opencollective-icon-reverse.svg") no-repeat
             background-size: auto 50px
 
 

app/assets/css/modules/_header.styl

@@ -44,7 +44,7 @@
             box: 32px 32px
             float: left
             background: image("layout/social-icons.png") no-repeat
-            retina("layout/social-icons.png", 180px)
+            retina("layout/social-icons.png", 210px)
             &[href*=twitter]
                 social(0)
             &[href*=google]
@@ -57,6 +57,8 @@
                 social(4)
             &[href*=discuss]
                 social(5)
+            &[href*=opencollective]
+                social(6)
 
             span
                 display: none

app/assets/css/pages/_code.styl

@@ -5,16 +5,7 @@
     h2, h3
       clear: both
       padding-top: 20px
-    a
-      &:after
-        content: none
-        display: none
-      img
-        display: block
-        float: left
+    people-faces(32px)
 
   .coreteam a img
     height: 64px
-
-  .contributors a img
-    height: 32px

app/assets/css/pages/_home.styl

@@ -200,7 +200,7 @@
         background: image("home/mac.png") 0 0
         retina("home/mac.png", 332px 310px)
 
-#references, #sponsors
+#references, #sponsors-backers
     text-align: center
     img
         margin: 0 .75rem
@@ -211,7 +211,6 @@
     a
         position: relative
         text-decoration: none
-        color: white
         transition: color 300ms ease-in
         span
             display: block
@@ -224,9 +223,14 @@
             color: #50b4a2
             transition: color 200ms ease-out
 
-#sponsors
-    h2
+#sponsors-backers
+    h2, h3
         margin: 10px 10px 40px 10px
+        padding-top: 20px
+        clear: both
+
+#backers
+    people-faces(32px, 32px)
 
 @media only screen and (max-width: 960px)
     .home

app/assets/css/pages/_index.styl

@@ -6,6 +6,7 @@
 @import "_getting-started.styl"
 @import "_home.styl"
 @import "_involved.styl"
+@import "_sponsors.styl"
 @import "_main.styl"
 @import "_modules.styl"
 @import "_support.styl"

app/assets/css/pages/_involved.styl

@@ -34,4 +34,6 @@
                 background-position: 0 -150px
             &.modules:after
                 background-position: 0 -50px
+            &.opencollective:after
+                background-position: 0 -250px
 

app/assets/css/pages/_main.styl

@@ -1,4 +1,4 @@
-.getInvolved, .modules, .code, .security, .changelog, .markdown, .outreachy, .support, .getting-started, .alternatives
+.getInvolved, .sponsors, .modules, .code, .security, .changelog, .markdown, .outreachy, .support, .getting-started, .alternatives
     aside li
         padding: 4px 0
         text: center

app/assets/css/pages/_sponsors.styl

@@ -0,0 +1,2 @@
+.sponsors
+    @extend .content-column

app/assets/css/util/_helpers.styl

@@ -46,3 +46,18 @@ overflow(arg)
 hide-text()
     overflow: hidden
     text-indent: -99em
+
+people-faces(height=0, width=0)
+    a
+        &:after
+            content: none
+            display: none
+        img
+            display: block
+            float: left
+            margin: 0
+            if height != 0
+                height: height
+            if width != 0
+                width: width
+