Vanilla HTML/CSS recipe page

What are you most proud of, and what would you do differently next time?

I think it could be very easy to overcomplicate this flexbox or grid. I stuck with default block layouts and accomplished things pretty simply. The downside to this choice is that I had to deal with margins which has left me with a lot of somewhat ugly selectors to handle margins correctly. I should probably being using many more classes to help me get rid of those ugly selectors.

What challenges did you encounter, and how did you overcome them?

I struggled a lot with the image. I deduced early that the max width of the banner image was exactly 50% of the size of the image that was given. This led to me trying to figure out some way to set the image's initial size to 50% of itself without using javascript or modifying the original image. This was a complete overcomplication of an otherwise simple problem.

What specific areas of your project would you like help with?

One annoying part of a standard block layout is that you have to be awfully particular about margins, most often top margins on :first-child elements and bottom-margins on :last-child elements. I'm curious if there's a good way to simplify this without resorting to classes. While classes are great, I would take the trade of some uglier css selectors if I can add and remove content from my markdown without having to both with making sure the correct css classes are set.