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. |
content/partials/basic.html
Outdated
| <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.
There was a problem hiding this comment.
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.
This cleans up the website footer.
FIxes #234
📚 Documentation preview 📚: https://readthedocs-about--350.org.readthedocs.build/