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.