Add comparison index page. #350
Conversation
This cleans up the website footer.
|
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. |
|
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. |
|
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 |
|
Yup, all images should be edited to be the same proportions going in. |
| <div class="ui basic padded segment" style="height: 100px; display: flex; align-items: center; justify-content: center;"> | ||
| <div class="ui small centered image"> | ||
| <img src="{{ logo_url }}" alt="{{ logo_alt }}" style="max-height: 50px; width: auto;"> |
There was a problem hiding this comment.
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.
This cleans up the website footer.
FIxes #234
📚 Documentation preview 📚: https://readthedocs-about--350.org.readthedocs.build/