All solutions

First time trying a flexbox on the body to center a component vertically and horizontally. Ran into some weird stuff with media queries where the components may have wanted to stretch off the page, could be width rules creating conflicts. It all works but was not as seamless as I would have guessed.

Anybody prefer this pattern of centering on the page? And why?

I wasn't always getting space at the bottom of the screen as was shown in the mobile layout, when adding a margin-bottom. So I created a "footer" div with a height that kicked in on mobile layouts. This solved the problem. I know, not a critical thing for the layout, but it was there and I wanted to be sure it was included.

Any ideas of why margin-bottom wouldn't have worked? And/or other ways of implementing it?

I haven't yet used a framework. Using vanilla JS while dynamically updating content can be quite tedious. I did create a utility function to create a new element and add it to a parent, but much of the other functionality I just left inside the event listener body. Not the best but this is just a small component. However, I did enjoy using documentFragement to update the DOM in one swoop, so let me know what you think of that and if you have any tips or ideas!

I used the CSS property clip-path like so:

clip-path: ellipse(60% 55% at 50% 45%);

to create the curves at the bottom of the hero and main sections. Any other ideas of ways to do that? It reminded me of making an layering shapes in the canvas, so it wasn't totally out there, but also not as easy as I anticipated.

And what about grid vs flexbox for the numbered cards section? If I did it again I'd probably used grid to have more control over the layout but I ended up sticking with flex even though at some screen widths it does things I don't like as much.

I implemented the numbered articles at the bottom of the page in their own grid container, which then got dropped into a flex container so I could get it to wrap, and I think it ended up being a bit of a CSS mess.

I'd welcome any comments on a cleaner way to do those.

I used a LOT of custom CSS variables. Too much maybe? Would it have been better to just keep the colors with their respective rules?

I feel like my displayData() function is a bit out of control. This function is what makes the chart dynamic based on the data file. It receives the parsed data and then uses it to set the column heights, label the days, set the amounts for the column labels etc (and as I'm typing this I'm realizing that I could split all those up). I think I was unsure because the data came in all in the one JSON array.

Ideas on how to handle those separate tasks but also when reading from the one source of data?

Creating an order or routine for establishing changes based on media queries was a stumbling point. Any guidelines for best practices for setting CSS with media queries?

iOS for iPhone in landscape mode thinks body height is the physical screen dimensions. Best practices for layouts in phone landscape? My inclination (I have not yet followed through on this) is to create a media query and CSS rule-set for phones in landscape mode, specifically to fit the screen without needing to scroll