make card rounding the same as on the website

[maelle]

https://github.com/cynkra/cynkrablog/commit/f52768cdaf4a87df3dcbd4438b5d3aa5262156dd

[maelle]

First idea: look on https://getbootstrap.com/docs/4.0/components/card to see whether there's a tweak. I then found https://getbootstrap.com/docs/4.0/utilities/borders/#border-radius but with Quarto we probably don't have that much control over the HTML?

To be continued

[maelle]

I went the "adding a rule in custom.css" route. I tried making the rule specific to cards in the post listing because what if we add cards elsewhere and don't want them rounded. I had to remind myself of the possible values for border-radius, I first used ".25" but had to change it to "25%" for it to work.

[maelle]

Actually 30px looks better but the image at the top doesn't have the rounded corners yet!

[maelle]

I add to add a border-radius property on the image on the card too. I followed https://developer.mozilla.org/fr/docs/Web/CSS/border-radius to know how to add it for the top corners only.

[maelle]