add services's logo to both website and Readme #3627

[Mia-jeong]

Hi.

I added services's logo to both website and Readme as mentioned in #3627
I modified files below

1. default.html
   • add services we consume(Matomo, Travis CI, AppVeyor Netlify, Coveralls)
2. sponsors.md
   • add sponsors(jetbrains, wallabyJs, saucelabs)
3. style.css
   • add class to position logo images better
4. images directory
   • add logo images to it

[jsf-clabot]

All committers have signed the CLA.

[coveralls]

Coverage increased (+0.07%) to 92.803% when pulling 1d2fc53 on Mia-jeong:fix-issue-3627 into 5f8df08 on mochajs:master.

[outsideris]

Separeting these logos from opencollective is better.

[Mia-jeong]

Okay. I will separate it, thank you :)

[outsideris]

Can't we use svg logo?

[Mia-jeong]

I wanted to,
Here are the reasons I changed the file from svg to png.

1. image resize problem
   in Readme.md I wasn't able to use code below to resize file
   (1) ![](url path =250x250) (2) ![](url path | width=100) (3) ![](url path){ width: 200px; }
   So if I want to resize file , all I have to do is to use .
   but in Readme, All contents are written in markdown language.
   I don't want to break it because of my code.

2. file path problem
   If I used img tag, I couldn't get the image using relative path.
   like below
   '' src='./docs/images/someimages.png' ''
   If I wanted to use file in docs/images/
   https://raw.githubusercontent.com/mochajs/mocha/master/docs/images/matomo-logo.png
   I had to use file path above. but as far as svg file is concerned, I wasn't able to get the right path to get the file.

so I just decided to make new file with the size I want. so the file turns out into png.
if I missed something, please let me know, thank you for the feedback.
I really appreciate it.

[Mia-jeong]

I added services logo to both Readme and Website.

Description of the Change

1. Document

I modified files below

1. default.html :
   • add logos to <aside />
   • I separate it into 2 sections
     • Usage : Services mocha consume
     • Support : Services supported for mocha.
   • add open Js Foundation logo to <footer/>
2. style.css
   • add classes of footer-box, footer-logo, footer-content in order to insert Open Js foundation logo to footer.

.footer-box{
  display: flex;
}
.footer-logo{
  flex: none;
  margin-left: 70px;
}
.footer-content{
  margin-left: auto;
}

• add css to aside and modify sponsorship class in order to insert both service's logo.

aside {
  margin: 0 auto 20px;
  max-width: 920px;
  padding-left: 30px;
  padding-right: 30px;
}

aside span{
  background-color: #8d6748;
  border-radius: 0.3em;
  color: #ffffff;
  display: block;
  padding: 3px;
  margin-bottom: 30px;
  width: 180px;
  font-size: 14px;
  text-align: center;
}

.sponsorship {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
  align-items: center;
  display: inline-flex;
  margin-bottom: 40px;
  flex-flow: row wrap;
}

.sponsorship img{
  display: block;
  width: 160px;
}

.sponsorship a {
  padding: 0 40px;
  padding: 10px 30px;
  margin-top: auto;
  margin-bottom: auto;
}

• add classes only for jetbrains and wallabyJs, I did it especially because of Jetbrains, because Jetbrains has guideline for their logo, I will explain it again below.

#jetbrains-logo{
  width: 140px;
}

#wallabyjs-logo{
  width: 100px;
}

• images/ (directory)
  • add logo images to it (appVeyor-logo.png, coveralls-logo.png, jetbrains-logo.png, matomo-logo.png, saucelabs-logo.png, travisCi-logo.png, wallabyJs-logo.png

AS-IS

TO-BE

2. Readme

• I add html tags to Readme in order to insert logos
• I used <img /> tag because I wanted to resize images to make it look better.
  <a href="https://www.jetbrains.com/" target="_blank"><img alt="Jetbrains" src="https://raw.githubusercontent.com/mochajs/mocha/master/docs/images/jetbrains-logo.png" height="140px" ><img></a>
• I separated it into 3 sections
  • Foundation: Foundation Mocha belongs to
  • Support
  • Usage
• I add some descriptions of each sections, if you have any ideas about it. please let me know thank you :)

AS-IS

TO-BE

• if you see Readme.md in my branch, the logo are going to be seen as not loading image. Because I used url below.
  src="https://raw.githubusercontent.com/mochajs/mocha/master/docs/images/jetbrains-logo.png"
  I found out that if I upload images to github, I can get the image using
  https://raw.githubusercontent.com/#github-id/#repository-name/#branch/#path/#image-file-name
  so if this request is merged into master, it work out like the picture attached above.

Additional Information

regarding Readme, the position of logos look a little bit awkward. in fact I wanted to alter logos especially for Readme
but I wasn't able to do it.
Here're the reasons I used the original logos.

1. Some services have the guidelines of the usage of their own logo.
   for example, Travis-Ci, it says that "please don't alter the logo in any way". and Jetbrains, it says that In digital the smallest size the black box in the middle of the logo can be reproduced at is 50px.
   That's why I decided to stick to original ones to respect all of the efforts they make to create logo :)

2. I can't use style tag in Readme.md in github. I tried it a lot but it didn't work out.

so I just did my best to look them better as soon as I can.

Thank you :)

[boneskull]

this has been sitting for a long time, I apologize. not sure we can use it in its current state though... please let us know if you want to pursue this further. marking stale