fix sponsors background color for readability (#3988)

Signed-off-by: Outsider <outsideris@gmail.com>
mochajs · Nov 2, 2019 · 503d017 · 503d017
1 parent f73e7c6
commit 503d017
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/docs/_includes/sponsors.md b/docs/_includes/sponsors.md
@@ -1,9 +1,10 @@
 ## Sponsors
 
-Use Mocha at Work?  Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project.  Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors).
+Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors).
 
 <!-- markdownlint-disable MD034 -->
-{% for i in (0..15) %}[![](https://opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %}
+
+{% for i in (0..15) %}[![](https://opencollective.com/mochajs/sponsor/{{ i }}/avatar.png)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="\_blank"} {% endfor %}
 {: .image-list .faded-images}
 
 <script src="js/avatars.js"></script>
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -76,10 +76,11 @@ nav.badges a + a {
 
 .image-list {
   overflow: hidden;
+  text-align: center;
 }
 
 .image-list a {
-  float: left;
+  display: inline-block;
   margin: 6px;
 }
 
@@ -88,6 +89,15 @@ nav.badges a + a {
   height: 64px;
 }
 
+.faded-images {
+  background-color: #ddd;
+  border: 1px solid;
+  border-color: #ddd #ddd #ccc;
+  border-radius: 3px;
+  padding: 1em;
+  box-shadow: inset 0 0 10px #ccc;
+}
+
 .faded-images img {
   opacity: 0;
   transition: opacity 0.3s;