Improve logos on the landing page.

[lemonsaurus]

Right now, there are three problems with the logos displayed in our sponsor hero and in the footer of the site.

An alignment issue with the logos on Windows.

This problem is described in #458. We should optimize the background-position so that these logos will be optimally aligned on Windows machines, since our typical visitor is a Windows user.

Hacky filtering to turn logos into white logos

Right now, we're using filter in CSS to turn the Django and Linode logos into something that will fit on our footer. This causes a weird display problem on mobile (seen in #458), and also poses a problem for implementing the dark theme. Let's just add staticfiles for these logos in the right size, and we will reduce the load time and make it much easier to build a dark theme around.

Sponsor logos are arbitrarily sized

Why is the CloudFlare logo absolutely enormous, but other logos (like netCup) are tiny? It certainly doesn't represent the scope of the partnerships we have with these companies. Let's try to make these sizes more even, or choose different logos that can better fit into a smaller space for some partners.

I'll be tackling this personally.

[hedyhli]

(Re: Hacky filtering on footer logos) [...] and also poses a problem for implementing the dark theme

The alignment issue still exists, and it would be good if the linode logo green color is preserved, however there is no issue in dark theme caused by this 👍.

Sponsor logos are arbitrarily sized

This issue would be fixed in my dark theme PR (#1176).

[hedyhli]

A little update on this issue since the dark theme has been merged.

Hacky filtering to turn logos into white logos

We now have dark versions of logos for django and linode in our static assets made by lemon.

Sponsor logos are arbitrarily sized

This issue is now fixed IMO. All sponsor logos in the first two rows take up the same height and 1/3 of the total width. Netlify and Cloudflare use the same width as others but share the last row with 1/2 of the total width.

On mobile, I've made all logos fit the (slimmer) horizontal width with a dynamic height.