Add comparison index page.

[ericholscher]

This cleans up the website footer.

FIxes #234

---

📚 Documentation preview 📚: https://readthedocs-about--350.org.readthedocs.build/

[humitos]

Makes sense to me.

[ericholscher]

Alright, I think I got something nicer:

I had to use explicit CSS to make the height of the images the same -- is there a way to do this with semantic UI? I wasn't sure how to target it with an external CSS file for something small like this.

[humitos]

I like it. The whole card is clickable now and it moves a little when you hover, which is a good visual differentiator 👍🏼

The inline CSS is a problem, tho, I'm not sure why you weren't able to use a class and put it outside the HTML. I'm sure I had a similar problem in other places already and I fixed it somehow. Maybe you can check the other files.

[humitos]

Found it! Yeah, actually, it's in the index file in https://github.com/readthedocs/site-community/blob/05cad1a501968b3ecabcc7450d2fff972bb470c3/content/includes/users-sphinx.html#L4-L59

he, it seems the solution was to make all the images the same height 😉 and skip using CSS... Very smart 🧠 movement, haha

[agjohnson]

Yup, all images should be edited to be the same proportions going in.

[agjohnson]

You should instead edit the images to get similar proportions and alignment.

.ui.small.image already controls the size and centering of the image, inline styles or a statically sized segment shouldn't be used to dictate this.

[ericholscher]

I don't have a way to edit SVG images easily. Seems like a bug in Semantic UI not being able to set an explicit height. I'm just going to merge this with offset heights, because it's better than not having it.