fix sponsors background color for readability

Signed-off-by: Outsider <outsideris@gmail.com>
mochajs · Aug 16, 2019 · a0cd199 · a0cd199
1 parent 5f1cad5
commit a0cd199
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/docs/_includes/default.html b/docs/_includes/default.html
@@ -22,43 +22,41 @@
     <header id="_header">
       <h1>
         <a href="/">
-          <img
-            id="mocha-logo"
-            src="/images/mocha-logo.svg"
-            alt="Mocha logo"
-          />
+          <img id="mocha-logo" src="/images/mocha-logo.svg" alt="Mocha logo" />
         </a>
       </h1>
       <p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
     </header>
 
     <main id="content">{{ content }}</main>
-	
-	<aside class="sponsorship">
-		<a href="https://matomo.org/" rel="external noopener" target="_blank">
-			<img 
-				id="matomoLogo"
-				src="images/matomo-logo.png?trim"
-				alt="Matomo logo"
-			/>
-		</a>
-	</aside>
+
+    <aside class="sponsorship">
+      <a href="https://matomo.org/" rel="external noopener" target="_blank">
+        <img
+          id="matomoLogo"
+          src="images/matomo-logo.png?trim"
+          alt="Matomo logo"
+        />
+      </a>
+    </aside>
 
     <footer>
       <div>
         <a rel="home" href="https://mochajs.org/">mochajs.org</a>
         is licensed under a
         <a
           rel="license external noopener"
-          href="https://creativecommons.org/licenses/by/4.0/">
+          href="https://creativecommons.org/licenses/by/4.0/"
+        >
           Creative Commons Attribution 4.0 International License</a
         >.
         <dl class="dl-inline last-modified">
           <dt>Last updated</dt>
           <dd>
             <time
               itemprop="lastModified"
-              datetime="{{ 'now' | date: '%Y-%m-%dT%H:%M:%SZ' }}">
+              datetime="{{ 'now' | date: '%Y-%m-%dT%H:%M:%SZ' }}"
+            >
               {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}
             </time>
           </dd>

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,12 @@ nav.badges a + a {
   height: 64px;
 }
 
+.faded-images {
+  background-color: #ddd;
+  border-radius: 20px;
+  box-shadow: 0px 0px 8px 8px #ddd;
+}
+
 .faded-images img {
   opacity: 0;
   transition: opacity 0.3s;
@@ -200,12 +207,12 @@ img.screenshot {
 }
 
 #matomoLogo {
-    display: block; 
+    display: block;
     height: 176px;
 }
 
 .sponsorship {
-    display: flex; 
+    display: flex;
     justify-content: center;
 	margin-bottom: 60px;
 }